AmpleOrganics / AmpleOrganics/Blaze.vue

AoInput, AoSelect, AoTextarea, AoFileUpload: use aria-label when input label is hidden

Open
#334 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.