如何使v菜单键盘可访问

Question

Vuetify 5.10和Vue 2.6.14.

我知道Vuetify文档说:

默认情况下，v-menu组件被分离并移动到应用程序的根目录。为了正确支持将动态内容插入DOM，必须使用attach道具。这将确保在按tab键时焦点从激活器转移到内容。

但是他们没有提供任何例子，我试过了，我不能使它工作，所以我最终没有使用它，只是有一个方法，显示和隐藏我的下拉菜单点击(它工作，但它听起来可能与v-menu)。

这是我尝试的，这是不可用的键盘:

<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>

更新:关于这个问题的更多解释:问题是，v-menu把所有东西都注入到DOM树的末尾比方说，我有一个v-menu的header然后是main，然后是footer，我可以通过键盘在footer之后到达那个菜单所以我必须一直按tab键直到footer之后。总之，它出现在正确的位置，但不是在正确的制表符顺序(是的，我试过tabindex)

谢谢你的帮助!

Answer 1

这个沙盒示例在使用tab键获取v-menu按钮和使用箭头键在项目之间导航时似乎是有效的:

<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

Answer 2

感谢@dick。谢谢你帮我解答这个问题

解决方案是找出附加。默认情况下，v-menu附加在根目录(https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VMenu/VMenu.ts)

你可以将v-menu附加到一个特定的位置，这将是v-menu所在位置的父位置。因为我不想打乱顺序或css，我选择创建一个div父容器，我把它附加到它。

<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>

代码中的div将始终存在，而我的卡片现在被添加到div的末尾，而不是根的末尾，根的末尾将包含一个脚，这对键盘的可访问性很糟糕。