1893730 - Ensure the about:newtab supports HCM on Windows, incl. support for the focus indication

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Only the Learn More link and (partially) Search input are providing expected HCM appearance

Ensure the Windows High Contrast Mode is supported by providing forced-colors styling in accordance with the HCM references (internal only).

Please refer to the documentation on how these queries are used in source docs. You can also view this live Media Query Checker site to play around with your OS/browser settings and see which queries are activated or deactivated and how the system colors like ButtonText and ButtonFace are expected to be rendered on your version of Windows OS (for the forced-colors mode).

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: outline:none is used (captured on Windows 11 HCM) - a tile example

The outline: none is used in multiple places in the CSS which makes it is not possible to navigate the page with keyboard when the High Contrast Mode is active on Windows because the focus indication is not visible. This and the fact that there are most of the focusable items that missing any focus state increases the accessibility severity for the bug, because it would be nearly impossible to use keyboard on HCM on Win.

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: outline:none is used (captured on Windows 11 HCM) - a Settings button example

Comment 3

[Anna Yeddi [:ayeddi]]

Attachment: outline:none is used (captured on Windows 11 HCM) - a card link example

Comment 4

[Anna Yeddi [:ayeddi]]

Attachment: HCM button outline on focus is not present and should use CanvasText

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: HCM hover styles for

Comment 6

[Anna Yeddi [:ayeddi]]

Attachment: HCM hover styles and focus style for

Comment 7

[Anna Yeddi [:ayeddi]]

Attachment: HCM hover styles and focus style for "..." Open menu buttons

HCM hover styles are not provided to the cards and little styling for hovered ... buttons and Settings button

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:amy, could you have a look please?

For more information, please visit BugBot documentation.

Comment 9

[Becca]

Attachment: Bug 1893730 - Ensure the about:newtab supports HCM on Windows - r=ayeddi

Comment 10

[Becca]

I submitted a WIP patch, but I have a few questions/comments:

1. outline:none is used (captured on Windows 11 HCM) - a Settings button example - The Settings button was missing keypress functionality, so I added an onKeyDown event in addition to a focus state. It was missing a focus state both in and out of HCM, so I didn't put that inside a query.
2. HCM button outline on focus is not present and should use CanvasText - I added a focus state for the top site icons, which I'm assuming is what was intended, but the button element (the three dots) already has a focus state in HCM
3. **HCM hover styles and focus style for "..." Open menu buttons ** - It's not clear to me what the hover and focus styles should be for these based on the Figma