flow: Warn users about incorrect usage of Label
When I incorrectly use Label in V10, I want to get a warning message.
In Vaadin 8 and earlier Label was used for text content. In V10, it maps to <label>. This will likely lead to a lot of incorrect markup that’s possibly confusing for screen readers.
Suggestion: Log a warning in the console if a Label is used without for or a child element.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 8
- Comments: 16 (12 by maintainers)
Commits related to this issue
- Do not use Label when not labeling input fields Label should only be used when labeling input fields. See https://github.com/vaadin/flow/issues/3532 https://developer.mozilla.org/en-US/docs/Web/HT... — committed to Wnt/flow-and-components-documentation by Wnt 6 years ago
- Do not use Label when not labeling input fields (#65) * Do not use Label when not labeling input fields Label should only be used when labeling input fields. See https://github.com/vaadin/flow/iss... — committed to vaadin/flow-and-components-documentation by Wnt 6 years ago
- feat: deprecate Label and add NativeLabel as replacement (#16708) Adds NativeLabel as direct replacement for the HTML-based Label component / element. Fixes #4384 Fixes #3532 — committed to vaadin/flow by knoobie a year ago
It’s not enough to only add a warning since there are also legitimate use cases for the functionality. One possibility would be to deprecate
Labeland addNativeLabelas non-deprecated.Created a PR to push the discussion forward. Deprecating and later removal of Label could also help the modernization team and the design system team.
The design system could add their own “Label” component that has way more and better feature than the regular label and could be used more widely and replace most of the direct need of creating spans or divs to show text (looking a Rolfs idea about a styled text component)
In addition, the modernization team could more easily migrate from the old to the new label / swing users and old Vaadin users already know this term.
For developers this would (hopefully) get them a new and better label component in the long run and should drastically reduce accessibility problems people have created over the last years when building applications with this component in a wrong way. (Because of a history with V8, a swing history or just because they didn’t know better and used it because they can)
Creating html labels should not be needed in normal use cases and the migration path to the new native label is literally a simple replacement that can be done by a single IDE replacement call.
There is one and I’ll link it here as soon as I find it amongst the hundreds of other issues containing the term “text”.