Critical accessibility issues: aria roles and aria-label

[geoffrich]

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.

[gwyneplaine]

thanks for this @geoffrey1218, we'll have a closer look at these to harden accessibility in selects.
If you have the time and thoughts on how to do so, PRs are warmly welcome.

[gwyneplaine]

@sarahbethfederman if you could have a look at this issue, that would be awesome

[sarahbethfederman]

Hi! I'm not able to reproduce the first issue. May be that it was fixed in react-autosize-input. When providing an aria-label prop to the Select, it seems to be applied to the input. Here's a sandbox demo-ing this with a label value of "this is a label!!!" https://ryw61w7rnn.codesandbox.io/
Running axe on this sandbox produces no valid issues.

Looking into second issue now :)

[sarahbethfederman]

I think this issue can be closed

[sarahbethfederman]

(someone yell at me if I'm not supposed to close issues)

[bmsuseluda]

doesn't work for me if isSearchable is false. Can you check the reason behind this?

[sarahbethfederman]

@bmsuseluda can you be a bit more specific about what part isn't working for you? Happy to look into this.

[bmsuseluda]

Sorry for my short message.
I'm using the following code:
<ReactSelect className={styles.dropdown} options={options} value={value} defaultValue={defaultValue} isLoading={isLoading} isDisabled={isDisabled} onChange={handleOnChange} placeholder={placeholder} components={{ DropdownIndicator, Menu }} isSearchable={false} ariaLabel={label} />
My problem is that the aria-label will not be set on the input element if isSearchable is false.

[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.

[ZLJasonG]

Can confirm this is still broken in 3.0.4

[ZLJasonG]

Looks like the issue is in Select.js renderInput, if !isSearchable it renders a DummyInput without applying the aria attributes that it does to the normal Input it renders otherwise.

[nice-rain]

@ZLJasonG I am having this exact same issue too. If when isSearchable is false, it will not pass through the aria label.