Предупреждение о тайм-ауте бездействия

Мне нужна помощь с модальным, который срабатывает, когда пользователь не работает. Он отлично работает, пока я не тестирую Firefox с запуском NVDA. Есть проблемы с фокусом при использовании клавиш со стрелками и при прокрутке на мобильном устройстве. Когда модальность появляется, и пользователь использует стрелку или проверок, фокус будет отскакивать от кнопки "да" до заголовка через несколько секунд, если я подожду, чтобы щелкнуть по нему. Я загрузил рабочий пример: https://jsfiddle.net/ncanqaam/

Я изменил период простоя на одну минуту и ​​удалил часть, которая вызывает сервер для продления сеанса пользователя.

var state ="L";
var timeoutPeriod = 540000;
var oneMinute = 60000;
var sevenMinutes = 60000;

var lastActivity = new Date();

function getIdleTime() {
    return new Date().getTime() - lastActivity.getTime();
}

//Add Movement Detection
function addMovementListener() {
    $(document).on('mousemove',  onMovementHandler);
    $(document).on('keypress',  onMovementHandler);
    $(document).on('touchstart touchend',  onMovementHandler);
}
//Remove Movement Detection
function removeMovementListener() {
    $(document).off('mousemove', onMovementHandler);
    $(document).off('keypress',  onMovementHandler);
    $(document).off('touchstart touchend',  onMovementHandler);
}

//Create Movement Handler
function onMovementHandler(ev) {
    lastActivity = new Date();
    console.log("Something moved, idle time = " + lastActivity.getTime());
}

function hide() {
    $('#overlayTY').removeClass('opened'); // remove the overlay in order to  make the main screen available again
    $('#overlayTY, #modal-session-timeout').css('display', 'none'); // hide the modal window
    $('#modal-session-timeout').attr('aria-hidden', 'true'); // mark the modal window as hidden
    $('#modal-session-timeout').removeAttr('aria-hidden'); // mark the main page as visible
}

if (state == "L") {
    $(document).ready(function() {
        //Call Event Listerner to for movement detection
        addMovementListener();
        setInterval(checkIdleTime, 5000);
    });

    function endSession() {
        console.log('Goodbye!');
    }

    var modalActive = false;
    function checkIdleTime() {
        var idleTime = getIdleTime();
        console.log("The total idle time is " + idleTime / oneMinute + " minutes.");

        if (idleTime > sevenMinutes) {
            var prevFocus = $(document.activeElement);
            console.log('previously: ' + prevFocus);
            var modal = new window.AccessibleModal({
                mainPage: $('#oc-container'),
                overlay: $('#overlayTY').css('display', 'block'),
                modal: $('#modal-session-timeout')
            });

            if (modalActive === false) {
                console.log(modalActive);
                $('#modal-session-timeout').insertBefore('#oc-container');
                $('#overlayTY').insertBefore('#modal-session-timeout');
                modal.show();
                $('#modal-overlay').removeClass('opened');
                modalActive = true;
                console.log(modalActive);
                console.log('the modal is active');
                $('.js-timeout-refresh').on('click touchstart touchend', function(){
                    hide();
                    modalActive = false;
                    prevFocus.focus();
                    addMovementListener();
                    lastActivity = new Date();
                });

                $('.js-timeout-session-end').on('click touchstart touchend', function(){
                    hide();
                    $('#overlayTY').css('display', 'none');
                    endSession();
                });
            }   
        }
        if ($('#overlayTY').css('display') === 'block'){
            removeMovementListener();
        }

        if (idleTime > timeoutPeriod) {
            endSession();
        }
    }
}

Ответ 1

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

Ответ 2

Возможные решения

  • Отключить указатели-события на теле, когда наложение видимо. это ограничит события клавиатуры/салфетки на элементах тела.
  • Используйте JS/jQuery, чтобы вызвать фокус на кнопке да.