1797669 - [Win][HCM] Datepicker from Input type=date and datetime-local to provide semantic HCM styles

Status: NEW

(Toolkit :: Themes, defect, P3)

Description

[Anna Yeddi [:ayeddi]]

STR:

1. Activate system High Contrast Mode (Settings > Accessibility > Contrast Themes > (i.e. Night Sky) > Apply)
2. Open the Firefox browser data:text/html, <input type="date"><input type="datetime-local">
3. Open a Datepicker dialog (by clicking on any part of the date input or, after the 1676068 patch, on the Calendar button within the field)
4. Observe colors and semantics of the widget (calendar and month-year spinner included)

Expected:

Colors and styling (incl. outlines for controls) to communicate the semantic meaning of each element by following the High Contrast Mode design guide to provide high color contrast and respect user HCM settings.

Actual:

Color used provide low contrast, ignoring the OS color palette. Styling of components is not semantic (colors, lack of outlines for active UI)

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: 2022-10-25_HCM_Windows-Datepicker.png

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: 2022-10-25_HCM_Windows_spinner.png

Attached are screenshots taken on Windows 11 with HCM Night Sky theme enabled (and bug 1676068 patched locally)

Comment 3

[Anna Yeddi [:ayeddi]]

From @Itiel's comment in Phab:

5. For the td.weekend or td.outside case in HCM, the numbers color should be GrayText rather than reducing the opacity to 0.5.

7. Back to HCM, the next/previous month arrow buttons should behave like normal buttons without the reduced opacity (so have a border when hovered).
8. Also the ths shouldn't have reduced opacity on HCM