Repository navigation
Critical accessibility issues: aria roles and aria-label #3355
Description
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-labelas a prop to theSelectcomponent, it is not assigned as an attribute to the#react-select-2-inputHTML element. Adding this attribute satisfies the Axe tester. - Certain ARIA roles must be contained by particular parents. Each
.select__optionhasrole="option"; however, the parent div.select__menu-listdoes not haverole="listbox". Adding this attribute satisfies the Axe tester. Note that I had to use React Developer Tools to setmenuIsOpenon theStateManagerto see this violation.
Below are screenshots of the Axe test results.
Activity
gwyneplaine commentedon Jan 16, 2019
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 commentedon Feb 4, 2019
@sarahbethfederman if you could have a look at this issue, that would be awesome
sarahbethfederman commentedon Feb 4, 2019
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 commentedon Feb 25, 2019
I think this issue can be closed
sarahbethfederman commentedon Feb 25, 2019
(someone yell at me if I'm not supposed to close issues)
bmsuseluda commentedon Jun 7, 2019
doesn't work for me if isSearchable is false. Can you check the reason behind this?
sarahbethfederman commentedon Jun 8, 2019
@bmsuseluda can you be a bit more specific about what part isn't working for you? Happy to look into this.
bmsuseluda commentedon Jun 11, 2019
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 commentedon Jul 4, 2019
Issue should be reopened.
aria-labelisn't applied ifisSearchableis set tofalse.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-labeldoesn't work either.ZLJasonG commentedon Aug 22, 2019
Can confirm this is still broken in 3.0.4
ZLJasonG commentedon Aug 23, 2019
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 commentedon Aug 26, 2019
@ZLJasonG I am having this exact same issue too. If when
isSearchableis false, it will not pass through the aria label.lauracabre commentedon Jan 21, 2020
I am also having this issue. @sarahbethfederman could this issue be reopened?
8 remaining items
kschwarz1116 commentedon Jul 20, 2020
I'm still encountering this on 3.1.
isSearchabledoesn't appear to be the only cause, but I'm still investigating on that front.@bladey & @snyk-bot, it looks like the linked PR doesn't actually fix this, it was only referencing #3407 which was why this issue got closed and then re-opened before.
onebree commentedon Nov 11, 2020
Applying
aria-labelsimply to the<input />isn't enough. Just upgraded to v3, excited by thearia-labelinclusion. However, that's the only place it gets applied. There's no other aria properties to set for say, the X to remove a multi-select option.I am using React Testing Library, which locates elements like a user would (text, labels,
aria-labeloraria-role), and because this X is actually an SVG, I'm not sure how to immediately select it (without breaking RTL conventions)kylemh commentedon Nov 11, 2020
Your point is still valid, @onebree, but just in case this helps ya: https://github.com/romgain/react-select-event
onebree commentedon Nov 11, 2020
@kylemh Thanks! I'll definitely consider adding that to the project. In the meantime, I was able to call
containervia RTL, andquerySelectorfrom thereMethuselah96 commentedon Nov 14, 2020
I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.EDIT: 🎉 I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!
ebonow commentedon Jan 18, 2021
Greetings,
This issue was reopened due to the use-case of the aria-label not being applied to the "DummyInput" which impairs accessibility to the Select when
isSearchable = false.I can confirm that this behavior has been addressed here: #3090
demo: codesandbox
Since the described behavior which caused this issue to be reopened has been resolved, I will be closing this issue again with the understanding that this will give more visibility to remaining accessibility issues.
marisev commentedon Apr 27, 2021
Hi @geoffrich ! In your initial question you referenced react-select v2 code-sandbox, and I see that all options in this example have
role="option". Any chance you could share what was the trick to get therole="option"applied in the example?The only way I see from the docs is by customizing Option, like this:
<components.Option role="option" ... />. But it doesn't really work. I am curious how it was implemented in your example. Thanks in advance!ebonow commentedon Apr 27, 2021
Greetings @marisev,
Attributes can be applied to a custom component by accessing the the
innerProps.I posted an implementation method here specifically for accessibility that might be of interest. #4322 (comment)
Please let me know if you have any questions.
marisev commentedon Apr 27, 2021
@ebonow Thank you Eric, I just tried using
innerPropsand it works! Really appreciate your help, you saved my day!PS: now I see information about
innerPropsin the docs, it just wasn't obvious how/when to use it. But it makes sense now.ebonow commentedon Apr 27, 2021
@marisev glad it's working for you Marina! No worries as the documentation is admittedly a bit dense and easy to miss things. It's in the process of being completely redesigned so it should be a bit easier to sift through everything in the near future.