1902068 - Fix HCM styling of input type="range"

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[Irene Ni [:ini]]

In the Windows 11 Night Sky Contrast Theme, the input type="range" slider does not have any active or hover styling. In non-HCM, the slider has color changes for both states. A possible set of colors for HCM could be:

1. On hover, the slider track and slider thumb outline is highlighted with the SelectedItem color.
2. In the active state, the slider track has the SelectedItem color while the slider thumb outline has the ButtonText color.

Instead of the slider thumb outline being highlighted, the inner fill could also be recolored to match the non-HCM styling. See Figma designs of HCM slider for examples.

This is reproducible by going to the example range input on MDN with Windows 11 Night Sky enabled under Settings -> Accessibility -> Contrast themes.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Relevant code is here: https://searchfox.org/mozilla-central/rev/b11735b86bb4d416c918e2b2413456561beff50c/widget/Theme.cpp#912-934

In particular ComputeRangeProgressColors and co don't account for the active / hover / etc here.

Same for ComputeRangeTrackColors here.

So the fix should be relatively simple, the tricky thing is verifying the colors chosen work for all HCM themes on Windows 10 and 11...

Comment 2

[Irene Ni [:ini]]

Attachment: Bug 1902068 - Fix HCM styling of input type="range". r=#accessibility-frontend-reviewers

Comment 3

[Irene Ni [:ini]]

After consulting with the a11y team, we decided to go with this design for the default, hover, active, and disabled states. I have submitted a patch with these changes.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/49710ab427d4
Fix HCM styling of input type="range". r=accessibility-frontend-reviewers,emilio

Comment 5

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/49710ab427d4