Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[date-picker] component is not accessible via screenreader #5310

Closed
dakahn opened this issue Feb 10, 2020 · 5 comments
Closed

[date-picker] component is not accessible via screenreader #5310

dakahn opened this issue Feb 10, 2020 · 5 comments
Labels
component: date-picker role: dev 🤖 severity: 1 https://ibm.biz/carbon-severity type: a11y ♿

Comments

@dakahn
Copy link
Contributor

dakahn commented Feb 10, 2020 •
edited
Loading

Environment

Tested on macOS latest in Safari for VoiceOver and generic keyboard testing and Window 10 latest in Firefox for JAWS.

Testing https://carbon-components-react.netlify.com (unreleased latest)

Detailed description

VoiceOver 🍎

  • The calendar dropdown is not announced when the input is focused
  • If the user focuses the calendar VO announces it as a "group inside of web content" with no further instruction
  • The user is not informed dates can be selected
  • When the user selects a date the selection is not announced; the focused date is simply read again
  • When a date is selected and the user is selecting a subsequent range none of this behavior is announced (same as above)

JAWS 🦈

note: JAWS was so broken that testing most of the aforementioned interactions wasn't opossible

  • Calendar dropdown was not announced
  • Calendar can be accessed with the down arrow, but once the calendar date is focused dates can't be changed using arrow keys (seems to be clashing with JAWS reading commands as groups are being focused and read. @snidersd can you confirm this behavior?)
@dakahn dakahn mentioned this issue Feb 10, 2020
Closed
@snidersd
Copy link

Testing this with VO, macOS and Chrome with the following issues:

  1. After a date is selected from the calendar VO announces that it is invalid data. This happens in all date picker calendars.

range-calendar

2. Date in the calendar should be selectable with Space and Enter key and it should close the dialog after the date is selected. Space does not work and the user must hit the Enter key twice to close the dialog. In addition, the second time the Enter key is hit it also populates the second date in the date range.
  1. Range calendar with min/max - displays the January calendar when it opens and does not display the min/max range until the second date picker is selected.

Screen Shot 2020-02-10 at 3 07 36 PM

4. Fully controlled - Arrow down to dates and VO starts announcing every date in the calendar.

Screen Shot 2020-02-10 at 3 10 22 PM

Here is a link to the WAI-ARIA date picker pattern for keyboard accessible keyboard controls: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html

@asudoh
Copy link
Contributor

asudoh commented Feb 11, 2020

Some info wrt the keyboard navigation:

  • The current range version lets user select both start/end first time the date picker is opened. Looks that this is more of a UX decision.
  • Not being able to re-open the date picker by keyboard after the first selection (by enter key) seems simply a bug that needs to be fixed.
  • Ctrl-arrow keys can be used to increment/decrement year/month by keyboard (Mac Mission Control may take over that keyboard shortcut. You can disable it if it's the case)

asudoh added a commit to asudoh/carbon-components that referenced this issue Feb 11, 2020
@asudoh
fix(DatePicker): ensure down arrow opens calendar dropdown
fdbf180 
Refs carbon-design-system#5310.
@asudoh asudoh mentioned this issue Feb 12, 2020
Merged
asudoh added a commit that referenced this issue Feb 13, 2020
@asudoh
fix(DatePicker): ensure down arrow opens calendar dropdown (#5326)
57914e5 
Refs #5310.
asudoh added a commit to asudoh/carbon-components that referenced this issue Feb 18, 2020
@asudoh
fix(DatePickerInput): announce keyboard guide
8f843a8 
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.
@asudoh asudoh mentioned this issue Feb 18, 2020
Closed
asudoh added a commit to asudoh/carbon-components that referenced this issue Feb 26, 2020
@asudoh
fix(DatePicker): add aria-owns
a7b4f4e 
This change makes VO cursor moves to calendar dropdown as the next
element to date picker input.

Also contains the following changes:

* Make tab/shift-tab key behaviors align to such new VO cursor
  behavior
* Make the arrow for previous/next month focusable
* Moves an old Flatpickr plugin code to a separate file

Refs carbon-design-system#5310.
@asudoh asudoh mentioned this issue Feb 26, 2020
Closed
@joshblack joshblack mentioned this issue Mar 5, 2020
Closed
82 tasks
@asudoh asudoh mentioned this issue Mar 9, 2020
Closed
@obro
Copy link

obro commented Apr 9, 2020

Team, do you have a target ETA for fix implementation?

@obro
Copy link

obro commented Apr 13, 2020

@asudoh Curious if any comment? We use this UI control in Your Learning.

@dakahn dakahn self-assigned this Jul 21, 2020
@dakahn dakahn removed their assignment Sep 28, 2020
@dakahn dakahn changed the title [date-picker] component is not accessible with keyboard/screenreader [date-picker] component is not accessible via screenreader Jan 26, 2021
@dakahn dakahn added severity: 1 https://ibm.biz/carbon-severity and removed role: visual 🎨 labels Jan 26, 2021
@dakahn
Copy link
Contributor Author

dakahn commented Apr 19, 2021 •
edited
Loading

After an update to latest Flatpickr I did another pass on this component with some interesting new findings (Tested with VO in Chrome and Safari. JAWS with Chrome, Firefox):

  • I couldn't replicate the severity:1 bugs with Voicover. The double enter interaction is because after the first date's selected without having to move focus to the second input the user can use their arrow keys to select the secondary date in the same dialog. The dialog should close on one strike of the second enter though. A little awkward for sure.
  • JAWS was still totally broken 🤕
  • Safari -- our preferred browser pairing with VO -- spoke and worked well (as far as I found in my testing)

This big broad issue is a little unhelpful (and might dissuade someone with JAWS access from helping out with an issue that includes VO bugs or vice versa), so I'll open a ticket to track JAWS bugs in more specificity and close this one out. Thanks all! 👍🏽

@dakahn dakahn closed this as completed Apr 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: date-picker role: dev 🤖 severity: 1 https://ibm.biz/carbon-severity type: a11y ♿
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@obro @asudoh @snidersd @dakahn