Remove the empty label for Screen reader when it's empty

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

https://vaadin.com/docs/latest/components

445 stars 83 forks source link

Remove the empty label for Screen reader when it's empty #6912

Open jcgueriaud1 opened 9 months ago

jcgueriaud1 commented 9 months ago

What is the problem?

For the vaadin-select, we have an empty label for screen reader with the slot sr-label. I don’t think it’s a big issue since it’s not linked to the input and it’s empty.

But the label is unnecessary and some accessibility checkers are complaining about empty <label>

Browsers

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Safari on iOS
[ ] Edge

Screen Readers

[ ] None
[ ] NVDA
[ ] JAWS
[ ] VoiceOver on MacOS
[ ] VoiceOver on iOS

web-padawan commented 9 months ago

The reason why <label> element is created even without property being set is that LabelController is used: https://github.com/vaadin/web-components/blob/25bb2617a12ecdfcacc188fe3d4c16c62a5f0033/packages/field-base/src/label-controller.js#L11-L14

See for example HelperController that is similar, but creates helper node lazily once helperText property is set:

https://github.com/vaadin/web-components/blob/25bb2617a12ecdfcacc188fe3d4c16c62a5f0033/packages/field-base/src/helper-controller.js#L11-L15