[a11y]: Dropdown aria-label prop isn't applied to the correct element

[RachelGHogan]

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:

1. Visit the Dropdown Storybook
2. Remove the default title in Storybook
3. Scan using the accessibility scanner

To Reproduce aria-label/aria-labelledby applied to the div:

1. Visit the Dropdown Storybook
2. Add a value to the aria-label field (this should already be set up if using the link above)
3. Scan using the accessibility scanner

Suggested Severity

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Thanks for opening this! The issue relates to the downshift functionality specifically called out here:

aria-label: By default the toggle element will add an aria-labelledby that refers to the rendered with getLabelProps. However, if you provide aria-label to give a more specific label that describes the options available, then aria-labelledby will not be provided and screen readers can use your aria-label instead

I think this results in just two changes that need to be made.

• aria-label on the Listbox is a very old change and should be removed.
• The existing aria-label prop should instead be passed into getToggleButtonProps() so it works properly as above