Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.78.0

React version

18.3.1

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

MacOS Voiceover

Description

In IBM OpenPages, we use Carbon's ExpandableSearch element. The search icon, which serves as a button to expand the search bar, must have an appropriate label attribute to pass the accessibility checker, which it does. In fact, there are two attributes that, on their own, would cause the element to pass the accessibility checker. There is an aria-label="button" attribute, as well as an aria-labelledby="search-input-:rar:-search", which appropriately points to a label that is fitting for this button. Therefore, we are able to pass the accessibility checker with the ExpandableSearch element.

However, according to this documentation, you are not to use both aria-label and aria-labelledby on the same element, because aria-labelledby will take precedence over aria-label if both are applied.

aria-label and aria-labelledby are not fields we can manually set, according to Carbon's documentation, so the attributes aria-label and aria-labelledby must be automatically set by Carbon.

aria-labelledby is the more appropriate attribute to include, because it allows us to point to a label that's more fitting and descriptive, whereas an aria-label of "button" isn't informative.

Lastly, though the Mozilla documentation, mentions that aria-labelledby will take precedence, using MacOS Voiceover when the focus is on the ExpandableSearch yields a redundant and possibly confusing explanation:

"Search for field name, collapsed, button, Search for field name, search. You are currently on a button. To click this button, press Control-Option-Space."

Again, I think removing the default attribute aria-label="button" would solve this.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-amzubdxd?file=src%2FApp.jsx

Steps to reproduce

It should already be reproduced. Note that the aria-label and aria-labelledby attributes are provided even though I don't set them in the code.

Suggested Severity

None

Code of Conduct

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