search

alsoscotland / react-super-select

MIT License
95 stars 33 forks source link

Custom props / aria-label #156

Closed darekkay closed 6 years ago

darekkay commented 6 years ago

Hi, thanks for this component and your very fast response times on GitHub :smile:

I have two somehow related WCAG issues about labeling the select component.

  1. I need to add aria-describedby prop to announce my component's hint in the screen reader. However, there is no way to pass custom input props into your component.

  2. You set aria-label equal to the component's placeholder. This is only necessary, if the input has no label (and using label over aria-label is strongly encouraged). This applies only to the "searchable select" (as the regular one is just a div), but in this case we still need a way to override the aria-label value. As we provide both a placeholder and a label, the label has no effect, as aria-label takes precedence. This has another negative side effect: the selected value is never announced in the screen reader.

I'd like to know what you think about those issues. I would contribute a PR if you find this useful (tested with NVDA screen reader).

darekkay commented 6 years ago

I've created PR #157 and tested the component within our application. Using inputProps it is possible to pass aria-describedby and override aria-label. This makes extending the component really easy without any breaking changes.

alsoscotland commented 6 years ago

@darekkay Thanks for the nice comments.
Both of these issues seem like good things to address. Thanks for the work!