You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We had an a11y issue opened:
“Interactive component with ARIA role 'alertdialog' does not have a programmatically associated name”
This boiled down to the fact that we have an ActionableNotification with no title (just a subtitle). The ActionableNotification code ties the aria-labelledby to the title, so if you don't have a title, you end up with this issue. code link
It would be nice to have a bit more flexibility, so you could have a notification without title and not have an accessibility violation. Basically, fall back to the subtitle if there's no title. We'd need to add an id to the subtitle div and point to that in this case. (there's other options too of course, but that seems logical. Could also have a hideTitle or a separate prop for another aria-label)
We went ahead and added a title to our ActionableNotification for now to resolve the issue, but we shouldn't have to do that.
Package
@carbon/react
Browser
Chrome
Operating System
MacOS
Package version
1.37.0
React version
17
Automated testing tool and ruleset
IBM accessibility checker
Assistive technology
No response
Description
We had an a11y issue opened:
“Interactive component with ARIA role 'alertdialog' does not have a programmatically associated name”
This boiled down to the fact that we have an ActionableNotification with no
title
(just asubtitle
). The ActionableNotification code ties the aria-labelledby to thetitle
, so if you don't have a title, you end up with this issue.code link
It would be nice to have a bit more flexibility, so you could have a notification without title and not have an accessibility violation. Basically, fall back to the subtitle if there's no title. We'd need to add an
id
to the subtitle div and point to that in this case. (there's other options too of course, but that seems logical. Could also have ahideTitle
or a separate prop for another aria-label)We went ahead and added a title to our ActionableNotification for now to resolve the issue, but we shouldn't have to do that.
WCAG 2.1 Violation
No response
Reproduction/example
see description
Steps to reproduce
see description
Code of Conduct
The text was updated successfully, but these errors were encountered: