[Bug Report][2.6.2] VSelect validation errors

Environment

Vuetify Version: 2.6.2 Vue Version: 2.6.12 Browsers: Chrome 97.0.4692.71 OS: Mac OS 10.15.7

Steps to reproduce

1. Get HTML output for v-select component
2. Run it through W3C HTML validator at https://validator.w3.org/
3. See errors show below

Expected Behavior

HTML markup should validate

Actual Behavior

Three errors are returned:

• The element label must not appear as a descendant of an element with the attribute role=button.
• Attribute aria-readonly must not be specified on elements that have attribute readonly.
• The element input must not appear as a descendant of an element with the attribute role=button.

Reproduction Link

https://codepen.io/apfrod/pen/OJxdLEw

[agreedSkiing]

A stupid workaround to fix the html validation is to use mounted BUT this is not good. mounted() { this.$el.querySelectorAll(".v-input__slot")?.removeAttribute("role") }

[apfrod]

I’ve ended up with this in my App.vue to swap role=button for role=combobox and remove redundant aria-readonly

mounted() {
    const removeAriaReadonly = function(input){
      const ariareadonly = input.attributes.getNamedItem("aria-readonly")
      const readonly = input.attributes.getNamedItem("readonly")
      if (ariareadonly && readonly){
        // remove redundant readonly property
        input.removeAttribute("aria-readonly")
      }
    }
    const swapRoles = function(el){
      const role = el.attributes.getNamedItem("role")
      if (role && role.value == 'button'){
        // use role 'combobox' instead of 'button'
        el.setAttribute("role", "combobox")
      }
    }
    // run on each future mutation
    const callback = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        const element = mutation.target
        const inputs = element.querySelectorAll("input")
        inputs.forEach(removeAriaReadonly)
        const inputslots = element.querySelectorAll(".v-select .v-input__slot")
        inputslots.forEach(swapRoles)
      })
    })
    const content = this.$root.$el.querySelector(".v-main")
    callback.observe(content, {
      subtree: true,
      attributes: true,
    })
    // run now on elements already mutated at mount time
    this.$el.querySelectorAll("input").forEach(removeAriaReadonly)
    this.$el.querySelectorAll(".v-select .v-input__slot").forEach(swapRoles)
}