Skip to content

Accessibility: Support global announcements

Administrator requested to merge tr/aria-live-announcer into main

Created by: umpox

Description

Closes https://github.com/sourcegraph/sourcegraph/issues/34504 Closes https://github.com/sourcegraph/sourcegraph/issues/32376

We're predicting that we'll encounter a lot of accessibility issues due to important messages not being read out by screen readers, this PR aims to fix that for most cases, and make it simple to fix for other cases.

This PR does two things:

  • Adds role="alert" to <Alert />
    • Ensures any visual alerts are announced to screen readers
  • Adds screenReaderAnnounce to Wildcard.
    • Ensures we can still programmatically call out important messages to screen reader users. This helps in areas where we don't have a visual representation of a "success" or "error" state, and instead rely on that information being inferred somehow by the user.

To show how these are effective, I tested in two journeys that our team owns:

  • Settings user profile page: Works well because uses <Alert /> for success/error states. Message automatically read out to screen readers.
  • Settings email address page. We use <Alert /> for errors but we don't have anything for success states - we expect users to visually rely on seeing the email address list update on addition/deleting. Here is an example where we should use screenReaderAnnounce. Works well after the change.

React-Aria

I've seen this solution used a few times on different applications and it seems like a good one. The live announcer package is quite small, and I think it's OK to include given the benefits this will have in our application. React Aria is backed by Adobe, they have docs here.

Test plan

Tested whilst using a screen reader in local development

App preview:

Check out the client app preview documentation to learn more.

Merge request reports