[Bug Report][3.3.6] vuetify 3.x renders html input fields which do not meet accessibility requirements

[lukycody]

Environment

Vuetify Version: 3.3.6
Last working version: 2.6.14
Vue Version: 3.3.4
Browsers: Chrome 114.0.0.0
OS: Windows 10

Steps to reproduce

Hello everyone! In my team we are currently developing an application with vue3/vuetify 3.x and accessibility is an important topic.
While checking the site with lighthouse, we noticed the following accessibility issue with the standard v-text-field in Vuetify 3.3.6

tl;dr:

The input fields are missing a valid associated label. The normally valid label attribute seems to be overwritten by the aria-describedBy attribute; which links to an ID of an element, that can't be found before a form-validation error message is triggered and the element is filled with content.
This leads to no readability for screenreaders and the lighthouse error.

Detailed Description:

Issue:
The standard usage of "v-text-field"
<v-text-field label="Label"></v-text-field>
renders an HTML output which does not meet accessibility requirements, e.g.:

<div class="v-field__field" data-no-activator="">
  <label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-462" style="">Label</label>
  <label class="v-label v-field-label" for="input-462" style="">Label</label>
  <div class="v-field__input" data-no-activator="">
  <input size="1" type="text" id="input-462" aria-describedby="input-462-messages"></div>
</div>

This can be seen/replicated with the devtools on the vuetify site for the textfields with the validation example (https://vuetifyjs.com/en/components/text-fields/#validation-26-rules)

Findings:

1. Screenreader (NVDA) does not read the (correctly) associated LABEL to INPUT pair (here: input-462)
2. A quick Google Lighthouse accessibity check confirms that INPUT has no accessible name/label.

Reason (assumably):
The existance of an unassociated (not recognized) aria-describedby on INPUT at time of render:
aria-describedby="input-462-messages"

This leads to:

1. The INPUT beeing associated with a non-existent reference
   (no id="input-462-messages" found in the DOM before an error occurs)
   So there seems to be an element in the dom with the id, that’s linked to the input via aria-describedBy. The problem might be that the element is empty and thus not recognized by the screenreader/lighthouse.
   Only when an error occurs, the DOM element with id="input-462-messages" appears is filled with the content and is then correctly associated and announced by the screenreader.

2. aria-describedBy overwriting / disconnecting the otherwise correct LABEL - INPUT pairing
   thus leaving the screenreader with nothing to announce and showing the mentioned Lighthouse error.

Question:
Is this issue known already? I couldn't find an issue about it. Will this be changed/fixed in a future version?

(Btw.: In Vuetify 2.x the whole issue of error-messaging of required fields was solved by dynamically adding a DIV like this:
<div class="v-messages theme--light error--text" role="alert"> ... </div>)

Expected Behavior

The lighthouse accessibility check should not show the error message, that there were no labels linked.
Screenreaders should recognize the input field's labels and read them for the user.

Actual Behavior

The input fields render elements in the DOM for label and the to-be-filled validation error-message. However, the label gets overwritten (in priority) by the aria-describedBy attribute, which is not recognized by lighthouse accessibility check and screenreaders - leading to the lighthouse error and no spoken labels for the input field.

Reproduction Link

https://vuetifyjs.com/en/components/text-fields/#validation-26-rules
https://codepen.io/lukycody/pen/zYMwwmP

Other comments

We've put this in the discord help thread before with no comments yet, but we felt this could need some further investigation with it's own github issue.
This is an important step for us to successfully use vuetify in a project that puts emphasis on accessibility. Unfortunately, this effects a wide area of the application as it counts for every part where we use form elements like input fields. We can't justify continue using vuetify, if this issue persists and hope for your help to fix this centrally in the framework. Thank you!

[chrisnruud]

This might be a duplicate of #17012 but with more description

[lukycody]

@KaelWD
As this was closed and already linked at the other one with minimal description (#17012):

I would like to add, that this issue is unrelated to the "hide-details" prop, that was described as reproduction step. It occurs without it aswell. So you might want to reopen this one or consider it at #17012. I will add it there as a comment aswell for transparency.