Un raccourci clavier — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 12)

Un raccourci clavier

Projet : la Librairie interactive · niveau 1 (application)

Énoncé

Comme sur de nombreux sites, la touche « / » doit placer le curseur dans le champ de recherche du catalogue, sauf quand l'utilisateur est en train d'écrire dans un champ (il veut alors taper le caractère). Écrire le gestionnaire. Comment signaler ce raccourci aux technologies d'assistance ?

Corrigé


const filtre = document.querySelector("#filtre");

function enTrainDEcrire(element) {
  return element.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName);
}

document.addEventListener("keydown", (evenement) => {
  if (evenement.key !== "/" || evenement.ctrlKey || evenement.metaKey || evenement.altKey) return;
  if (enTrainDEcrire(document.activeElement)) return; // « / » est alors un caractère
  evenement.preventDefault(); // sans quoi « / » s'écrirait dans le champ
  filtre.focus();
});

Vérifié dans Chromium : « / » sur la page place le focus dans le champ, qui reste vide ; dans la zone de texte, « a/b » s'écrit normalement. On signale le raccourci par l'attribut aria-keyshortcuts="/" du champ, et on l'écrit dans l'étiquette visible (« Rechercher (raccourci : touche / ) ») : un raccourci que personne ne connaît ne sert à rien.