vuetify
vuetify copied to clipboard
fix(VMenu): Use correct aria handling for menus.
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>