== Steps to reproduce
1. Enable the Accessibility for Reading beta feature on Meta if you haven’t done so yet.
2. Open https://meta.wikimedia.org/wiki/User_language?useskin=vector-2022
3. Switch to night mode.
4. Notice that the babel boxes have dark text on light background. {F57537482}
5. Switch to automatic mode, and make sure that your browser requests dark mode.
== Actual result
6. Notice that the Babel boxes suddenly have light text color on light background, which is unreadable. {F57537485}
== Expected result
6. Notice that you don’t notice any change.
== Software version
Meta has 1.43.0-wmf.22, reproduced locally with the latest `master` of Vector and Babel.
== Other information
I noticed this on Babel boxes, but it’s not Babel’s fault: the extension applies `notheme` since rEBAB62fe9a44f132, which should be enough to not get light text color. Apparently it’s enough in forced night mode but not in automatic night mode.
== For newcomers
Please add the relevant line to https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/refs/heads/master/resources/skins.vector.styles/CSSCustomProperties.less#113
==Derived Requirement
Ensure that Babel boxes maintain readable text color when switching between night mode and automatic mode in the Vector 2022 skin, with appropriate text and background contrast.
==BDD
Feature: Maintain Readable Text Color in Babel Boxes When Switching Between Night and Automatic Modes
Scenario: Ensure Babel boxes have appropriate text color in night mode
Given the Accessibility for Reading beta feature is enabled
And the user is viewing a page with Babel boxes in the Vector 2022 skin
When the user switches to night mode
Then the Babel boxes should have dark text on a light background for readability
====Test Steps
__Test Case 1: Ensure Readable Text Color in Babel Boxes in Night Mode__
1. Enable the Accessibility for Reading beta feature on Meta.
2. Visit https://meta.wikimedia.org/wiki/User_language?useskin=vector-2022.
3. Switch to night mode.
4. AC1: Confirm that the Babel boxes display dark text on a light background.
== QA Results - Meta
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T374794#10200209 |
**Steps to replicate the issue** (include links if applicable):
* Enable dark mode on mobile site - log in, click settings, click "advanced mode" to make the dark mode show up
* Do something which triggers a bottom of page notification / toast e.g. watch a page
**What happens?**:
Text is black on a dark background and unreadable
{F49973263}
**What should have happened instead?**:
Either text should be light, or background should be light
**Software version** (on `Special:Version` page; skip for WMF-hosted wikis like Wikipedia):
**Other information** (browser name/version, screenshots, etc.):
** Notes for first-time taskers **
* Click "mobile view" at the bottom of the page to get mobile site
* you will need to install Extension:MobileFrontend to test this
* The fix will live in the https://www.mediawiki.org/wiki/Skin:Minerva_Neue skin
* Adding the notheme class to any element will make the element look the same in night and day themes - this should be used here.
== Requirement
Ensure that the bottom of the page notification/toast is readable in dark mode on mobile.
== BDD
```
Feature: Bottom of Page Notification/Toast Readability in Dark Mode
Scenario: Ensure notification/toast readability in dark mode
Given the user has enabled dark mode on the mobile site
When a bottom of page notification/toast is triggered
Then the notification/toast text should be readable
And the text should either be light on a dark background or have a light background
```
== Test Steps
__Test Case 1: Ensure Notification/Toast Readability in Dark Mode__
1. Enable dark mode on the mobile site by logging in, clicking settings, and enabling "advanced mode."
2. Trigger a bottom of page notification/toast (e.g., watch a page).
3. **AC1:** Confirm that the notification/toast text is readable, either light on a dark background or with a light background.
== QA Results - Beta
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T364117#9851717 |
== QA Results - PROD
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T364117#9886606 |
Regression caused by Codex migration.
# Issue 1: alignment
**Steps to replicate the issue** (include links if applicable):
* Make sure you are logged out
* Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
* Open the sidebar using the hamburger menu in the top left
**What happens?**:
"Nearby" and "Settings" is not aligned the same as the other items
{F37730653}
**What should have happened instead?**:
All items should be nicely aligned
**Other information** (browser name/version, screenshots, etc.):
Appears to be caused by the CSS rule
```lang=css
.client-js .jsonly {
display: inherit;
}
```
which is overriding display: flex.
# Issue 2: visibility
**Steps to replicate the issue** (include links if applicable):
* Disable JS
* Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
* Open the sidebar using the hamburger menu in the top left
**What happens?**:
"Nearby" is visible.
**What should have happened instead?**:
Nearby should not be visible.
== QA Results - Beta
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T346670#9422723 |
| 2 | ✅ | T346670#9422723 |
== QA Results - Beta
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T346670#9448531 |
| 2 | ✅ | T346670#9448531 |
**Steps to replicate the issue** (include links if applicable):
* Visit https://pt.m.wikinews.org/wiki/P%C3%A1gina_principal?safemode=1 while anonymous
* Click the icon in the top right corner
**What happens?**:
{F36938484}
**How to fix**
The fix should be in the Minerva repository. The icon is not being added to the stylesheet of the page and needs to be registered in one of the icon packs in skin.json
**What should have happened instead?**:
Icon should be present
# sign off steps
[] Remove the workaround at https://pt.m.wikinews.org/wiki/MediaWiki:Minerva.css
**Feature summary** (what you would like to be able to do and where):
Reconsider the existing location of the special pages link. It's currently in page tools with other links that are associated with the page, however this link has nothing to do with the page.
This was pointed out by @IKhitron and again later by @aliu
https://www.mediawiki.org/w/index.php?title=Talk:Reading/Web/Desktop_Improvements&oldid=5850154#Special_pages_link
One possible option would be to move it to the main menu.
**Benefits** (why should this be implemented?):
This would hopefully make it clearer what these links are for and how they relate to the content or the site.
{F41447473,size=full}
**Acceptance criteria**
[] Ensure communities are informed by upcoming change prior to deploying
**Steps to replicate the issue** (include links if applicable):
* Go to https://en.wikipedia.beta.wmflabs.org/wiki/Title-0.46881833986115273-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n
* Disable JavaScript
**What happens?**:
An alert at bottom right of the page tells me languages are at the top of the page but they are not
{F35968141}
**What should have happened instead?**:
The language alert should not display: Hide it the same way as we hide the language button.
**Software version** (skip for WMF-hosted wikis like Wikipedia):
**Other information** (browser name/version, screenshots, etc.):
== QA Results - Beta
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T326185#8947690 |
=== Description
Given the updated styling of the tabs we can reduce the height of the toolbar from 41px to 36px.
I think the easiest way to do this is to reduce the padding on the top of the tabs from 18px to 12px:
| current (18px) | reduced (12px)
| -- | --
| {F35507686} | {F35507687}
Assuming T234990 gets completed before this task, we will also need to reduce the margin on the top of the Watchstar and Wikilove icons from 6px to 0 px:
| current (6px) | reduced (0px)
| -- | --
| {F35507688} | {F35507689}
**Steps to replicate the issue** (include links if applicable):
* Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?quicksurvey=true
* Open developer console
**What happens?**:
* See developer console warning
**What should have happened instead?**:
* NO warning
**Software version** (skip for WMF-hosted wikis like Wikipedia):
**Other information** (browser name/version, screenshots, etc.):
1. Open <https://en.m.wikipedia.org/wiki/Main_Page>
2. Look at search bar.
3. Click/Focus it.
Upon focussing, an odd sequence commences:
* The text and magnify icon become blurred. This is a side-effect of the whole page fading out. The fade-out makes sense for the page content (which fades "away"), but less so for the search bar itself which is not meant to go away but immediately comes back in faded form.
* The search box shrinks. This appears to be a side-effect of the blue border applying to the inside of the box, instead of to the outside of the box. This might be due to the border width not being transparently reserved ahead of time, or due to incorrect box-modeluse.
* The magnify icon moves to the right.
* The placeholder text moves down and to the right, possibly also shrinking a littte, or maybe it just looks that way.
I found this experience nausiating and actually hurting my eyes. (Not in euphemism sense of design likability but literally: it hurts my eyes, as someone sensitive to bright screens and blurred/moving text).
{F34520740 height=224}