Skip to content

Announce newest notification using live region#19979

Merged
nielslyngsoe merged 7 commits intomainfrom
v16/bugfix/aria-role-for-alerts
Oct 8, 2025
Merged

Announce newest notification using live region#19979
nielslyngsoe merged 7 commits intomainfrom
v16/bugfix/aria-role-for-alerts

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 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:
-Choose assertive vs. polite based on notification.color.
-Move the screen-reader announcement logic for toasts into the UUI library.

@engijlr engijlr marked this pull request as ready for review September 21, 2025 11:27
@engijlr engijlr changed the title Added screen readers notification support Announce newest notification using live region Sep 22, 2025
Copy link
Member

@nielslyngsoe nielslyngsoe left a comment

Choose a reason for hiding this comment

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

Looks good

@nielslyngsoe nielslyngsoe enabled auto-merge (squash) October 8, 2025 11:48
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.

2 participants