Закрыть всплывающее окно / раскрывающийся список при фокусировке (управление с клавиатуры)

Question

Я пытаюсь сделать доступным всплывающее окно / раскрывающийся список, как в примере на сайте W3 . Если вы нажмете на клавиатуре, чтобы пользователь приблизился к 1 меню, а затем перейдите в пункт меню Space Bears, нажмите Enter, чтобы открыть меню. Затем, если вы нажмете вкладку, вы go через меню. Как только фокус выходит из меню, раскрывающийся список автоматически исчезает. Это функциональность, которую я пытаюсь подражать. Остальные работают, но их фрагмент JavaScript не объясняет, как скрыть всплывающее окно при фокусировке.

Я получил собственное решение, использующее тайм-аут. Тайм-аут есть, потому что без него activeElement - это тело. Мне нужно подождать этот короткий момент, чтобы сосредоточиться на элементе. Я чувствую, что мог бы быть более надежный подход, вместо того, чтобы полагаться на тайм-аут.

Обратите внимание, что я назвал это модальным в моем коде, но, вероятно, на самом деле это не "модальный". Это было именно то, что я назвал.

$('.js-modal *').on('focusout', function() {
    setTimeout(function() {
      var is_in_modal = $(document.activeElement).closest('.js-modal').length;

      if (!is_in_modal) {
        close_modals();
      }
    }, 10);

  });

Answer 1

Ваша идея чего-то, что автоматически исчезает, когда вы go выходите из этого, - плохая идея. Вам лучше переключиться на более классическое c решение, подобное настоящему модальному, как уже хорошо описано в другом ответе.

Это плохая идея, потому что она сбивает с толку. Давайте представим этот сценарий: у нас есть пять элементов 1, 2, 3, 4 и 5. 3 и 4 изначально скрыты и появляются, когда фокус 2. Первоначально я нахожусь на элементе 1:

1. Я нажимаю клавишу Tab и go на элемент 2. Появляются элементы 3 и 4, но, поскольку я слепой, я, возможно, вообще не заметил этого.
2. Я снова нажимаю клавишу Tab. Я go до элемента 3
3. Я нажимаю Tab. Я go до элемента 4
4. Я нажимаю еще раз Tab. Я go к элементу 5. Элементы 3 и 4 исчезают, но, опять же, я, возможно, не заметил этого.
5. Хорошо, я наконец хочу go вернуться к элементу 3, поэтому я нажимаю Shift + Tabb. Я ожидаю приземлиться на элементе 4, но вместо этого пошел на 2 . Где находится элемент 3?

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

---

Вы не убеждены?

Я полагаю, вам сказали сделать так, чтобы логика c была такой же для пользователей клавиатуры, как и для мыши. С помощью мыши вы нажимаете на меню, оно открывается, но закрывается, как только вы покидаете его область.

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

Для пользователей клавиатуры это одно и то же. Если я слепой, я ожидаю, что фокусируемые элементы всегда будут иметь одинаковый порядок табуляции, и ожидаю изменений в этом порядке, только когда я сделаю серьезное действие, такое как нажатие Enter, чтобы развернуть / свернуть меню. Если я по зрению и использую клавиатуру по какой-либо причине, я не ожидаю, что элементы появляются или исчезают на экране, когда просто нажимаешь клавишу Tab.

---

Все еще не придумано?

Итак Задайте себе еще один вопрос: как мне использовать ваш интерфейс со смартфоном? С сенсорным устройством, нет реального фокуса, а также нет реального наведения мыши, пока вы не нажмете точный элемент для взаимодействия с ним. Это проблематично c, не так ли? У вас нет всех этих понятий, поэтому вы должны реагировать на клики. У вас нет выбора, и это хорошо.

Answer 2

автоматически исчезает, когда пользователь использует навигацию с помощью клавиатуры / TAB, чтобы сфокусироваться на нем.

Это полная противоположность модального поведения.

Вы должны перехватывать фокус внутри вашего модала, и он должен закрываться с помощью клавиши Es c и кнопки закрытия (доступ с клавиатуры).

Эта статья является хорошей отправной точкой для изучения модалов , хотя я не согласен с методом, описанным в пункте 5 «Пока открыто, запретить вкладки вне диалога» - это также должно включать использование aria-hidden для каждого элемента вне модального в противном случае пользователи программы чтения с экрана могут оказаться вне модального режима (поскольку они могут перемещаться по ссылкам или заголовкам и т. д. c.), когда этого не должно быть.

Заключительная мысль - вы тебе нужен модал? Возможно, вам лучше использовать шаблон, если вышеперечисленное не относится к вашему варианту использования.