Как можно ограничить нажатие клавиши табуляции только в модальном всплывающем окне при его открытии? - PullRequest
Новая
       41

Как можно ограничить нажатие клавиши табуляции только в модальном всплывающем окне при его открытии?

0 голосов
/ 04 мая 2018

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

Добавлена ​​роль = "диалог" в HTML-файле

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

Работает над Angular4, HTML5 проектом. Лучше, если мы найдем решение в самом HTML-файле . Я имею в виду без добавления каких-либо материалов, связанных с javascript / jQuery, чтобы предотвратить это

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

будьте осторожны с любым методом, опирающимся только на события javascript, так как он не будет корректно обрабатывать программы чтения с экрана

Тем не менее, это не может быть достигнуто без JavaScript, как уже указано в нескольких вопросах, таких как Как сохранить фокус в модальном диалоге?

У вас есть три шага:

1. отключить взаимодействие программы чтения с экрана с любыми другими узлами, установив на них aria-hidden=true

Например: 

<main aria-hidden="true"><!-- main content here--></main>
<dialog>Your dialog here</dialog>

2. отключить любое клавиатурное взаимодействие с ними

Это должно быть сделано в Javascript / или jQuery.

Это однострочная инструкция в jQuery, использующая jquery-ui 

$("main :focusable").addClass("disabled").attr("tabindex", -1);

Обратное может быть достигнуто с помощью: 

$(".disabled").removeClass("disabled").attr("tabindex", 0);

3. удалить любое указательное событие для этих элементов, чтобы отключить взаимодействие с мышью

образец css: 

main[aria-hidden='true'] { pointer-events: none;}
0 голосов
/ 28 января 2019

Вот мое решение. Он перехватывает Tab или Shift + Tab по мере необходимости в первом / последнем элементе модального диалога (в моем случае это role="dialog"). Приемлемые проверяемые элементы - это все видимые элементы управления вводом, HTML-код которых может быть input,select,textarea,button. 

$(document).on('keydown', function(e) {
    var target = e.target;
    var shiftPressed = e.shiftKey;
    // If TAB key pressed
    if (e.keyCode == 9) {
        // If inside a Modal dialog (determined by attribute role="dialog")
        if ($(target).parents('[role=dialog]').length) {                            
            // Find first or last input element in the dialog parent (depending on whether Shift was pressed). 
            // Input elements must be visible, and can be Input/Select/Button/Textarea.
            var borderElem = shiftPressed ?
                                $(target).closest('[role=dialog]').find('input:visible,select:visible,button:visible,textarea:visible').first() 
                             :
                                $(target).closest('[role=dialog]').find('input:visible,select:visible,button:visible,textarea:visible').last();
            if ($(borderElem).length) {
                if ($(target).is($(borderElem))) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
    return true;
});
0 голосов
/ 04 мая 2018

Вы спрашиваете о фокусировочной ловушке , это хорошо продемонстрировано в этой демонстрации: http://davidtheclark.github.io/focus-trap/demo/

Добавление role="dialog" не обеспечит автоматическую фиксацию фокуса внутри этого элемента. Фактически, не имеет встроенной ловушки фокуса , предоставляемой браузерами.

Вам нужно выбрать одну из следующих опций:

  • Реализация ловушки фокуса самостоятельно
  • использовать сторонние решения фокусировки, например, https://github.com/davidtheclark/focus-trap
  • использовать сторонние решения модальных окон, например, https://github.com/sweetalert2/sweetalert2, который полностью совместим со спецификациями WAI-ARIA и обеспечивает ловушку фокусировки для вас
...