Динамическая настройка tabindex в навигационном ящике
Я пытаюсь игнорировать фокус, когда ящик закрыт, но я все равно могу переходить по ссылкам, даже когда он закрыт (когда для showDrawer ref установлено значение false). Я даже могу использовать табуляцию, если установлю tabindex = "-1" на <nav>. Единственное решение, которое я нашел, — это добавить :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>
Ищем возможное решение.
@yoduh, но тогда переход не сработает. Я хочу сохранить анимацию скрытия/открытия ящика.
Вы также можете использовать @keyframes для переключения на display: none в конце перехода CSS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Замечательно, что вы начинаете рассматривать взаимодействие с клавиатурой для обеспечения доступности! Я надеюсь, что смогу прояснить два недоразумения, которые у вас сейчас возникают.
tabindexне наследуется в DOM, применяется только к самому элементу- Порядок фокусировки — не единственное, о чем следует беспокоиться при сокрытии ящика (навигации), общий доступ с помощью вспомогательных технологий также должен быть запрещен.
Это можно сделать с помощью атрибута 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 делает и то, и другое.
В настоящее время у меня возникли трудности с проверкой, получает ли tabindex уважение по ссылке на маршрутизатор. Любая помощь приветствуется.
inert сработало, спасибо! Так просто. Я также обнаружил, что этот атрибут не будет работать, если я установлю его на <ItemDrawer/>, который является компонентом, находящимся внутри <AppHeader> (в моем случае Drawer является частью заголовка). Итак, мне придется сначала перейти к <ItemDrawer/>, а затем добавить inert к <nav> там.
только что проверил еще раз. inert работало только за счет запрета пользователю нажимать/фокусироваться, но я все равно могу получить доступ как к <router-link>, так и к <button> в <nav><ul><li>button or router-link<li/><ul/><nav/> с помощью голосового помощника. Я использую Edge и в нем есть встроенный голосовой помощник.
Это будет работать так, как ожидалось, только если я добавлю inert и aria-hidden к <nav>.
Это странно, inert должен поддерживаться в Edge начиная с версии 102. Согласно a11ysupport, он работает в Edge. Но я не знаком со встроенным голосовым помощником.
поэтому в Edge, если я щелкну правой кнопкой мыши по заголовку и выберу опцию «Читать вслух», он начнется с логотипа, а затем прочитает ссылки в скрытом ящике, пока я не добавлю :aria-hidden = "!showDrawer". Но если я использую любую другую программу чтения с экрана и просто вкладку, потому что я установил inert, все работает нормально. Я думаю, что самый безопасный вариант — использовать оба inert и aria-hidden для поддержки всех браузеров. В любом случае это более короткий путь, вместо добавления tabindex к каждой ссылке, что приводит к слишком большому количеству дубликатов.
используйте
v-showвместоv-if. при этом будет использоватьсяdisplay: none, чтобы скрыть навигацию вместо полного удаления ее из DOM. Это по-прежнему должно предотвращать фокусировку при вкладке.