1801917 - Decide if a user can arrow to a Calendar button within date and datetime-local inputs

Status: NEW

(Core :: Layout: Form Controls, enhancement)

Description

[Anna Yeddi [:ayeddi]]

Attachment: 2022-11-22_Date_and_datetimelocal_inputs_with_Calendar_buttons_and_arrow_navigation_shown.png

STR

1. Open a new tab with URI data:text/html,<input type=date><input type=datetime-local>
2. Navigate to the date input with a Tab key
3. When the input is focused, use arrow keys (Arrow Right and Arrow Left) to navigate between spinbuttons of these controls, i.e. from the day to month to year selectors.
4. Try to navigate to the Calendar button within a field
5. Try to navigate to the next input field with Tab keypress

Actual:

1. User has to press Tab (from any position within an input) to focus the Calendar button
2. User has to press Tab twice instead of once to navigate past the input with a Calendar button in it

Expected/Possible:

1. User can arrow from within the input field to focus the Calendar button, for example:
   • Arrow Right from the year spinbutton for a date input
   • Arrow Right from the pm/am spinbutton for a datetime-local input (within the en_US locale)
2. User will only need to press Tab once to navigate past this input field to proceed with filing up the form

Form fields

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

UI element

1. Calendar button that toggles a datepicker panel (introduced with bug 1676068)

Question

Should we allow a user to arrow to the Calendar button to reduce the number of Tab keypresses they need to navigate pass these input fields and keep the consistent navigation pattern for all elements within each field?
This would especially affect users with limited mobility by reducing the number of actions needed to skip the field if they chose to do so.

Comment 1

[Anna Yeddi [:ayeddi]]

Additional question is if we want to keep the tabbing within the input itself, because now a user should Tab from the first field like month to day and then to year before reaching out to the Calendar button - both arrow and tab navigation is provided within a field.