• Accueil
•   >  Recueil
•   >  Garder le focus à l'intérieur d'une modale - Accessibilité

Garder le focus à l'intérieur d'une modale - Accessibilité

Introduction

Selon le motif de conception du W3C, lorsqu'une boîte de dialogue s'ouvre, le focus doit déplacer vers un élément à l'intérieur de la boîte de dialogue

• Tab :
  • Déplace le focus sur le prochain élément tabulable de la boîte de dialogue.
  • Si le focus est sur le dernier élément tabulable de la boîte de dialogue, il est déplacé vers le premier élément tabulable de la boîte de dialogue.
• Shift + Tab :
  • Déplace le focus sur l'élément tabulable précédent dans la boîte de dialogue.
  • Si le focus est sur le premier élément tabbable de la boîte de dialogue, il est déplacé vers le dernier élément tabbable de la boîte de dialogue.
• Echap : Ferme la boîte de dialogue.

Code

Le code suivant est largement inspiré de celui Yogesh Chavan avec quelques optimisations pour une meilleur re-utilisation

function trapFocusIn(modal) {
  modal.addEventListener("keydown", function (e) {

    let isTabPressed = e.key === "Tab" || e.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    let focusableElement = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    let firstFocusableElement = focusableElement[0];
    let lastFocusableElement = focusableElement[focusableElement.length - 1];

    if (e.shiftKey) {
      // if shift key pressed for shift + tab combination
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus(); // add focus for the last focusable element
        e.preventDefault();
      }
    } else {
      // if tab key is pressed
      if (document.activeElement === lastFocusableElement) {
        // if focused has reached to last focusable element then focus first focusable element after pressing tab
        firstFocusableElement.focus(); // add focus for the first focusable element
        e.preventDefault();
      }
    }

  });
}

Rendu