fix(VSelect/VMenu): remove duplicate IDs, add aria-activedescendant

[KaelWD]

Description

Removed duplicated IDs in VSelectList caused by inheritAttrs
The v-card styles also make no visual difference so I removed that along with the redundant DOM element
Added aria-activedescendant to menu activators and v-select hidden input, auto ids on v-list-item in menu

Motivation and Context

fixes #9680

Markup:

<template>
  <v-container>
    <v-menu offset-y>
      <template v-slot:activator="{ attrs, on }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :id="`my-custom-id-${index}`"
          @click=""
        >
          <v-list-item-title>{{ item }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <v-select
      :items="items"
      label="Month"
      outlined
    ></v-select>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      items: ['January', 'February', 'March', 'April'],
    })
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

[KaelWD]

@rkrasnan can you test this fix? zeit isn't behaving so you'll have to checkout the branch, copy my markup to packages/vuetify/dev/Playground.vue, then run yarn && yarn build && yarn dev

[johnleider]

Pending verification from NVDA.

[TravisBuddy]

Hey @KaelWD,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 7c165250-48f0-11ea-b51a-43bce7cb815c

[rkrasnan]

Testing with NVDA.

v-menu

• Menu button is tab accessible.
• It is expandable with either tab or space.
• Pressing down reads "January".
• Pressing down again does not read anything, it should read "February".

v-select

• Input is not tab accessible.
• Clicking the select expands the menu
• Arrow navigation does not work in the expanded menu
• Nothing is read to the screen reader

[johnleider]

cc @phiter @KaelWD

[phiter]

The issue faced by @rkrasnan not reading the items after the first is due to this playground example generating the same id for every item my-custom-id. Using my-custom-id-${index} makes it work.

But v-select is indeed not working properly on this branch. It's not focusable at all.

[KaelWD]

[johnleider]

I'm not sure if the activeTile references can be computed, but they are currently duplicated.

[phiter]

VSelect items are now being read as you navigate through them, but there are some weird issues still.
I talked to Kael on Discord about this, but basically VSelect is reading the input field as "edit blank".

Also if the VSelect is closed and you press arrow to change the item, it just reads "blank" after each keypress.

Here's a video: https://www.youtube.com/watch?v=LdFbpNOrE-k

Here is the proper implementation details with the elements and aria roles to implement an accessible VSelect.

https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html

We could follow some of this.

The implementation uses a button with the currently selected item as a label inside the button, but I don't know if it works well since VSelect extends VInput.

[KaelWD]

activeTile references can be computed

Maybe, but I know refs aren't reactive so I can't be bothered

basically VSelect is reading the input field as "edit blank"
We could follow some of this

Yeah that'd be nice but maybe for a later time, this is a big improvement already and is ready to go now.