diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx index c6bf8287724..87de7af8981 100644 --- a/packages/vuetify/src/components/VMenu/VMenu.tsx +++ b/packages/vuetify/src/components/VMenu/VMenu.tsx @@ -169,7 +169,7 @@ export const VMenu = genericComponent()({ 'aria-haspopup': 'menu', 'aria-expanded': String(isActive.value), 'aria-controls': id.value, - 'aria-owns': id.value, + 'data-v-overlay-activator': id.value, onKeydown: onActivatorKeydown, }, props.activatorProps) ) diff --git a/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.browser.tsx b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.browser.tsx index cd9142c20f3..24e116415e9 100644 --- a/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.browser.tsx +++ b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.browser.tsx @@ -13,6 +13,22 @@ import { commands, render, screen, userEvent, wait } from '@test' import { ref } from 'vue' describe('VMenu', () => { + it('should associate the activator with the menu using aria-controls', () => { + render(() => ( + + {{ + activator: ({ props }: any) => Menu, + default: () => , + }} + + )) + + const activator = screen.getByTestId('activator') + + expect(activator.getAttribute('aria-controls')).toMatch(/^v-menu-v-\d+$/) + expect(activator).not.toHaveAttribute('aria-owns') + }) + describe('open-on-focus with template activator', () => { beforeEach(() => commands.setFocusEmulationDisabled())