Carbon: Determine if date picker's calendar grid should act more like a modeless dialog

Created on 9 Mar 2020  ·  1Comment  ·  Source: carbon-design-system/carbon

In #5445, @dakahn had a comment referring to https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker as a benchmark of our date picker UI.

Some notable things in dequeuniversity.com's behavior are:

  1. The calendar icon acts as a trigger button to open the calendar grid, and works as the only means to open the calendar grid
  2. The calendar grid has focus-wrap behavior (The focus sequence with tab key and shift-tab key won't go out of the calendar grid, unless calendar grid is closed by different means e.g. hitting ESC key)

Above two makes the dequeuniversity.com's UI acts more like a modeless dialog, though the grid doesn't seem to have such ARIA role.

This issue is to discuss if we should incorporate that behavior in part or a whole. Determining that requires our @carbon-design-system/design's input.

CC @carmacleod @snidersd

needs more research 🕵️‍♀️ ux 🍿 a11y ♿

>All comments

The Deque example behaves very much like the APG DatePicker Dialog example.

However, they use different markup.

The Deque example uses role="application", which doesn't convey the idea that "you're in a dialog and the tab key is trapped". It also doesn't let screen readers use their reading keys to navigate around the dialog, but maybe that's not necessary, as the tab key and arrow keys work ok.

The APG DatePicker dialog example uses role="dialog" aria-modal="true", which this tells the user that this is a modal dialog and that the tab key will be trapped. It also tells the user that the escape key will close it. It lets users navigate to the buttons using their reading keys, including the 'b' key to "go to next button", and table navigation keys in the grid. (Note that this example may have an issue with aria-selected).

You could consider asking some real users to try both examples to see which one they prefer.

Alternatively, you could consider implementing the datepicker as a combobox. The APG task force is working on an example of a DatePicker combobox. It's not finished yet, but it's getting close.

There are so many date pickers that claim to be accessible that it's hard to know which pattern to follow. :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

antonmc picture antonmc  ·  3Comments

windgaucho picture windgaucho  ·  3Comments

PatrickDuncan picture PatrickDuncan  ·  3Comments

ConradSchmidt picture ConradSchmidt  ·  3Comments

laurenmrice picture laurenmrice  ·  3Comments