React-select: Method for adding aria-label, aria-labelledby, aria-describedby unclear

[craigmcginley]

I believe it is unclear in the documentation that attributes like 'aria-label' should be passed in as props directly to the react-select component. My thinking was to add it as a property in the inputProps argument, which actually gets overwritten by react-select if you do so.

I recommend either updating the docs to include aria-* attributes that can be passed as props, or adjusting the input renderer implementation. Inputs must have a form of aria labeling (aria-label, aria-labelledby, etc) to be read by screen readers, so it may make sense to make this required. Currently, it seems in all cases except when 'aria-label' is passed into react-select explicitly, there is no screen reader label (unless you have an explicit element, which is not always desirable for the design).

I can perhaps work on a PR for this issue but would like to discuss the preferred method.

[craigmcginley]

Also, looks like this behavior changes based on if the component is searchable or not. If it is searchable then you must pass 'aria-label' directly into the component as a prop. If it is not searchable, then you must do the opposite and pass 'aria-label' as a property in the inputProp object.

[tpkemme]

@craigmcginley I wouldn't not have figured this out without your comment. I agree, there should only be one way to add aria-labels. It should not be dependent on the component being searchable.

There is also not a single example showing how to use inputProps. For anyone finding this later the correct usage is as follows:

inputProps={{'data-foo': 'bar'}}

[asantos00]

Hi Guys,

I'm having the exact same problem, I want to pass a aria-label to the input and can not find how to do it. It is listed in the docs that is should be only sending aria-label to the Select, but doing it does nothing.

Did you guys found out how it works?

[craigmcginley]

@asantos00 I haven't touched this in a while. Try both of these, one of them should work.

<ReactSelect
inputProps={{ 'aria-label': 'whatever you want here' }} />

<ReactSelect
ariaLabel={'whatever you want here'} />

[bmsuseluda]

@asantos00 I haven't touched this in a while. Try both of these, one of them should work.

<ReactSelect
inputProps={{ 'aria-label': 'whatever you want here' }} />

<ReactSelect
ariaLabel={'whatever you want here'} />

both options do not work for me :(

[RobertAron]

Finally found it. It's actually pretty simple but I had to look through the source code to find the answer

https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js#L1420

<ReactSelect
    ...
    aria-label="very useful label"/>

[bmsuseluda]

Thanks for the Response but it doesn't work in combination with "isSearchable={false}".

[dariusbiro]

Did anyone find any solution to this? I can't make it work....

[vinibol12]

Finally found it. It's actually pretty simple but I had to look through the source code to find the answer

https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js#L1420

<ReactSelect
    ...
    aria-label="very useful label"/>

Turns out this works indeed. First thing that came to my mind was to use the camelCase ariaLabel as it's the default for react props. Should it be changed to it to make it more intuitive?

[mmborado]

@bmsuseluda did you figure out a workaround when trying to get a label when isSearchable is false?

[Methuselah96]

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: :tada: 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]

First thing that came to my mind was to use the camelCase ariaLabel as it's the default for react props. Should it be changed to it to make it more intuitive?

@vinibol12 , according to the React documentation, aria attributes should remain hyphenated

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:

[ebonow]

Greetings,

I will be closing this given that this appears to be an older issue and that react-select does accept aria-label and aria-labelledby as props as mentioned in the documentation.

Adding other aria tags has been discussed in other issues, and I will likely round these up into one issue to have better communication and resolution on next steps. That said, there is nothing preventing users from adding attributes on their own and passing them to custom components in the meanwhile.

const Option = props => { 
  const innerProps = { ...props.innerProps, role: 'option', 'aria-disabled': props.isDisabled };
  return <components.Option {...props} innerProps={innerProps} />
}

const MenuList = props => {
  const innerProps = { ...props.innerProps, id: props.selectProps.menuId, role: 'listbox', 'aria-expanded': true };
  return <components.MenuList {...props} innerProps={innerProps} />
}

const Input = props => {
    // aria-label and aria-labelledby are already spread by the existing props if provided
  const innerProps = { 
    ...props.innerProps, 
    role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
    'aria-owns': props.selectProps.menuId,
    'aria-autocomplete': 'list',
  };

  return <components.Input  {...props} innerProps={innerProps} />
}

const ariaSelect = props => <Select menuId="unique_menu_id" components={{ Option, MenuList, Input }} {...props} />