2031398 - [a11y] Focus and hover style inconsistency

Status: UNCONFIRMED

(Enterprise Products :: Firefox, defect)

Description

[Claire Joeckel]

Steps to reproduce:

Impacted Section/Element

Links and buttons in the Company Badge and Menu section and Sign-Out Confirmation modal dialog

Steps to Reproduce

Activate the "Firefox Enterprise" button. In the resulting "Company Menu" dropdown, use the keyboard to navigate over the "Learn more" blue underlined text link and the "Sign out…" button. Then hover over each of those elements with the mouse, and compare their styles in the hovered state to their styles in the focused state.

Actual results:

The "Learn more" blue underlined text links have their text turn a darker shade of blue on mouse hover, but not on keyboard focus. The "Sign out…" button has its background turn light grey on mouse hover, but not on keyboard focus.

Expected results:

Any style changes the elements experience when they receive mouse hover are also experienced when they receive keyboard focus.

User Impact

The inconsistent mouse hover and keyboard focus style changes create an inequivalent experience for users.

WCAG 2.2 References

2.4.7 Focus Visible

Recommendations

Style changes on mouse hover and keyboard focus should generally match. Specify both hover and focus in CSS selectors (e.g., a:hover,a:focus {…}) to ensure this consistency.

Testing Environment

Any

Assistive Technology Used

Any

Severity

3-Moderate

Comment 1

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

Hi @Gian-Carlo, would that be possible to check the current version and review the focus and hover styles for this bug? If the focus outline does appear unobscured on keyboard focus and there is a distinct hover style provided, the UI would satisfy WCAG 2.2 Level AA Success Criterion 2.4.7 Focus Visible, thus this bug could be moved into the Enhancement category.

Hover style, if only the color of link text is being changed on mouse hover, should provide change of color that has at least 3:1 in color contrast (i.e. lighted blue vs darker blue, color contrast could be checked with Colour Contrast Analyzer app with eyedropper or with HEX colors on WebAIM Contrast Checker page. If the color change is less than 3:1, then the bug would need to remain access-S3 bug.

Comment 2

[Gian-Carlo Pascutto [:gcp]]

Thanks for the clarification for what affects the severity. To answer your question: yes, it is possible to do that work, and we'll do so when we get back to this bug.

Comment 3

[Claire Joeckel]

Unresolved.