[Bug Report][3.7.1] ADA Compliance Issue: Form input controls embed label in HTML output when no label attribute is set. #20427
Closed
Description
Environment
Vuetify Version: 3.7.1
Vue Version: 3.5.1
Browsers: Chrome 128.0.0.0
OS: Windows 10
Steps to reproduce
This is very simple to reproduce.
- Add a v-text-field to page (or any input control).
- Don't pass in a label in the label attribute.
- Inspect the HTML element on the page and notice the following code is embedded in page:
- This is a problem, it violates ADA compliance testing and throws errors using validation tools such as WAVE Evaluation Tool (Chrome plugin).
- There are scenarios where we need to implement a separate label outside of the embedded text field. We should not have to write separate code to remove these embedded HTML elements from vuetify components.
If I am missing something or there is some way of turning off this element from displaying in the page please let me know. I reviewed the documentation and did not see anything.
Expected Behavior
If no label attribute is passed in an empty label should not appear on the page OR we need a way to remove this from the DOM.
Actual Behavior
No label attribute is set and component embeds label element in page causing ADA compliance issues for users.