Pronalaženje i uklanjanje zamke tipkovnice

U našem katalogu težine zamka tipkovnice jedini je nalaz razine „kritično“ koji odnosi cijelu stranicu. Razlog je jednostavan: tko ne može koristiti miša, ne može je zaobići. Sve nakon te točke, uključujući košaricu i naplatu, za tu osobu više ne postoji.

Što je obično uzrok

• Vlastoručna petlja fokusa u dijalogu, izborniku ili bočnoj navigaciji koja ne poznaje Escape.
• Ugrađen tuđi sadržaj (video playeri, karte, widgeti za plaćanje) koji guta Tab.
• Komponente koje pri zatvaranju fokus ne postavljaju nikamo: završi na vrhu stranice ili nestane.

// Fokusfalle: der Loop haelt den Fokus im Dialog fest,
// aber es gibt keinen Ausgang. Escape ist nicht belegt,
// und der Dialog laesst sich nur mit der Maus schliessen.
dialog.addEventListener("keydown", (event) => {
  if (event.key !== "Tab") return;
  const focusables = dialog.querySelectorAll("a, button, input");
  const first = focusables[0];
  const last = focusables[focusables.length - 1];

  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});

Sama petlja je ispravna i za modale čak i tražena. Pogrešno je što nema izlaza: nema Escapea, nema zatvaranja tipkovnicom.

Ispravak

// Derselbe Loop, aber mit Ausgang und Rueckkehr.
let lastTrigger = null;

function openDialog(trigger) {
  lastTrigger = trigger;
  dialog.hidden = false;
  dialog.querySelector("[autofocus], button, a, input")?.focus();
  document.addEventListener("keydown", onKeydown);
}

function closeDialog() {
  dialog.hidden = true;
  document.removeEventListener("keydown", onKeydown);
  // Fokus zurueck an den Ausloeser: sonst landet er am Seitenanfang
  lastTrigger?.focus();
}

function onKeydown(event) {
  if (event.key === "Escape") {
    closeDialog();          // der Ausgang, den 2.1.2 verlangt
    return;
  }
  if (event.key === "Tab") {
    trapTabWithinDialog(event); // Loop nur, solange der Dialog offen ist
  }
}

Najrobusnija varijanta

<!-- Am robustesten: das native Element. Der Browser bringt
     Fokus-Loop, Escape und Rueckgabe des Fokus selbst mit. -->
<dialog id="confirm">
  <h2>Bestellung loeschen?</h2>
  <form method="dialog">
    <button value="cancel">Abbrechen</button>
    <button value="confirm">Loeschen</button>
  </form>
</dialog>

<script>
  document.getElementById("confirm").showModal();
</script>

Uz showModal() preglednik sam donosi petlju fokusa, Escape i povrat fokusa. To je znatno manje koda koji može biti pogrešan, a zamke su već riješene.

Provjera, u dvije minute

1. Postavite pokazivač u adresnu traku, pa prođite stranicu samo tipkom Tab.
2. Zabilježite gdje se fokus zaustavlja ili vrti u krug.
3. U svakom sloju pritisnite Escape: zatvara li se i gdje fokus završi?
4. Provjerite i Shift-Tab: neke zamke drže samo jedan smjer.