ionic-framework
ionic-framework copied to clipboard
fix(datetime): wheel picker is easier to use with screen readers
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.
- Some docs updates need to be made in the
- [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 https://github.com/ionic-team/ionic-framework/issues/25221
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: https://bugs.webkit.org/show_bug.cgi?id=221102