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.

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

fix: improve screen reader instructions for DatePicker #1166

Merged
merged 3 commits into from
Aug 13, 2020

Conversation

jacobdevera
Copy link
Contributor

Description

  • Remove 'assertive' aria-live region on header, and instead use polite region for all announcements. This ensures the initially-focused date is read out and the previous/next buttons aren't unexpectedly read when opening the calendar.
  • Provide separate instructions for year view and month view. This helps add context when switching to month and year view, and helps work around the fact that the aria-live announcement will not read out if the same instructions are simply re-populated.
  • Provide instructions after selecting a first date for range selection.

Testing

  • JAWS and VoiceOver: ensure announcements described above are properly done
  • VoiceOver + Chrome has a known issue where it will read polite announcements twice

@jacobdevera jacobdevera requested review from Mike-Diaz, meganaconley and a team August 13, 2020 20:04
@jacobdevera jacobdevera self-assigned this Aug 13, 2020
@netlify
Copy link

netlify bot commented Aug 13, 2020

Deploy preview for fundamental-react ready!

Built with commit 4a895e5

https://deploy-preview-1166--fundamental-react.netlify.app

@@ -166,6 +167,7 @@ class Calendar extends Component {

this.setState({
currentDateDisplayed: newDate,
screenReaderText: this.props.localizedText.dayInstructions,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this be monthInstructions and the one below be yearInstructions?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is upon selection, so this is when it switches back to the day view.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah ok I see it now.

Copy link
Contributor

@meganaconley meganaconley left a comment

Choose a reason for hiding this comment

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

QA'd, announcements are correct (with already noted Chrome bug)

@jacobdevera jacobdevera merged commit 384c9cb into master Aug 13, 2020
@jacobdevera jacobdevera deleted the fix/screen-reader branch August 13, 2020 22:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Accessiblity DatePicker
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants