fix(datetime): date and time picker accessibility#25980
Conversation
| this.isTimePopoverOpen = true; | ||
|
|
||
| popoverRef.present( | ||
| popoverRef.presentFromTrigger( |
There was a problem hiding this comment.
Using presentFromTrigger allows us to configure if the direct descendent should be focused when the popover is presented. We want to focus the direct descendent so the hours picker column is announced immediately (this happens on iOS in the New Event interface).
| * is actively visible to the user. | ||
| */ | ||
| this.scrollActiveItemIntoView(); | ||
| this.focusActiveItem(); |
There was a problem hiding this comment.
Focusing the active picker column item on value change will cause the screen reader to accurately announce the value change.
| } | ||
|
|
||
| private onFocus = () => { | ||
| this.focusActiveItem(); |
There was a problem hiding this comment.
Additionally we need to focus the active item manually when the picker column receives focus, so that the active item is correctly announced.
There was a problem hiding this comment.
Unable to make this improvement right now. The input mode implementation is not compatible with the button being focused when the column is focused. The input requires the keypress events to be bubbled from the picker column being focused.
| return ( | ||
| <button | ||
| tabindex="-1" | ||
| role="radio" |
There was a problem hiding this comment.
Role radio seemed like the most appropriate role based on the ARIA spec (single selection allowed in a group at a time).
| <div class="picker-item picker-item-empty"> </div> | ||
| <div class="picker-item picker-item-empty"> </div> | ||
| <div class="picker-item picker-item-empty"> </div> | ||
| <div class="picker-item picker-item-empty" aria-hidden="true"> |
There was a problem hiding this comment.
The empty picker items are hidden from screen readers, otherwise they are read when the screen reader announces the entire section.
| return ( | ||
| <div | ||
| // Non-visible months should be hidden from screen readers | ||
| aria-hidden={!isWorkingMonth ? 'true' : 'false'} |
There was a problem hiding this comment.
Hiding the months outside of the active working month, results in the screen reader not announcing the previous and next month days when the group is announced.
| {getMonthAndYear(this.locale, this.workingParts)}{' '} | ||
| <ion-icon icon={this.showMonthAndYear ? expandedIcon : collapsedIcon} lazy={false}></ion-icon> | ||
| <ion-icon | ||
| aria-hidden="true" |
There was a problem hiding this comment.
This icon was being announced as "image" when the section was being read. Hiding it from screen readers as that information is not valuable or useful.
liamdebeasi
left a comment
liamdebeasi
left a comment
There was a problem hiding this comment.
Can we break these changes out into separate PRs? FW-2184 only deals with the calendar body
|
Sure thing! |
|
All behavior in this PR have been split into separate pull requests; closing. |
2 participants
Pull request checklist
Please check if your PR fulfills the following requirements:
ionic-docsrepo, in a separate PR. See the contributing guide for details.npm run build) was run locally and any changes were pushednpm run lint) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
Picker Internal:
Datetime has several accessibility issues:
Issue URL: Internal
What is the new behavior?
Picker Internal
Accessibility
Time picker announces the type of column being focused (e.g. "5 o'clock" or "10 minutes")Does this introduce a breaking change?
Other information
Date picker
main-datetime-accessibility.mp4
pr-datetime-accessibility-v2.mp4
Outdated - shows announcement of selected item on focus (but interferes with input mode)
pr-datetime-accessibility.mp4