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>