在导航抽屉中动态设置 tabindex

Question

我试图在抽屉关闭时忽略焦点，但即使在抽屉关闭时（当

showDrawer

ref 设置为

false

时），我仍然可以通过选项卡浏览链接。如果我在

tabindex="-1"

上设置

<nav>

，我什至仍然可以按 Tab 键。我找到的唯一解决方案是将

:tabindex="showDrawer ? 0 : -1"

直接添加到每个

<router-link>

或

<button>

，甚至不是

<li>

，而是其中的实际元素，否则它将无法工作。我觉得这不是最好的方法。我需要以某种方式设法使用

tabindex

来完成此操作，因为在关闭抽屉时从 DOM 中删除抽屉会增加性能影响。

<template>
    <nav class="drawer" :tabindex="showDrawer ? 0 : -1">
        <ul class="drawer__list">
            <li class="drawer__item">
                <router-link
                    to="/"
                    >Home</router-link>
            </li>
            <li class="drawer__item">
                <button
                    About
                </button>
            </li>
            <li class="drawer__item">
                <button
                    Log In
                </button>
            </li>
        </ul>
    </nav>
    <ItemOverlay :class="{ active: showDrawer }" />
</template>

寻找可能的解决方案。

Answer 1

很高兴您开始考虑键盘交互以实现辅助功能！我希望我能澄清您目前似乎存在的两个误解。

1. tabindex

   在DOM中不被继承，它只适用于元素本身
2. 隐藏（导航）抽屉时，焦点顺序并不是唯一需要担心的事情，还必须禁止通过辅助技术进行一般访问

这可以通过

inert

属性来完成：

<nav class="drawer" :inert="!showDrawer">

也就是说，如果您无法使用 CSS 可靠地隐藏元素以防止交互和辅助技术（例如“display: none”或

visibility: hidden

）。

<p><a href="#">First tab stop</a></p>

<nav inert>
  <ul>
    <li><a href="#" current="page">Active Page</a></li>
    <li><a href="#">Another Page</a></li>
  </ul>
</nav>

<p><a href="#">Last tab stop</a></p>

另一种选择是对辅助技术隐藏导航

<nav class="drawer" :aria-hidden="!showDrawer">

并避免每个交互元素的焦点

<router-link :tabindex="showDrawer ? 0 : -1"…

inert

两者兼而有之。