fix(DatePickerInput): announce keyboard guide #5375
Conversation
This change adds a content that is referred from `aria-describedby` in date picker's `<input>` (for single/range mode). The content announces how to navigate to, and how to navigate within calendar dropdown by keyboard. There were a few options in order to announce how to navigate to date picker; Two of them are from W3C WAI-ARIA Authoring Practices 1.1, a) Date Picker Dialog Example, b) Combobox with Grid Popup Example. a) has very different user interaction model from ours, because we want date picker to be open when the `<input>` gets focus but a) opens date picker only when the calendar icon is clicked. b) lets us announce the existence of dropdown, etc. in a similar manner as our other dropdown components do, but `role="combobox"` does not sound adequate for a date picker. Therefore, this change uses a custom content to announce how to navigate to calendar dropdown, rather than the content screen reader automatically creates/announces. Refs carbon-design-system#5310.
|
Deploy preview for carbon-elements ready! Built with commit 8f843a8 |
|
Deploy preview for carbon-components-react ready! Built with commit 8f843a8 https://deploy-preview-5375--carbon-components-react.netlify.com |
| }; | ||
|
|
||
| static defaultProps = { | ||
| pattern: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}', | ||
| type: 'text', | ||
| disabled: false, | ||
| invalid: false, | ||
| calendarDropdownAssistiveText: [ | ||
| 'Use down arrow key to navigate to calendar dropdown.', |
There was a problem hiding this comment.
Does it make sense for us to specify arrow keys as the interaction mechanism when someone may be using VO on iOS?
|
@asudoh I'm hesitant to be this specific with the directions on how to use the DatePicker with a screenreader, partially because of the differences between platforms and screenreaders but mainly because it makes us really beholden to this working exactly as stated. For example, it announces "Use down arrow key to navigate to dropdown calendar" but that doesn't work in VO when moving from that div. The intent to help is really good here but if the instructions don't work, it ends up being more confusing |
|
@abbeyhrt Thank you for your thoughts!
Could you please elaborate? I'm not sure what |
|
Yeah for sure! This might be something with my VO settings but for me, it announces when I'm VO-focused on this:
The focus is still on the input but the VO focus (the little black square in the picture) is on that div and so using down arrow from there doesn't navigate the screenreader to the calendar. |
|
Thank you for clarifying @abbeyhrt! Will see if there is a better announcement along with a better interaction model. |
|
Hey there! Going through the PR backlog today and am clearing out PRs that have been up for a while 👀 |
This change adds a content that is referred from
aria-describedbyin date picker's<input>(for single/range mode). The content announces how to navigate to, and how to navigate within calendar dropdown by keyboard.There were a few options in order to announce how to navigate to date picker; Two of them are from W3C WAI-ARIA Authoring Practices 1.1, a) Date Picker Dialog Example, b) Combobox with Grid Popup Example.
a) has very different user interaction model from ours, because we want date picker to be open when the
<input>gets focus but a) opens date picker only when the calendar icon is clicked.b) lets us announce the existence of dropdown, etc. in a similar manner as our other dropdown components do, but
role="combobox"does not sound adequate for a date picker.Therefore, this change uses a custom content to announce how to navigate to calendar dropdown, rather than the content screen reader automatically creates/announces.
Refs #5310.
Changelog
New
calendarDropdownAssistiveTextprop, that is used by screen reader so we can guide user how to open and navigate within calendar dropdown by keyboard.Testing / Reviewing
Testing should make sure our date picker is not broken.