1922401 - [HCM] New Tab: Settings button lacks focus indication and has improper styling on High Contrast themes

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: On Windows Dark Sky HCM, NVDA Speech output showing the Personalize new tab button being focused but there is no visual indication of its focused state

STR:

1. Ensure Windows High Contrast theme is activated (Steps to activate an OS High Contrast Mode in source docs)
2. Open Firefox on the New Tab page
3. Press Tab key to focus the Settings button and observe the focus state of the button (compared to its default view)

Expected:

1. The Settings (gear icon) button is visually appearing as a button with ButtonText and ButtonFace color combination and border, and, when focused with keyboard, it has a CanvasText-colored outline that clearly indicates that this element is, in fact, has keyboard focus.

Actual:

1. [access-s2 - refer to the note below] The Settings (gear icon) button does not have any focus identification, no outline specifically, but also there is no other visual change happens when it is, in fact, focused.
2. [access-s3] The Settings (gear icon) button does not provide expected semantic styling for a button

Note:

While generally, improper HCM styling is triaged as access-s3, but because this specific control does not provide any focus identification and, per the bug 1922398, the keyboard order is not following the visual reading order, it makes it hard to know if the settings is, in fact, accessible with keyboard. Especially, without a screen reader or voice control running to at least identify what is being focused. Missing focus indicators is an access-S2 issue that makes this part of the UI inaccessible for users of assistive technologies, especially those relying on keyboard alone, because it is not clear what is, if anything, is currently focused and what could happen, if this invisible element is activated. This also makes the navigation with keyboard unpredictable. Thus, marking this as an access-S2 issue that may prevent users of High contrast themes (i.e. users with low vision, users who are color blind, users with cognitive disability, neurodiverse users, etc.)

Remediation:

We need to ensure the focus outline is using CanvasText color and is allowed on forced-colors media, as well as that the appropriate color pairs are used for forced-colors media query (HCM on Win): ButtonFace with ButtonText for the border/label text and for the control background. The hovered state is expected to use SelectedItem and SelectedItemText color combination in place of the Button colors of the default state.

Adding a Figma reference for color combinations for different Win10 and Win11 themes (SSO required), as well as the buttons on HCM (SSO required)

Comment 1

[BugBot [:suhaib / :marco]]

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

For more information, please visit BugBot documentation.