Skip to content

Accessibility :: Date picker dialog : Tab key behavior  #2007

Closed
@ben-caplan

Description

@ben-caplan

Describe the bug
Per the W3C (WCAG) Accessibility standards a user should be able to use the tab button (once the calendar grid/dropdown is open) to access each of the interact-able elements with in the component. That is to say that the user should be able to use the tab key to access the next/prev month button, the first date in the calendar (only the first date), the close dropdown UI component, etc.

To Reproduce
View any date picker and use the tab key to experiment with the current keyboard interactions/capibilities.

Expected behavior
Here is the expected behavior as documented on the W3C (https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html#kbd_label_3):

Tab:

  • Moves focus to next element in the dialog Tab sequence.
  • Note that, as specified in the grid design pattern, only one button in the calendar grid is in the Tab sequence.
  • If focus is on the last button (i.e., OK), moves focus to the first button (i.e. Previous Year).

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
All browsers, all versions

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions