Carbon: ComboBox component DAP issue "Id references used in WAI-ARIA properties must be valid"

Created on 30 Jul 2020 · 3Comments · Source: carbon-design-system/carbon

Versions of Carbon:
"carbon-components": "10.11.1",
"carbon-components-react": "7.11.1"

Detailed description

When using the ComboBox Component within a Table, the following DAP violation occurs when I run the scan "Id references used in WAI-ARIA properties must be valid"

Steps to reproduce the issue

Example: https://codesandbox.io/s/optimistic-cookies-2gv9y?file=/src/index.js

Run DAP in the above example

a11y ♿

Source

Kandianne

Most helpful comment

Hey there @Kandianne! 👋

I believe the challenge here is coming from the component not being supplied titleText. As a result, the label for the combobox isn't being rendered which is what that warning refers to.

@dakahn for these sorts of inline situations for dropdowns, what is the preferred path forward? Do they always need a visible label or is this something we can configure on the downshift end?

joshblack on 20 Aug 2020

👍2

All 3 comments

Hey there @Kandianne! 👋

I believe the challenge here is coming from the component not being supplied titleText. As a result, the label for the combobox isn't being rendered which is what that warning refers to.

@dakahn for these sorts of inline situations for dropdowns, what is the preferred path forward? Do they always need a visible label or is this something we can configure on the downshift end?

joshblack on 20 Aug 2020

👍2

WCAG Success Criterion 3.3.2 requires that form inputs have accessible labeling for both sighted users _and_ users of assistive technologies. For a deeper dive see the section Intent in this Labeling and Instructions guide,