Skip to content

(Accessibility) NVDA/JAWS support for EuiGlobalToastList#2055

Merged
PhilippBaranovskiy merged 6 commits intoelastic:masterfrom
PhilippBaranovskiy:1947_s
Jun 20, 2019
Merged

(Accessibility) NVDA/JAWS support for EuiGlobalToastList#2055
PhilippBaranovskiy merged 6 commits intoelastic:masterfrom
PhilippBaranovskiy:1947_s

Conversation

@PhilippBaranovskiy
Copy link
Contributor

@PhilippBaranovskiy PhilippBaranovskiy commented Jun 18, 2019

Closes #1947

Summary

⚠️ Before

Every toast has an aria-live attribute, there is no live region at all.

It does work: VoiceOver
It doesn't work: NVDA, JAWS.

✅ Now

A live region role="region" initializes at the component mounting,
the globalToastList is an aria-live region itself now.
Thus the Screen Reader understands where it should wait for updates.

Have a look at #1947 issue's description, there are a couple of links to standard explanations.

It does work: VoiceOver, NVDA, JAWS
It doesn't work: n/a

Expected behaviour

Once a toast notification is rendered, it is getting be announced.
At the moment of the next toast coming, Screen Reader may stop saying and start announcing the coming one.
Some screen readers may finish first announcing the previous notification and after that start another one.

Checking against ScreenReaders

✅ VoiceOver + Safari
✅ NVDA + Firefox
✅ NVDA + IE11
✅ Narrator + Edge
✅ NVDA + Chrome

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

I am not well versed in aria-live regions, but it looks like you tested in a lot of browsers and assistant tech so I'll trust your implementation.

@PhilippBaranovskiy
Copy link
Contributor Author

Double checked with @maryia-lapata that VoiceOver works as before this PR.

Copy link
Contributor

@maryia-lapata maryia-lapata left a comment

Choose a reason for hiding this comment

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

LGTM, tested on VoiceOver, Mac, it works as expected.

@bhavyarm
Copy link
Contributor

I got a quick question. Is the title of the toast getting announced for you @maryia-lapata in voice-over? All I get is the content of the toast. In this case here: the voice over announces thanks for your patience and doesn't announce Download complete
Screen Shot 2019-06-20 at 8 50 11 AM

@maryia-lapata
Copy link
Contributor

@bhavyarm I've just checked, the title of the toast is getting announced:

Screen Shot 2019-06-20 at 4 17 41 PM

Screen Shot 2019-06-20 at 4 15 52 PM

Screen Shot 2019-06-20 at 4 16 07 PM

@bhavyarm
Copy link
Contributor

@maryia-lapata great. I thought it was some combination of voice-over, os x combination. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Accessibility] NVDA does announce toasts, => toast global list is not an aria live region

4 participants