fix(VMenu): replace aria-owns with aria-controls

[viktorkratz]

Because of the use of aria-own, vmenu's could not be used with screen readers.

Description

Vemnu uses aria-control and no longer aria-owns because with aria-owns it was not possible to use the menu with some screen readers. It could be improved by setting role="menu" on the slot and role="menuItem" at every single item, but this could break things depending on slot content.

Markup:

<template>
  <div class="d-flex justify-space-around">
    <v-menu>
      <template #activator="{ props }">
        <v-btn
          color="primary"
          v-bind="props"
        >
          Activator slot
        </v-btn>
      </template>
      <v-list role="menu">
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
          role="menuItem"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <v-btn
      color="primary"
    >
      Parent activator

      <v-menu activator="parent">
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-btn>

    <v-btn
      id="menu-activator"
      color="primary"
    >
      Sibling activator
    </v-btn>

    <v-menu activator="#menu-activator">
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' },
      ],
    }),
  }
</script>