1939129 - autocomplete menu items do not follow HCM styling

Status: RESOLVED FIXED

(Toolkit :: Password Manager, defect)

Description

[Natalie Stroud [:nstroud]]

Attachment: Registration Form screen with autocomplete menu open and the first item is hovered

Prerequisites:

Found in Nightly 135.0a1 (2024-12-25)(64-bit)
Follow 'How to Test' steps in this Google Doc
Enable the Night Sky High Contrast theme

STR:

1. Open Firefox Nightly
2. Open Registration Forms page
3. Click the email text input box under 'Registration form with username & password'. The autocomplete box will appear (this is the default style)
4. Using the mouse, hover over the autocomplete box to observe the hover style
5. Click the email text input box under 'Registration form with username & password' again. Press the Down arrow key to move focus to the first item in the autocomplete box. Observe the focus style
6. When the autocomplete box is open, click the first option, 'Protect your email address'. Observe the active style

Expected / Actual:

The autocomplete menu items do not follow HCM styles. Please refer to the High Contrast Mode file in Figma

Default HCM styling:
ButtonFace background
ButtonText text

Hover HCM styling:
ButtonText background
ButtonFace text

Active HCM styling:
SelectedItem background
SelectedItemText text

Focus HCM styling:
CanvasText border
ButtonFace background
ButtonText text

Comment 1

[Natalie Stroud [:nstroud]]

Attachment: Registration Form screen with autocomplete menu open and the first item is active

Comment 2

[Natalie Stroud [:nstroud]]

Attachment: Registration Form screen with autocomplete menu open and the first item is focused

Comment 3

[Anna Yeddi [:ayeddi]]

The lack of the semantic styling in the High Contrast Mode (HCM) is an access-S3 issue since it makes it difficult to discern which element is, in fact, an active UI and could be activated if clicked, which one is now hovered and which one is not, for HCM users (those with low vision, users with cognitive disabilities, users with dyslexia, with colorblindness, and others).

We need to ensure the appropriate color pairs are used for forced-colors media query (HCM on Win), as described by Natalie in the bug

Comment 4

[[e-mail]]

Attachment: Bug 1939129 and Bug 1939536 - HCM dropdown fix r?groovecoder

Comment 5

[[e-mail]]

Attachment: Bug 1939129 - Relay HCM dropdown fix r?ayeddi

Comment 6

[[e-mail]]

this testing page - Registration Forms - no longer shows the Relay dropdown.

please use this page for testing: https://www.wcopremium.tv/wp-login.php?action=register

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/eff36a282615
https://hg.mozilla.org/integration/autoland/rev/d3ed677034a5
Relay HCM dropdown fix r=ayeddi,desktop-theme-reviewers,tgiles,emilio,accessibility-frontend-reviewers

Comment 8

[Cosmin Sabou [:CosminS]]

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