Vuetify: [Bug Report] v-select accessibility aria-labelledby doesn't work

[chrmorqmatic]

Environment

Vuetify Version: 2.1.10
Vue Version: 2.6.10
Browsers: Chrome 78.0.3904.97
OS: Windows 10

Steps to reproduce

use the keyboard to navigate the v-select, when in opened menu use arrow to move from one element to the other

Expected Behavior

Screen readers should say the current element linked with aria-labeledby

Actual Behavior

The screen readers says nothing or 'blank' instead of the text
tested on
Chromevox extension: says nothing
NVDA : https://www.nvaccess.org/ says 'blank'

Reproduction Link

https://codepen.io/chrmorqmatic/pen/XWWPyoB

Other comments

Tested also with official doc on https://vuetifyjs.com/en/customization/accessibility with slots or without, same behavior, same on v-select exemples

[johnleider]

According to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute we are providing the aria label definition a link to its text:

Will need some additional help with resolving this otherwise.

[rkrasnan]

According to the persons at NVDA, this issue is caused by id duplication.

[johnleider]

@rkrasnan can you check if #10226 works properly with NVDA? Thank you

[phiter]

Since we use an activator element which retains the focus during the navigation between the options, aria-labbeledby will not work.

We need to use aria-activedescendant in the activator, passing the ID of the option element.

This is being worked on by @KaelWD in the PR mentioned by @johnleider in the comment above.