AmpleOrganics / AmpleOrganics/Blaze.vue
AoInput, AoSelect, AoTextarea, AoFileUpload: use aria-label when input label is hidden
- Dominant language
- Vue
- Stars
- 6
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
# Issue summary
Currently you must provide labels for inputs, but have the ability to hide them. This was for accessibility reasons but it doesn't really actually get it right. display: none also hides text from screen readers. The correct way is to use aria-label, per https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html
# Solution
For all these input components, put something that does this inside the input/select/textarea/whatever tag
```
If showLabel = false
aria-label="{{ label }}"
```
We could also just not render the `` element, and/or make this non mandatory. Won't really make a difference, so probably just preference.
Contributor guide
Assessment
This issue has not been assessed yet.