1608046 - Accessibility issue - Not able to access/open the native date picker's popup through keyboard

Status: VERIFIED FIXED

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

Description

[Smriti KUmari]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

Steps to reproduce:

For <input type="date" />

1. Bring focus on the date input box through keyboard by pressing Tab key
2. Try to open the "pop-up" of the date picker via keyboard.

Actual results:

The date picker pop-up does not open through keyboard (example - by pressing Enter or Space key)

Expected results:

The date picker pop-up should open through keyboard. Example - When the focus is brought to the date input box via keyboard by pressing tab key, the date picker pop-up should also be a accessible via keyboard (example, using enter, space key or any other shortcut key).

Comment 1

[Pablo]

Hi smriti
I tried to replicate the issue using windows10 64bit and the latest Firefox Nightly release 74.0a1 and also release 72.0.1
But i used test websites with date picker and they worked , as soon as i bring focus to it , it opens automatically.

Can you provide a test example or site for us to replicate?

Also Please download the latest Firefox Nightly release from here: https://nightly.mozilla.org/ and retest the problem.

If you still have the issue please create a new profile, you have the steps here:https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Lastly test if the issue is reproducible in safe mode, here is a link that can help you:
https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Regards
Pablo

Comment 2

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Pablo from comment #1)

Hi smriti
I tried to replicate the issue using windows10 64bit and the latest Firefox Nightly release 74.0a1 and also release 72.0.1
But i used test websites with date picker and they worked , as soon as i bring focus to it , it opens automatically.

Hi Pablo,
Which key(s) were you pressing to bring the picker up? I failed at launching the picker via keyboard as the reporter, with the simple testcase data:text/html, <input type="date">

If I clicked on the input field, I got the picker without problem.

Thanks!

Can you provide a test example or site for us to replicate?

Also Please download the latest Firefox Nightly release from here: https://nightly.mozilla.org/ and retest the problem.

If you still have the issue please create a new profile, you have the steps here:https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Lastly test if the issue is reproducible in safe mode, here is a link that can help you:
https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Regards
Pablo

Comment 3

[Pablo]

I pressed no keys, just kept pressing tab key and picker opened automatically on an online demo page with date picker.
thats why I asked for an example page.

regards.

Comment 4

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Pablo from comment #3)

I pressed no keys, just kept pressing tab key and picker opened automatically on an online demo page with date picker.
thats why I asked for an example page.

regards.

Could you share the online demo page url here? thank you.

Comment 5

[Pablo]

sure,

I used this one: https://fengyuanchen.github.io/datepicker/

regards

Comment 6

[Emilio Cobos Álvarez (:emilio)]

That is not the native date picker. The right url to test is just data:text/html,<input type=date>.

This bug is valid, though it's unclear to me it's an accessibility issue... You can change the date with your keyboard easily (and it is easier than using the date picker IMHO).

Comment 7

[Emilio Cobos Álvarez (:emilio)]

If we were to fix this this would probably need feedback from the a11y team... Jamie, do you know who's the right person to provide feedback on this?

Comment 8

[James Teh [:Jamie]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)

This bug is valid, though it's unclear to me it's an accessibility issue... You can change the date with your keyboard easily (and it is easier than using the date picker IMHO).

That's true when you know the exact date you want, but one advantage of the date picker is that it allows you to easily choose the date in terms of week days, rather than doing the math in your head or using an external calendar. For example, you can pretty easily choose one week from today or next Monday. We'd need more than just keyboard activation to fix this, though.

1. Enter, space and alt+downArrow should all activate (and focus) the date picker.
2. The buttons to change the month need to be actionable from the keyboard. Right now, they only work if you click them.
3. The buttons to change to next/previous month should be labelled.
4. The picker grid needs to be a grid semantically, either using an HTML table or ARIA grid.
5. The grid must be focusable (single tab stop). It should probably get auto-focused when the picker is focused.
6. The active day in the grid should get aria-activedescendant.
7. Left/right arrow should move by day, up/down arrow by week, page up/page down by month.
8. Enter should select the active day and dismiss the picker.
9. When the month selector is activated, it should get focus and needs to be a semantic grid similar to the day grid, with similar keyboard support.

I'm giving this access-p3 because even though the date picker is inaccessible, you can enter a date just fine and that is probably what most users will do. Copying Marco and Asa for awareness and in case they have further input.

Comment 9

[Asa Dotzler [:asa]]

Updating the Accessibility Team's impact assessment to conform with the new triage guidelines. See https://wiki.mozilla.org/Accessibility/Triage for descriptions of these whiteboard flags.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1608046 - Toggle picker when pressing space/enter. r=morgan,Jamie

I think this is better behavior than what we have now, and thus I think
we should take this. Eventually having a fully accesible popup is
preferable, but even though this doesn't allow you to navigate the
popup on its own, it allows you to see the it update as you use the
arrows or other keyboard input to see the date, which I think is
valuable.

Comment 11

[James Teh [:Jamie]]

Emilio, please make sure to set leave-open here or file another bug for the remaining work. Thanks.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9fa0afe43bdc
Toggle picker when pressing space/enter. r=morgan,Jamie

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Thanks, filed bug 1676068 for this.

Comment 14

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/9fa0afe43bdc

Comment 15

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 74.0a1 (20200109213942) on Windows 10x64 and URL provided in comment 6.
The issue is verified fixed with Firefox 84.0b3 (20201119195818) on Windows 10x64, macOS 10.12, and Ubuntu 18.04. The date picker can be opened using Space or Enter keys.