Critical accessibility issues: aria roles and aria-label

When running the Axe accessibility tester against the react-select v2 code-sandbox, two critical issues are identified:

• Form elements must have labels. While you can pass aria-label as a prop to the Select component, it is not assigned as an attribute to the #react-select-2-input HTML element. Adding this attribute satisfies the Axe tester.
• Certain ARIA roles must be contained by particular parents. Each .select__option has role="option"; however, the parent div .select__menu-list does not have role="listbox". Adding this attribute satisfies the Axe tester. Note that I had to use React Developer Tools to set menuIsOpen on the StateManager to see this violation.

Below are screenshots of the Axe test results.

[mkandler]

For anyone else who stumbles upon this thread and is looking for a temporary fix… You can add an accessible label to the input by wrapping the component in a <label> element. This will work with screen readers and VoiceOver.

<label>
  Name of label
  <Select ... />
</label>

[IanLunn]

Issue should be reopened. aria-label isn’t applied if isSearchable is set to false.

The input reported by Axe is <input id="react-select-2-input" readonly="" tabindex="0" class="css-gj7qu5-dummyInput" value="">

@bmsuseluda You should actually be using hyphen cased syntax for aria attributes but that is not the issue here – aria-label doesn’t work either.