How to make v-menu keyboard accessible

user_14764973 0
Viewed 313

Vuetify 5.10 and Vue 2.6.14.

I know the Vuetify documentation says:

By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.

But they don't provide any example and I tried it and I couldn't make it work so I ended up not using it and just having a method that shows and hides my dropdown on click(it works but It sounds possible with v-menu).

Here is what I tried, this is not keyboard accessible:

   <v-menu>
      <template v-slot:activator="{ on, attrs }"> -->
        <div v-bind="attrs" v-on="on" class="nearby-trigger">
          <toggle-button
            phrase="Location"
            standalone
            attach="#nearbyLocation"
          ></toggle-button>
        </div>
      </template>

      <v-card id="nearbyLocation">
        <v-container>
          <v-row>
            <v-col>
              <v-text-field hide-details placeholder="Area Code"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-menu>

Update: To give more explanation on the issue: The problem is that v-menu injects everything inside at the end of the DOM tree so let's say I have a header with my v-menu then main and then footer, well I can reach that menu via keyboard after the footer so I have to tab all the way through till after the footer. In conclusion, it appears in the right place but isn't in the right tab order(yes I've tried tabindex)

Thanks for any help!

vuejs2 vuetify.js vue.js accessibility
2 Answers

This sandbox example seems to be working when using tab to get to the v-menu button and the arrow keys to navigate between the items:

<template>
  <div class="text-xs-center">
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on" id="menuButton"> Dropdown </v-btn>
      </template>
      <v-list>
        <v-list-tile
          v-for="(item, index) in items"
          :key="index"
          @click="onMenuItemClick(item)"
          tabindex="1"
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { title: "List Item 1" },
      { title: "List Item 2" },
      { title: "List Item 3" },
      { title: "List Item 4" },
    ],
    menuButton: undefined,
  }),

  methods: {
    onMenuItemClick(item) {
      console.log(`${item.title} clicked`);
      // manually set focus back to the button on click.
      this.menuButton.focus();
    },
  },
  mounted() {
    this.menuButton = document.getElementById("menuButton");
  },
};
</script>

https://codesandbox.io/s/vuetify-sandbox-32bw5r?file=/src/components/Menu.vue

user_40525180

Thanks to @dick.ey for helping me with this answer

The solution was to figure out attach. By default v-menu is attached at the root(https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VMenu/VMenu.ts)

You can attach v-menu to a specific place and that would be the parent of where v-menu is. Since I didn't want to disturb the order or css I opted to create a div parent container and I attached it to that.

<div id="searchMenu">
 <v-menu attach="#searchMenu">
      <template v-slot:activator="{ on, attrs }"> -->
        <div v-bind="attrs" v-on="on" class="nearby-trigger">
          <toggle-button
            phrase="Location"
            standalone
            attach="#nearbyLocation"
          ></toggle-button>
        </div>
      </template>

      <v-card id="nearbyLocation">
        <v-container>
          <v-row>
            <v-col>
              <v-text-field hide-details placeholder="Area Code"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-menu>
</div>

The div in that code will always exist while my card now gets added at the end of that div rather than the end of my root which would consist of a footer which is terrible for keyboard accessibility.

user_147649730
Related