[Bug Report][2.2.11] v-radio-group - Screen reader reads label of v-radio twice when add property ID to v-radio-group

[Ben-SMS]

Environment

Vuetify Version: 2.2.11 Vue Version: 2.6.11 Browsers: Chrome 104.0.0.0 OS: Windows 10

Steps to reproduce

1. Open screen reader NVDA
2. Navigate to the reproduction link above
3. Tab to the v-radio-group "Ready to go"
4. Listen to the NVDA read

Expected Behavior

NVDA reads radio label one time. ex: Read to go, YES NO grouping...."

Actual Behavior

NVDA reads twice for radio label "Read to go, YES YES NO NO grouping...."

Reproduction Link

https://codepen.io/doanthaiphong/pen/jOzRwXG?editors=1010

Other comments

This issue only occurs when adding property ID to "v-radio-group" element. Look at the output HTML on browser duplication of ID between the parent container "div" and child element "legend"

[RyanSMS]

When id is available, its value is used for generating aria-labelledby and legend id which are used for Assistive Technology support. This leads 2 problems:

1. AT tools would read the content twice (after reading what is defined in aria-labelledby with legend, AT reads once again using id).
2. The id, if used in this way, violates the WCAG when one id value is duplicated, so it fails Accessibility testing.

For the case, id is not available, Vuetify generates one random id value for aria-labelledby and legend id, hence, duplicate reading does not happen.

We tried to change aria-labelledby value and legend id value to another one, that is different from the id value then NVDA reads correctly like the case without id.

Please review and make the enhancement, because ID of one element should be always defined. It can be used for many purposes, especially automation development.

Thank you!

[Ben-SMS]

Hi John, I noticed that this bug was marked as closed without any accompanying comments, so I'm unsure whether it has been fixed. Could you please provide more information?

Thanks.