1801930 - Use Escape to close month-year panel only and keep the datepicker open

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Anna Yeddi [:ayeddi]]

STR

1. Open a new tab with URI data:text/html,<input type=date><input type=datetime-local>
2. Navigate to and activate the Calendar button (introduced with bug 1676068)
3. When a datepicker panel is opened, navigate to and activate the month-year toggle button
4. Confirm that the month and year selection panel is opened and press (from any keyboard focus position) Escape to close it

Actual

1. Both month-year and a datepicker panels are closed
2. The keyboard focus is returned to the input field

Expected

1. Only the month-year selection panel is closed, the datepicker dialog itself remains opened
2. The keyboard focus is returned to the month-year toggle button on the datepicker panel
3. Month-year toggle button's state is changed from expanded to collapsed (the aria-expanded property is set to its default value of false)

Form fields

1. <input type=date>
2. <input type=datetime-local>

Notes

The Escape is expected to close the modal dialog per WAI ARIA Dialog design pattern, but because the datepicker panel includes the month-year selection dialog - they both are modal dialogs. While within a DOM, the spinner month-year selection dialog is a descendant of the datepicker dialog (with appropriate ARIA properties being updated when the spinner is opened/closed), for a user it works as the month-year dialog is replacing the datepicker dialog and the latter is not seen from under the former one as well. Thus, it is not clearly required to keep the datepicker panel opened on Escape.

Yet, this is something that is likely to be expected by a user as the month-year selection is a sub-functionality of the datepicker dialog and by exiting it they are likely to expect to return to the previous level of their work (the datepicker panel) not to the form field itself.

Comment 1

[Anna Yeddi [:ayeddi]]

Attachment: Bug 1801930 - Use Escape to close month-year panel only. r?Jamie,mconley

For <input type=date> and <input type=datetime-local>, when a month-year selection dialog is opened from the datepicker/calendar dialog, Escape now would only close the month-year selection panel and would keep the datepicker open, returning the focus to the focusable day/gridcell on the calendar grid.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e39e674a60b1
Use Escape to close month-year panel only. r=Jamie

Comment 3

[Cristian Tuns]

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

Comment 4

[Simona Badau, Desktop QA]

Attachment: Screen Recording 2023-02-01 at 19.57.35.mov

Reproduced on Nightly 110.0a1 (Build ID: 20221220214632).
I can confirm that now when navigating and interacting with the month-year panel and then using the Escape key will only close the month-year panel and not the datepicker on Firefox 110.0b8 (tested on macOS 11.7, Windows 10, and Ubuntu 20.04.).

However, I noticed that if the month-year panel is only opened without any other kind of interaction the old behavior is still encountered as can be seen in the screen recording.
Anna, is this expected?

Comment 5

[Anna Yeddi [:ayeddi]]

(In reply to Simona Badau from comment #4)

Created attachment 9315424 [details]
Screen Recording 2023-02-01 at 19.57.35.mov

Reproduced on Nightly 110.0a1 (Build ID: 20221220214632).
I can confirm that now when navigating and interacting with the month-year panel and then using the Escape key will only close the month-year panel and not the datepicker on Firefox 110.0b8 (tested on macOS 11.7, Windows 10, and Ubuntu 20.04.).

However, I noticed that if the month-year panel is only opened without any other kind of interaction the old behavior is still encountered as can be seen in the screen recording.
Anna, is this expected?

@Simona, thank you very much for catching it up! It is not an expected behavior and I will write a patch to fix and test this case.

Comment 6

[Simona Badau, Desktop QA]

(In reply to Anna Yeddi [:ayeddi] from comment #5)

@Simona, thank you very much for catching it up! It is not an expected behavior and I will write a patch to fix and test this case.

Thanks, Ana! I've logged Bug 1815184 to cover this issue.
Based on Comment 4, Comment 5, and on the fact that the new issue is covered by Bug 1815184, marking this as Verified.