Skip to content

[Bug Report][3.7.1] ADA Compliance Issue: Form input controls embed label in HTML output when no label attribute is set. #20427

Closed
@jasonatvelocity

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.

  1. Add a v-text-field to page (or any input control).
  2. Don't pass in a label in the label attribute.
  3. Inspect the HTML element on the page and notice the following code is embedded in page:
  4. This is a problem, it violates ADA compliance testing and throws errors using validation tools such as WAVE Evaluation Tool (Chrome plugin).
  5. 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.

Reproduction Link

https://play.vuetifyjs.com/#...

Metadata

Assignees

Labels

C: VFieldT: bugFunctionality that does not work as intended/expecteda11yAccessibility issue

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions