Skip to content

Conversation

engijlr
Copy link
Contributor

@engijlr engijlr commented Aug 24, 2025

Summary:
Add one always-present live region and, on each new notification, replace its text so screen readers announce it. I left the styles bare on purpose so it’s easier to test. I’ll tidy them up next.

Things I considered:

  • The alert doesn’t need focus, it announces automatically.
  • The message must be added dynamically, not only on initial page load.
  • The element with role="alert" must exist in the DOM first.
  • Don’t create a new role="alert" element that’s already filled with text; update an existing element’s text instead.

Changes:

  • Added #sr-live (role="alert") to the container.
  • On notifications update, announce the latest item.
  • Added _announce(text) to update the live region.
  • Added _getNotificationText(...) to read the message from the handler’s data.

How to test:
Enable a screen reader(Try Chrome and Safari; it works better in Safari, I don't know why.)
Trigger a toast (Perform any action that shows a notification).
Expected: VoiceOver announces the notification text once the toast appears.

Possible improvements:
-Hide the #sr-live region.
-Choose assertive vs. polite based on notification.color.

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.

1 participant