Implement Nuxt Announcer for accessibility announcements

[nicki182]

Terms

• I have searched open and closed feature requests
• I agree to follow activist's Code of Conduct

Description

The Nuxt Route Announcer has already been added to handle accessible route change announcements, ensuring that screen reader users are notified when navigating between pages.

However, there are additional scenarios in the application where important information should be announced to screen reader users, such as:

• Form success or error messages
• Dynamic UI updates (e.g., modals opening, lists updating)
• Notifications or alerts
• Any other async content changes that should be communicated for accessibility

Proposal

Adopt the Nuxt Announcer module to standardize and handle all other live region announcements throughout the application, outside of route changes.

Benefits

• Ensures a unified and accessible way to announce important UI changes across the app.
• Reduces the risk of missing a11y requirements for dynamic/async content.
• Improves the user experience for those relying on assistive technologies.

Acceptance Criteria

• Integrate the Nuxt Announcer module into the app.
• Refactor relevant components and flows to use the announcer for a11y live updates.
• Document usage so future contributors know how to make announcements.
• Confirm proper screen reader announcement behavior using assistive technologies or testing tools.

References

• Nuxt Announcer Module
• ARIA Live Regions Guide

Contribution

No response

[nicki182]

@OmkarSathish wanna take check this one?

[OmkarSathish]

Done! Will take it up over this weekend

[nicki182]

@OmkarSathish great to see you are interested in this one. You can do this one in multiple PRs if you want for different aspects of the app to improve accessibility.

[andrewtavis]

@nicki182, great call to suggest this one to @OmkarSathish! 😊