Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(notification-system): add screen reader announcer #745

Conversation

gabrielchl
Copy link
Collaborator

@gabrielchl gabrielchl commented Dec 27, 2024

IMPORTANT

Currently, this project is closed to any external contributions. Any pull request made against this project from external sources will likely be closed. If you would like to make changes to this project, please fork this project.

Guide

This "Help" section can be deleted before submitting this pull request.

Update the name of this pull request to reflect the following shape:

{type}/{scope?}/{message}
  • type - A conventional commit type REQUIRED
  • scope - The kabab-case scope of the changes in this request
  • message - A short, kebab-case statement describing the changes REQUIRED

Provide a general summary of the scope of the changes in this pull request.

Description

  • add <ScreenReaderAnnouncer /> to <NotificationSystem/>
  • trigger announcement when one is provided through NotificationSystem.notify() / NotificationSystem.update()

Links

https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-598178

@gabrielchl gabrielchl marked this pull request as draft December 27, 2024 22:43
@gabrielchl gabrielchl marked this pull request as ready for review January 2, 2025 12:15
notificationSystemId?: string;
notificationSystemId: string;
/**
* Screen reader announcement to be made
Copy link
Collaborator

Choose a reason for hiding this comment

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

Add "no announcement is made if left blank"

@@ -20,7 +20,11 @@ type CustomOptions = {
*
* Can be used to trigger multiple notifications at different positions on the screen at the same time
Copy link
Collaborator

Choose a reason for hiding this comment

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

Add "also used to find which ScreenReader identity to send the SR Announcement to, in case screenReaderAnnouncement is defined"

Copy link
Collaborator Author

@gabrielchl gabrielchl Jan 2, 2025

Choose a reason for hiding this comment

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

i'm not sure this is needed, users of this component don't need to know the inner workings of the SR part

aria-label={ariaLabel}
>
<ToastContainer
{...commonProps}
Copy link
Collaborator

Choose a reason for hiding this comment

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

I see this react-toastify ToastContainer is giving the role="alert" to that wrapper (with empty "" aria-label !). Role="alert" could interfere with our new SRAnnouncement. So let's pass role: "generic" to commonProps so that the DOM gets no role="alert" wrapper.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

(not doing, as discussed)

Copy link
Collaborator

@nataliadelmar nataliadelmar Jan 2, 2025

Choose a reason for hiding this comment

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

Oki, we are doing this later so that non IMC notifications are still announced with role="alert"

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

yup, or maybe it won't be needed when you do your PR?

aria-label={ariaLabel}
>
<ToastContainer
{...commonProps}
Copy link
Collaborator

@nataliadelmar nataliadelmar Jan 2, 2025

Choose a reason for hiding this comment

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

Oki, we are doing this later so that non IMC notifications are still announced with role="alert"

@gabrielchl gabrielchl merged commit dc0be1a into master Jan 2, 2025
5 checks passed
Copy link

github-actions bot commented Jan 2, 2025

🎉 This PR is included in version 26.192.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants