[a11y]: Dropdown aria-label
prop isn't applied to the correct element
#17558
Labels
component: dropdown
package: react
carbon-components-react
role: dev 🤖
severity: 2
https://ibm.biz/carbon-severity
type: a11y ♿
type: bug 🐛
Package
@carbon/react
Browser
No response
Operating System
MacOS
Package version
1.66.0
React version
No response
Automated testing tool and ruleset
IBM Accessibility Scanner Chrome Extension v3.1.75.9999
Assistive technology
No response
Description
When titleText isn't populated/isn't passed as an argument, the dropdown button still has an aria-labelledby field that points to an id not assigned to anything, which causes an accessibility violation.
However, if you try to assign aria-label or aria-labelledby yourself, it is applied to the div wrapping the dropdown button instead of the button itself, which causes an accessibility violation.
WCAG 2.1 Violation
ARIA specification - States and Properties, ACT rules - ARIA state or property is permitted, ACT rule - Element marked as decorative is not exposed, SC 4.1.2 - Name, Role, Value
Reproduction/example
aria-label applied to div: https://stackblitz.com/edit/github-ba7pgw?file=src%2FApp.jsx aria-labelledby pointing to nothing: https://stackblitz.com/edit/github-ba7pgw-4pybwu?file=src%2FApp.jsx
Steps to reproduce
These issues can be observed in stackblitz. Visit the above links, open the preview window in a new tab, and scan using the accessibility scanner, or:
To Reproduce an aria-label with an ID Not Pointing to Anything:
To Reproduce aria-label/aria-labelledby applied to the div:
Suggested Severity
None
Code of Conduct
The text was updated successfully, but these errors were encountered: