1708248 - Personalise drawer HCM issues

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect)

Description

[Morgan Reschenberg [:morgan]]

Attachment: HCM comparison

Viewing the personalise drawer with high contrast mode enabled reveals some components are inaccessible to low vision users. See attached screenshot or enable HCM (about:preferences > Language and Appearance > Colors > set dropdown to always)

1. Checked checkboxes and sliders lack sufficient contrast (see checkboxes in about:preferences for sufficient contrast example). For sliders specifically consider using the forced-colors media query --NOTE: This bug is pretty severe and should be high priority

2. When expanded, the drawer is indistinguishable from page content (the page background and the drawer background are the same, so they blend together).

3. The gear icon lacks sufficient contrast

4. The "Mange more settings" option presents as a link in non-HCM and a button in HCM. If we're going to present a button here, we should increase the padding (ideally matching the padding in the "close" button). The current lack of padding hinders readability. Reworking this as a link also fixes that issue.

Comment 1

[Morgan Reschenberg [:morgan]]

This document may be helpful: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/CSS_guidelines#high_contrast_mode

Comment 2

[Scott [:thecount] Downe]

For the first round of fixes, to keep this small, and in the 89 release, I am prioritizing:

1. Checkboxes need to a high contract black fill colour.
2. The border of the panel needs a black border.
3. The manage more setting button padding, but not the icon.

I think should be done in ff90:

1. The sliders, I think this might need design input, and I don't think there is enough time to get it into 89.
2. The manage more setting icon, also, I think we want a designer for this.

The manage more settings, iirc, cannot be a link because it's not possible to link to about:preferences, as it's not a traditional page. Needs a button.

I actually didn't see any issue with the manage more settings icon in my tests, so not sure what's up with that, but can dig and figure out why in ff90.

I think prioritizing these gets us the critical changes, in a really small patch, that can probably be uplifted into 89.

Comment 3

[Morgan Reschenberg [:morgan]]

(In reply to Scott [:thecount] Downe from comment #2)

For the first round of fixes, to keep this small, and in the 89 release, I am prioritizing:

1. Checkboxes need to a high contract black fill colour.
2. The border of the panel needs a black border.
3. The manage more setting button padding, but not the icon.

I think should be done in ff90:

1. The sliders, I think this might need design input, and I don't think there is enough time to get it into 89.
2. The manage more setting icon, also, I think we want a designer for this.

The manage more settings, iirc, cannot be a link because it's not possible to link to about:preferences, as it's not a traditional page. Needs a button.

I actually didn't see any issue with the manage more settings icon in my tests, so not sure what's up with that, but can dig and figure out why in ff90.

I think prioritizing these gets us the critical changes, in a really small patch, that can probably be uplifted into 89.

Thanks Scott, I think you're totally right -- those top three are the most important, and targeting an uplift would be awesome. If you run into any trouble with HCM ignoring your colors/other changes, don't hesitate to reach out 😀

Comment 4

[Scott [:thecount] Downe]

Attachment: improved.png

Better?

Comment 5

[Morgan Reschenberg [:morgan]]

Yep! That looks good to me 😀

Comment 6

[Scott [:thecount] Downe]

Attachment: Bug 1708248 - Newtab Personalize menu high contrast fixes.

Comment 7

[Amy Churchwell [:amy]]

enable HCM (about:preferences > Language and Appearance > Colors > set dropdown to always)

This is out of scope for this change, but I think this is too many steps for a user to enable high contrast mode. Currently, by default, Firefox does not toggle this color setting when you switch your system settings to high contrast. We should followup with having "only with high contrast themes" being the default setting in the color override drop-down in preferences.

Comment 8

[Scott [:thecount] Downe]

Comment on attachment 9219323 [details]
Bug 1708248 - Newtab Personalize menu high contrast fixes.

Beta/Release Uplift Approval Request

• User impact if declined: UX for high contract mode
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Set about:preferences > Language and Appearance > Colors > set dropdown to always

2. Open newtab
3. Click personalize.
   Expected: Should see high contrast personalize menu that matches the requirements in the filed bug.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Three blocks of media query css.
• String changes made/needed: none

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fe03f858d551
Newtab Personalize menu high contrast fixes. r=amy

Comment 10

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/fe03f858d551

Comment 11

[Morgan Reschenberg [:morgan]]

(In reply to Amy Churchwell [:amy] from comment #7)

enable HCM (about:preferences > Language and Appearance > Colors > set dropdown to always)

This is out of scope for this change, but I think this is too many steps for a user to enable high contrast mode. Currently, by default, Firefox does not toggle this color setting when you switch your system settings to high contrast. We should followup with having "only with high contrast themes" being the default setting in the color override drop-down in preferences.

Hi amy! What OS are you on? The 'only with high contrast themes' option should be set as the default on linux and windows, mac is the only OS that has 'never' since we only added support for the "increase contrast" system setting recently.

Comment 12

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following using Firefox Nightly 90.0a1 (Build ID: 20210504092024) on Windows 10 x64, macOS 11.3, and Ubuntu Linux 20.04 x64 with the steps provided in comment 8:

• Checkboxes have a high contrast black fill color.
• The border of the panel is black.
• The "Manage more settings" button has more padding.

Comment 13

[Pascal Chevrel:pascalc]

Comment on attachment 9219323 [details]
Bug 1708248 - Newtab Personalize menu high contrast fixes.

Low risk, with tests and verified by QA on nightly, approved for 89 beta 9, thanks.

Comment 14

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/c63f9f8a38e5

Comment 15

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following using Firefox Beta 89.0b9 (Build ID: 20210506185706) on Windows 10 x64, macOS 11.3, and Ubuntu Linux 20.04 x64 with the steps provided in comment 8:

• Checkboxes have a high contrast black fill color.
• The border of the panel is black.
• The "Manage more settings" button has more padding.