[a11y]: The 'id' "downshift-:r2:-label" specified for the ARIA property 'aria-labelledby' value is not valid

[Chinmaya-812]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

^1.40.0

React version

^18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker - Latest Deployment

Assistive technology

No response

Description

The 'id' "downshift-:r2:-label" specified for the ARIA property 'aria-labelledby' value is not valid

WCAG 2.1 Violation

No response

Reproduction/example

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

Steps to reproduce

For the Dropdown of the file i got this Violation
The 'id' "downshift-:r2:-label" specified for the ARIA property 'aria-labelledby' value is not valid.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

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

[philljenkins]

Is this Accessibility Checker rule correctly flagging this issue in Carbon? yes, I think so.

aria_id_unique: The ARIA property must reference a non-empty unique id of an existing element that is visible
Violation
The 'id' "{0}" specified for the ARIA property '{1}' value is not valid

References - consider adding these references to the rule Help above:

• ARIA - Supported States and Properties
  • which says: "It is the web author's responsibility to ensure that IDs are unique."
• HTML tutorial: id attribute
  • which says: "The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.)".

The Checker is flagging that the id downshift-:r2:-label is not "unique", although the value is "valid" in HTML5 because there are very few restrictions, such as the value cannot contain any spaces.

Looking at the stackblitz example code above:

1. I do not find that id downshift-:r2:-label anywhere
2. I do see one label id downshift-:r5:-label, but since there is only one "r5" label the Checker does not flag an issue when run against the stackblitz example code.

• Confirm that the real page flagging the issue doesn't have more than one "Dropdown label" with the same ID that is causing the issue from the rule aria_id_unique. It's OK (but not best practice) to have the same text label, but it's a violation to have duplicate (the same) IDs on a page.

[philljenkins]

A recommended "to do" before closing this issue:

• Open a Carbon issue to update the accessibility Development considerations for the Dropdown component.

1. Add a bullet to "Ensure the ID of the referenced label, such as "Access role" in the code example, is unique when there are multiple dropdown components on a page.

Development considerations

Keep these considerations in mind if you are modifying Carbon or creating a custom component.

• The dropdown and multiselect variant ...
• [new bullet] Ensure the ID of the referenced label is unique when there are multiple dropdown components on a page.

[guidari]

@Chinmaya-812 I don't the issue in the lastest version (1.69.0). Can you confirm that?

[guidari]

I'm going to close the issue. If you can replicate the issue let me know, so I can re-open it