Improve documentation, naming, and/or error messages around 'label' and 'isLabelVisible' prop
#66 opened on Jan 8, 2021
Repository metrics
- Stars
- (12 stars)
- PR merge metrics
- (PR metrics pending)
Description
In using this component, we've discovered that it's not super clear how label is expected to be used as a prop: it's marked as required and throws errors if not provided, but sometimes a consuming app won't want to display a text label above the select.
The reason we have it required is because, regardless of whether the label is displayed, some value should be provided to tell screen readers what the select is. So, if the label isn't needed visually, devs should set :isLabelVisible="false"
So, we need to document this better. My current idea is to add validation to the label property - rather than marking it as required, add a validation hook where, if it's not passed in, we can console.warn that the component won't be accessible to screen readers when a label is not provided. If you'd like it to not display visually, simply set isLabelVisible
There are probably other approaches we could take as well