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

[EuiDatePicker] Update ARIA and role attributes for better screen reader accessibility #5501

Merged
merged 4 commits into from
Dec 28, 2021
Merged

[EuiDatePicker] Update ARIA and role attributes for better screen reader accessibility #5501

merged 4 commits into from
Dec 28, 2021

Conversation

1Copenut
Copy link
Contributor

@1Copenut 1Copenut commented Dec 21, 2021 •
edited
Loading

Summary

The calendar datepicker needed role="option" added to the individual date choices and the time picker needed an accessible label. Also revised the accessible label for the calendar to closer match the time picker. Closes #5303.

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@1Copenut 1Copenut self-assigned this Dec 21, 2021
@1Copenut 1Copenut marked this pull request as ready for review December 21, 2021 22:05
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5501/

chandlerprall
chandlerprall approved these changes Dec 28, 2021
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM, compared this vs. main with mac's voiceover and saw almost no difference due to the verbosity of the live reasons. Did notice that the better-formatted "MMMM, YYYY" is read while tabbing off the calendar listbox.

@1Copenut 1Copenut merged commit ec599f4 into elastic:main Dec 28, 2021
@1Copenut 1Copenut deleted the feature/tpierce-eui-5303 branch December 28, 2021 21:48
@cee-chen cee-chen mentioned this pull request Jan 5, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chandlerprall chandlerprall chandlerprall approved these changes

@cchaos cchaos Awaiting requested review from cchaos

@breehall breehall Awaiting requested review from breehall

Assignees

@1Copenut 1Copenut

Labels
accessibility - screen reader accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[EuiDatePicker][AXE-CORE]: aria markup needs to be adjusted for best screen reader experience
3 participants
@1Copenut @kibanamachine @chandlerprall