Попытка использовать клавиатуру для перемещения фокуса от одного тега привязки к другому с помощью JavaScript - PullRequest
Новая
       13

Попытка использовать клавиатуру для перемещения фокуса от одного тега привязки к другому с помощью JavaScript

0 голосов
/ 14 декабря 2018

Итак, попытка сделать большой веб-сайт (который я не могу изменить) ADA-совместимым и столкнулась с проблемой.Нужно перемещать фокус от одного якоря к другому дальше вниз по странице, когда первый якорь активируется с помощью клавиатуры.

Сделан небольшой фиктивный проект для эксперимента ( Js Fiddle ).

test.html: 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <script type="text/javascript" src="test.js.txt"></script>

</head>

<body>
    <h1>Page</h1>
    <p>content.</p>
    <a href="#" onclick="jump('b3')" id="b1">b1</a>
    <a href="#">b2</a>
    <a href="#"id="b3">b3</a>
    <button onclick="jump('b1')" id="b4">b4</button>
</body>
</html>

test.js.txt: 

function jump(id){
   test = document.getElementById(id);
   test.focus();
}

Если я нажму на b1, он изменит фокус на b3 какожидается.То же самое с b4 до b1.Использование клавиатуры для нажатия пробела или ввода на кнопке b4 изменит фокус на b1.

Но, если я попытаюсь использовать клавиатуру (клавиша ввода), чтобы b1 изменил фокусировку на b3, мерцание b3 и возврат фокусана б1.Размещение точек останова в js показывает, что js активирован (отсюда мерцание), но фокус не остается на b3.

Чтобы объяснить ситуацию, у нас есть заголовок, полный навигации.По какой-то причине в заголовке существует несколько псевдо-выпадающих меню (они фактически делают вещи видимыми, которые были скрыты), и они открываются, щелкая теги привязки, которые составляют заголовок.Все содержимое раскрывающегося списка является якорными тегами и НЕ является потомками верхнего меню

Мне нужно иметь возможность активировать пункты меню и отображать раскрывающееся окно.После чего фокус должен перейти в окно, а не переходить к следующему пункту меню.

Наконец, после того как я просмотрел содержимое, мне нужно вернуться в самое верхнее меню, которое является тегом привязки.

Спасибо всем за помощь в решении этой проблемы

1 Ответ

0 голосов
/ 15 декабря 2018

Почему бы просто не использовать tabindex?Вот для чего это.

Если вы хотите переходить по странице с помощью щелчков, используйте именованные якоря, вот для чего они.

...