Dropdown menu a11y checker failures

Using Dropdown from carbon-components-react has errors in the IBM Equal Access Accessibility Checker tool

Browser Chrome

Automated testing tool and ruleset latest

Detailed description

What version of the Carbon Design System are you using? “carbon-components”: “10.15.0”, “carbon-components-react”: “7.15.0”,

What WCAG 2.1 checkpoint does the issue violate? The ‘id’ “downshift-0-label” specified for the WAI-ARIA property ‘aria-labelledby’ value is not valid Violation: The descendent <div> element with “option” role has no focusable child element Needs review: The input element does not have an associated visible label

Please create a reduced test case in CodeSandbox

Easily recreate with https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox?file=/src/index.js

with this code: `import React from ‘react’; import { render } from ‘react-dom’; import { Button, Dropdown } from ‘carbon-components-react’;

var items = [{ id: ‘option-0’, text: ‘Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.’ }, { id: ‘option-1’, text: ‘Option 1’ }, { id: ‘option-2’, text: ‘Option 2’ }, { id: ‘option-3’, text: ‘Option 3’ }, { id: ‘option-4’, text: ‘Option 4’ }, { id: ‘option-5’, text: ‘Option 5’ }];

var itemToString = function itemToString(item) { return item ? item.text : ‘’; }

const App = () => (

<div> <Dropdown label='Actions' itemToString={itemToString} items={items}/> </div> );

render(<App />, document.getElementById(‘root’)); `

Additional information

• Screenshots or code

[tw15egan]

Would we be able to add a hideLabel prop that adds the bx--visually-hidden class to the label, but would still keep it there for assisted technology users?

[dakahn]

@k8vance88 That screen shot is actually a great example of what the WCAG guidance is trying to have developers maintained. In that second example, once the user makes a selection – the form element no longer has a visual label. It’s replaced by the selection. User’s with cognitive disabilities – or who are returning to a form after some time away could be stuck inferring the form element’s role from the options.

I’m going to close this issue as resolved. Since the first screen shot follows our design guidance.