fix(VTextArea/VSelect): Fix labelling of select components for screen readers (a11y only)

[Martin-Idel]

Closes #19155
Closes #19156

Description

This PR solves accessibility problems in selection components. The current behaviour of a select field is the following:

• The screen reader never reads the label
• When in multi-select mode, the screen reader never announces which fields are actually selected in the list

The two separate commits solve these two issues: The first commit actually correctly attaches the lable of the selectbox to its input so that screen readers can pick this up and associate the label with the input, while the second commit puts a label to the Multiselect boxes (VSelect and VAutocomplete) which screen readers can use to read out whether that entry is currently selected or not.

This PR should introduce no change in behaviour for anybody not using a screenreader. It was tested with the screenreaders orca and JAWS (some of the latest versions).

Markup(s)

Bug: Not reading out the label. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdT8sKwjAQ/JVlL1HQVlBQpArevHj2YD3UukohaUKSFqT0392kFcVT5rHMTC4dOlumB2OStiHcYuZJGVl42uc1QNbOC2MijKTUtS+qmuwoRdGRpNJDO1f6TnKXo3LPHGFbcZRjGl8WZHGL9uk1QJbST3T6nx2UoTpLfyYxdaWtjAdHvhmWVcpo66EDSw/o4WG1AsG/EeEcgHOdB94Eu3AxEUeSUovp14sD2b2M1gzEWVt5F9fQPvRxE/YzXCarZLnBANbJAq9v6ylnYQ==
Using a screen reader, one can verify, that the label is not read out

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-select v-model="msg" :items="items" label="My label" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello')
  const items = ['Hello', 'World']
</script>

Bug: Not reading out the label in text areas. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdj81uwkAMhF/F3UtaqSTqD5cqVOLWS2+Veuj2sCQGIu2fvCYCId4dbxYkxM0zY3k+/x1Voq5ZxliPO1QfqmV00RrGT+0B2nFmYpzGSXTBsxk80sWaTMY9G0ID48yFHu1CK5c2WoE1q0l9H8oolpzucBtsj1SCG0Pi5lrV3Hdlp6C0zQ2iyNTREBkS8q6QDi4GYjgC4RpOsKbgoJLvqrwOIHcTgxDCIm88Vl9obYDfQLZ/0Nr/oMSBtwKk/dL3YDaCUT3l5tIlLer0rN7q9/plrvIwr1/V/xkW9G3G

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-textarea v-model="msg" label="My label" placeholder="My placeholder" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello World!\nTest other\nAnd again')
</script>

Bug: No information about which boxes are clicked in multiselect. Playground link for reproduction:

https://play.vuetifyjs.com/#eNpdkEFrwzAMhf+K8MUbtMmgg42SDnbbZecdmhyyVB0GOTa2Ehil/72y05C2J0vvE3pP3p9UDF356X0xDqi2qmK0nlrGj7oHqMZ1630uc9O5nlvTY7hKWYxI2PEsAIxr6w5Iu1rZ+FerBWztQGw8oSAOA94xI8ZRQH5vCbW/edn3/1QurJyDlY/JkjIFr8qbg6SNXTCeISIP013GehcYThDwCGc4BmdBy1/oNA4geyODHAK7NPG0119I5HTzvNAcWfjMVqB/XKCDbpL/5Che6rxSm+K12LyrVLwVL6q5AE2jduo=

Using the same Playground file with these fixes, the screen reader is now able to read it out.

Playground file for convenience:

<template>
  <v-app>
    <v-container>
      <v-select
        v-model="msg"
        :multiple="true"
        :items="items"
        label="My label"
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref(['Hello'])
  const items = ['Hello', 'World']
</script>

[johnleider]

Are there any other inputs that we need to consider this for?

[Martin-Idel]

Regarding other parts where this might be needed: It needs to be multiselect checkboxes within a listbox and I could only find those in those two components - it works correctly for regular checkboxes.

[KaelWD]

Bug: Not reading out the label.

VFieldLabel already has for, it shouldn't need id and aria-labeledby as well if VSelect didn't also add aria-label to the input element (#17786)

Bug: Not reading out the label in text areas.

#21025, there's two labels with for but both are hidden when the field is active.

Bug: No information about which boxes are clicked in multiselect.

NVDA at least already reads "Hello not selected 1 of 2", adding the label to the checkbox seems redundant because now it says "Not checked hello not selected 1 of 2". Does JAWS support aria-selected and if so why isn't our current implementation of it working?
On android talkback I can't even get to the list items, the menu closes as soon as I try to focus it.

[J-Sek]

I don't see VCombobox among changes. Is it just an oversight or intentional?

[J-Sek]

It seems like we need just a few lines to include VCombobox in scope of these changes

[robertzak]

Is there a timeline on when this might be merged?

[KaelWD]

Nothing had changed since my review, now the third example reads "Not checked world not selected not checked editable combobox not checked" in orca.

[J-Sek]

Orca glitches so much lately I slowly lose my trust in this tool. For me it only says "not checked world not selected" when selecting unchecked value in scenario 3. This is already redundant enough to get us bug ticket from somebody if it repeats in other screen readers.

Qualifies for revert, unless the authors can quickly share the recording proving it improved anywhere @Martin-Idel , @ikushum

[KaelWD]

Focus field
Open the menu
Navigate to the first item
Navigate to the second item
Select the second item

Orca

3.11.2

My label clickable (does nothing)
Open open opens popup
Expanded
My label dash list list with 2 items hello hello editable combobox checked
World not selected world editable combobox not checked
Selected

3.11.2-master.2025-12-08

My label clickable (does nothing)
My label my label open opens popup
Expanded
My label dash list list with 2 items checked hello checked editable combobox checked
Not checked world not selected not checked editable combobox not checked
Checked world checked editable combobox checked

NVDA

3.11.2

Combobox collapsed clickable opens list
Close combobox expanded editable opens list hello
My label list list hello 1 of 2
World not selected 2 of 2
Selected

3.11.2-master.2025-12-08

Combobox collapsed clickable opens list
My label combobox expanded editable opens list selected hello
My label list list checked hello 1 of 2
Not checked world not selected 2 of 2
Checked my label list selected

Android talkback

3.11.2

My label my label double tap to activate
Expanded hello editbox hello expanded actions available
Selected hello 1 of 2 in listbox my label list 2 items double tap to select
World 2 of 2 double tap to select
World ticked

3.11.2-master.2025-12-08

My label my label double tap to activate
Expanded hello editbox hello expanded actions available
Selected checked hello 1 of 2 in listbox my label list 2 items double tap to select
Not checked world 2 of 2 double tap to select
Checked world ticked