Соответствие недопустимым требованиям WCAG 2.1 — SC 1.4.13 для всплывающих подсказок

Я пытаюсь решить проблемы доступности WCAG 2.1. - SC 1.4.13, контент при наведении курсора или фокусе, в частности, в закрывающемся разделе с Подсказки Bootstrap 3.3. Он указывает, что всплывающая подсказка должна быть легко закрыта без потери фокуса или наведения триггера. Я хочу, чтобы пользователь мог закрыть всплывающую подсказку с помощью клавиши escape (как мне было рекомендовано). Я смог сделать это с помощью части фокуса (вкладка клавиатуры для триггера и нажатие выхода) через javascript. Но когда я пытаюсь сделать то же самое с наведением мыши (наведение курсора на триггер и нажатие клавиши Escape), всплывающая подсказка не исчезает. Вы можете увидеть пример 1 на связанной странице выше, чтобы понять, чего я пытаюсь достичь. Кто-нибудь сталкивался с этим раньше? Заранее спасибо!

Вот код, который я использую:

$(document).ready(function() {
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function() {
        var me = this;
        console.log('shown');
        $(this).keyup(function(e) {
            console.log('key up');
            // Escape key
            if (e.key === 'Escape') {
                console.log('hide');
                $(me).tooltip('hide');
            }
        });
    });
});

person PartyHatPanda    schedule 01.05.2020    source источник
comment
я так понимаю это бутстрап?   -  person Graham Ritchie    schedule 01.05.2020
comment
@GrahamRitchie да, я могу обновить вопрос   -  person PartyHatPanda    schedule 01.05.2020


Ответы (1)


Это то, что я в итоге сделал, и это работает хорошо, но хотелось бы чего-то менее хакерского.

$(document).ready(function() {
    $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function() {
        var me = this;
        $(document).one('keyup', function(e) {
            // Escape key
            if (e.key === 'Escape') {
                $(me).tooltip('hide');
            }
        });
    });
});
person PartyHatPanda    schedule 01.05.2020