Uh oh!
There was an error while loading. Please reload this page.
feat(picker): picker column is easier to select with assistive technology - #29371
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| newOption = this.findPreviousOption(); | ||
| break; | ||
| case 'PageUp': | ||
| newOption = this.findPreviousOption(5); |
There was a problem hiding this comment.
A stride of 5 was based on how browsers handle PageUp/PageDown in scroll snapping containers
| if (!this.disabled && option.disabled) { | ||
| return false; |
There was a problem hiding this comment.
My understanding is this if statement had more checks than it needed to. According to the comment, the picker column's disabled state has no bearing on whether or not an option should be rendered as active, so we don't need to check it.
| } | ||
| connectedCallback() { | ||
| this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value'; |
There was a problem hiding this comment.
I could be convinced to not have a default value here since the label isn't super helpful. However, I was concerned about breaking the existing experience since not using an aria-label on the slider role could cause tools such as Axe to start failing.
There was a problem hiding this comment.
I think a label is better than no label here. It is also incredibly straightforward for developers to customize it.
sean-perkins
left a comment
There was a problem hiding this comment.
Moving into device testing next, small suggestion on a type adjustment for stricter types.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
| } | ||
| connectedCallback() { | ||
| this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value'; |
There was a problem hiding this comment.
I think a label is better than no label here. It is also incredibly straightforward for developers to customize it.
| return ( | ||
| <ion-picker-column | ||
| aria-label="Select a day period" |
There was a problem hiding this comment.
I'm ok with the naming here.
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Issue number: resolves#25221
What is the current behavior?
The wheel picker is hard to use with screen readers because users need to manually swipe over every option. Not only is this tedious, it also means it's impossible to move between columns/leave the picker by swiping only because the act of swiping selects a value.
What is the new behavior?
We did investigations into how native handles the wheel picker, and both iOS and Android do it differently. Unfortunately, neither of those patterns can be implemented exactly using web tech (at least not without a lot of brittle/hacky code).
As a result, we settled on a solution that follows web accessibility best practices and addresses the original issue:
role="slider"which means that screen readers should synthesize keyboard events when swiping. This allows us to resolve the original issue. Users can also double tap to slide up/down to adjust values instead.Note: Chrome currently does not synthesize keyboard events. However, this is something that could be fixed in the future (since Chrome is not following the spec right now). Android users can double tap to slide up/down in the meantime.
Does this introduce a breaking change?
Other information
Dev build:
8.0.0-dev.11713893672.15a2b23eReviews: Please test this on iOS and Android!
I recommend testing on
src/components/datetime/test/prefer-wheelsince it lets you the core functionality as well as the datetime-specific integrations (the aria labels)Docs PR: ionic-team/ionic-docs#3612