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

Document has multiple elements referenced with ARIA with the same id attribute: notistack-snackbar #579

Open
ApostolosBenisis opened this issue Sep 6, 2023 · 0 comments

Comments

@ApostolosBenisis
Copy link

Expected Behavior

When showing multiple notifications, the DOM elements of each snackbar should have a unique id.

Additionally, the id of the <div> that contains the message should be set to the id returned by enqueueSnackbar().
Further more the the "aria-describeby" of the <div> that represents the mui content, and of the default action button should be set to that id.

Current Behavior

When multiple notifications are shown, the id of every <div> that contains a message is set to 'notistack-snackbar'
The "aria-describeby" is also set to 'notistack-snackbar'.
This breaks accessibility as the IDs that used in ARIA are not unique.
Additionally it is not possible to create a custom action and set the ARIA to something useful.

Steps to Reproduce

<SnackbarProvider>
  <App />
</SnackbarProvider>

enqueueSnackbar("Notifcation 1")
enqueueSnackbar("Notifcation 2")

Context

Accessibility WCAG 2.0 Level A compliance

Your Environment

Tech Version
Notistack v3.0.1
React
Browser
etc.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant