Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VMenu): Use correct aria handling for menus. #20596

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

viktorkratz
Copy link

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>

Because of the use of aria-own, vmenu's could not be used with
screen readers.
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VMenu VMenu labels Oct 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VMenu VMenu T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants