Skip to content

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

@PhilippBaranovskiy

Description

@PhilippBaranovskiy

Hello

Now the global toast list is just a div, while it should be an aria-live region.
Since it is, the screen reader will detect live region one the component is loaded, and then detect any changes inside the live region.

MDN provides explanation:

Simply including an aria-live attribute or a specialized live region role (such as role="alert") in the initial markup as it's loaded will have no effect.

It's true, the current implementation doesn't work with NVDA, for instance.

Also:

Dynamically adding an element with an aria-live attribute or specialized role to the document also won't result in any announcement by assistive technologies

They suggest that it should be implemented like Always make sure that the live region is present in the document first, and only then dynamically add/change any content.

I'm making a PR that aims to add that attribute to the component.
I've tested that with NVDA, please subscribe and have a look by the link I'm providing a little bit later.

Relative issues and PR:

  1. ✅ Toast Messages Should Be Read by the Screen Reader on Display Toast Messages Should Be Read by the Screen Reader on Display #715
  2. ✅ Accessibility/toasts Accessibility/toasts #780
  3. ✅ Add aria-live="assertive" to EuiToasts Add aria-live="assertive" to EuiToasts #583
  4. ⚠️ Screenreader doesn't announce that user is in a new space Screenreader doesn't announce that user is in a new space kibana#23885

cc @cchaos @snide

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions