Modalité d'avertissement de temporisation d'inactivité fonctionnant sur le lecteur d'écran

Question

J'ai besoin d'aide avec un modal qui se déclenche lorsque l'utilisateur est inactif. Cela fonctionne très bien jusqu'à ce que je teste sur Firefox avec NVDA en cours d'exécution. Il y a des problèmes avec la mise au point lorsque vous utilisez les touches fléchées et lorsque je fais glisser sur un mobile. Lorsque le modal apparaît et que l'utilisateur utilise la flèche ou le balayage, le focus va rebondir du bouton oui à l'en-tête après quelques secondes si j'attends de cliquer dessus. J'ai chargé l'exemple de travail à: https://jsfiddle.net/ncanqaam/

J'ai changé la période d'inactivité à une minute et supprimé une partie qui appelle le serveur pour prolonger la session de l'utilisateur.

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(); 
     } 
    } 
} 

Answer 1

Le problème est avec VoiceOver Safari lorsqu'un utilisateur fait glisser sur un point d'ancrage ou le bouton, l'accent est mettre sur ces éléments; cependant, si l'élément est un H2, il ne recevra pas de focus car nativement il n'est pas supposé en recevoir. Pour compenser, j'ai tenté de définir des événements gestuels sur le H2, mais Voiceover Safari a besoin de temps pour lire le texte de l'élément ou étiqueter la charge, empêchant ainsi tout événement de se déclencher, ce qui crée un problème lors du chargement d'un modal une fonction de temporisation plutôt qu'un élément cliquable. J'espère qu'Apple abordera cette question à l'avenir.

Answer 2

Possibles solutions

1. pointer-événements sur le corps lorsque Désactiver superposition est visible. ce restreindra clavier/événements de glissement sur les éléments du corps
2. Utilisez JS/jQuery pour déclencher focus sur le bouton oui