a11y

[bevacqua]

a11y

[muhammad-tayyab-ashraf]

Hello Everyone, Any update on this? Do we have keyboard accessibility support now? How we can achieve this?

[kentcdodds]

To be honest, I'm not sure of the best way to do this though. I can't think of any other example. Perhaps @marcysutton or @mpiotrowicz have some tips.

[marcysutton]

Ooh, yeah...clicking on table elements is not accessible. A more intuitive autocomplete would be a good first step, but the user would have to know what to type in. Providing input elements for different date/time units could be a better experience because of the built-in keyboard and semantic support. We had a similar discussion about a date/time picker for Angular Material.

[mpiotrowicz]

@marcysutton interesting discussion from Angular, seems like that's the best way to get started!

[bevacqua]

Could you guys try and come up with a pull request to get this started? I'd really love to see this happen in Rome.

[marcysutton]

Wish I could, but I am barely able to finish my pile of work as it is. I can provide guidance, but that's about it.

[kentcdodds]

Perhaps I could work on it if I ever get to it in my project, but I don't know if this is the calendar we'll choose and I'm also very busy.

[bjankord]

Here are WAI-ARIA authoring practices related to keyboard interaction for datepickers. http://www.w3.org/TR/wai-aria-practices/#datepicker

Keyboard Interaction

Key	Action
Left, Right	Navigates one day to the next in a continuum. If the user advances past the end of the month they continue into the next or previous month as appropriate.
Up, Down	Navigates to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate.
Page-down	Navigate to same day in next month
Page-up	Navigate to same day in previous month
Alt+Page-down	Navigate to same day in next year
Alt+Page-up	Navigate to same day in previous year
Home	Navigate to first day in month
End	Navigate to last day in month
Space	Singleton Mode: acts as a toggle either selecting or deselecting the date. Contiguous Mode: Similar to selecting a range of text. Space selects the first date. Shift+Arrows add to the selection. Pressing Space again deselects the previous selections and selects the current focused date.
Enter	If the the calendar is a popup attached to some other widget (e.g., a text field), then Enter dismisses the popup, and the selected date(s) are shown in the associated widget. If the calendar is a static region on the page, then Enter confirms the selected date(s).
Escape	In the case of a popup date picker, closes the widget without any action.

Tab order and Focus

Tab - Like other widgets, the date picker widget should receive focus by tabbing into it. Once focus is received, focus is repositioned on today's date in a grid of days and weeks. A second tab will take the user out of the date picker widget. Focus initially is placed on today's date.

Shift+Tab - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.

[bjankord]

Here are the key codes for these common keys: https://w3c.github.io/uievents/#h-fixed-virtual-key-codes
Using oninput with a fallback to onkeydown sounds like a good approach: https://mathiasbynens.be/notes/oninput

[kentcdodds]

This issue is stale, so I'm going to go ahead and close it. Feel free to open a new one or reopen this one if someone's actually going to work on it.