ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

fix(datetime): wheel picker is easier to use with screen readers

Open liamdebeasi opened this issue 1 year ago • 0 comments

Pull request checklist

Please check if your PR fulfills the following requirements:

  • [x] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • [x] Build (npm run build) was run locally and any changes were pushed
  • [x] Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • [x] Bugfix
  • [ ] Feature
  • [ ] Code style update (formatting, renaming)
  • [ ] Refactoring (no functional changes, no api changes)
  • [ ] Build related changes
  • [ ] Documentation content changes
  • [ ] Other (please describe):

What is the current behavior?

Issue URL: resolves

Currently, swiping left/right with a screen reader enabled moves users between buttons within a single picker column. This makes it very difficult to move between columns because users need to swipe through all buttons in a column before proceeding to the next one.

What is the new behavior?

  • Adds the "role="spinbutton"` on the picker column. This makes it so that swiping moves between columns instead of moving between buttons within a single column. Users can then double tap to scroll a wheel up or down to select a new value.
  • Adding spinbutton requires a label to be added. We add a default "Picker Item" label that devs can customize. This was done so that devs do not get a set of new a11y issues if this fix ships.

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

Other information

main branch

Note: There is a Safari bug where the values are read as "50%" when the spinbutton value is a percentage. It still reads the selected day/year, but it will also read "50%". See:

liamdebeasi avatar Aug 09 '22 22:08 liamdebeasi