1797383 - Input type=date and datetime-local shadow-root controls to provide visual hover state indication

Status: NEW

(Firefox :: Theme, enhancement)

Description

[Anna Yeddi [:ayeddi]]

STR:

1. Open Firefox and navigate to the following URI: data:text/html, <input type="date" value="2022-12-15">
2. Hover over each of the editable field (for type=date its month, day, year) and a reset button within the field to observe the hover behavior
3. Repeat steps 1-2 for the data:text/html, <input type="datetime-local" value="2022-12-15">

Expected:

1. Editable fields show visible indication of the state change from default to hovered
2. Button within a field shows visible indicator of its hovered state as well

Observed:

1. No change in the visual presentation of editable fields and a button

Note: Per the WCAG 2.1, the active user interface component may pass because of its position (button) or a border (input), but because the date/datetime-local inputs include multiple active UI (each field is editable separately plus the button, when applicable) it becomes unclear what is actionable and what is not actionable with a mouse, unless the control is clicked. In the case with a Reset button it means that the user clears out the entire field to figure out if the icon is functional or not. Plus, the /, : etc between editable fields are not actionable and cannot be removed, which is not clear until focused or clicked. The passing indication for editable fields could be a pointer change.

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Calendar button is hovered.png

Adding a Calendar button to the bug, because its hover indication (without HCM running) is subtle as shown on the screenshot attached - the opacity changes to 1 and this is the only indication provided

Comment 2

[Anna Yeddi [:ayeddi]]

Attachment: Calendar button - default view.png

To highlight that the input fields do not provide any hover indication, incl. the pointer that stays the same