Esdeveniments de teclat i dreceres pròpies: implementar-les sense trencar res

A la primera lliçó vam veure què exigeix el 2.1.4 Dreceres de teclat i a l'anterior vam escriure gestors per a les fletxes. Tan bon punt una aplicació creix (un gestor d'expedients, un editor, un tauler d'administració), apareixen dreceres pròpies: Ctrl+K per cercar, / per anar al cercador, ? per a l'ajuda. Implementar-les bé exigeix conèixer l'API d'esdeveniments de teclat, les particularitats del teclat espanyol i les combinacions que ja ocupen el navegador, el sistema i els lectors de pantalla. Una drecera mal triada no només no ajuda: impedeix escriure una arrova o deixa sense funcions qui fa servir NVDA.

keydown, key i code

L'esdeveniment per reaccionar a una pulsació és keydown. Es dispara en prémer i es repeteix mentre es manté la tecla (la propietat e.repeat indica les repeticions). keyup té usos puntuals; keypress i les propietats keyCode i which estan obsoletes i no les hauries de fer servir en codi nou.

Cada esdeveniment porta dues propietats que convé no confondre:

• e.key: el valor lògic de la tecla, és a dir, el caràcter que produeix ("a", "A", "/") o el seu nom ("Enter", "Escape", "ArrowDown"). Depèn de la distribució del teclat.
• e.code: la posició física de la tecla ("KeyA", "Digit7"), amb noms presos del teclat nord-americà i independent de la distribució.

Regla pràctica: per a dreceres de lletra o símbol, fes servir key, que coincideix amb el que la persona veu imprès a la seva tecla. Reserva code per a quan importi la posició, com en un joc que fa servir les tecles de direcció de la mà esquerra.

if (e.code === 'Slash') buscador.focus(); // incorrecte

Modificadors i teclat espanyol

Les propietats ctrlKey, altKey, shiftKey i metaKey indiquen quins modificadors estaven premuts. metaKey correspon a la tecla Cmd a macOS, on les convencions fan servir Cmd allà on Windows fa servir Ctrl; el més senzill és acceptar-les totes dues: (e.ctrlKey || e.metaKey) && e.key === 'k'.

Dos paranys propis del nostre teclat:

• AltGr equival a Ctrl+Alt a Windows. En un teclat espanyol, l'arrova, el coixinet, l'euro, els claudàtors, les claus i la barra inversa s'escriuen amb AltGr, i Windows notifica aquesta tecla com a Ctrl+Alt. Si defineixes Ctrl+Alt+E per exportar, cada vegada que algú escrigui «€» exportarà el document; amb Ctrl+Alt+2, no podrà escriure una adreça de correu. Evita les combinacions Ctrl+Alt amb lletres, números i signes.
• Tecles mortes i mètodes d'entrada. Per escriure «á» es prem primer la tecla de l'accent, que arriba com a e.key === "Dead", i després la «a». En idiomes com el xinès o el japonès, la composició de caràcters marca els esdeveniments amb e.isComposing. Si un camp de text processa keydown per construir o filtrar el que s'escriu, trencarà aquestes entrades. Per reaccionar al que s'ha escrit, escolta l'esdeveniment input.

Combinacions ocupades

No hi ha cap espai de dreceres lliure en tots els entorns. Abans de triar, revisa amb qui pots xocar:

• El navegador. Algunes combinacions no es poden capturar des d'una pàgina (a Chrome, per exemple, Ctrl+T, Ctrl+W o Ctrl+N). D'altres sí que es poden capturar, com Ctrl+F o Ctrl+P, però la persona n'espera el comportament habitual: substitueix-les només si ofereixes alguna cosa equivalent, com una cerca dins d'un document llarg que el navegador no pot fer.
• El sistema operatiu. Alt+Tab, les combinacions amb la tecla Windows o Ctrl+Alt+Supr no arriben mai a la pàgina. A Windows, Alt+Maj pot canviar la distribució del teclat si n'hi ha diverses d'instal·lades.
• Els lectors de pantalla. NVDA fa servir Insert (i opcionalment Bloq Maj) com a tecla pròpia; NVDA i JAWS fan servir Ctrl+Alt+fletxes per recórrer taules; VoiceOver a macOS fa servir Ctrl+Opció com a prefix. A més, en mode d'exploració els lectors intercepten les lletres soltes, com veuràs a la lliçó sobre tecnologies de suport.

Tria poques dreceres, comprova-les amb les llistes de combinacions dels navegadors i lectors més utilitzats, mostra-les a la interfície i permet reassignar-les. Així compleixes el 2.1.4 si són d'una sola tecla i evites conflictes en tots els casos.

Una drecera d'una sola tecla ben implementada

Recordem les condicions del 2.1.4: una drecera d'una sola tecla s'ha de poder desactivar, reassignar o estar limitada al component amb focus. A més, per pura usabilitat, no s'ha de disparar mai mentre la persona escriu. Aquest gestor reuneix les comprovacions necessàries:

const ajustes = cargarPreferencias(); // { atajosDeUnaTecla: true }, desat al perfil

document.addEventListener('keydown', (e) => {
  if (!ajustes.atajosDeUnaTecla) return;            // 2.1.4: es poden desactivar
  if (e.defaultPrevented || e.isComposing) return;   // un altre component ja l'ha gestionat
  if (e.ctrlKey || e.metaKey || e.altKey) return;    // no és una drecera d'una tecla
  const t = e.target;
  if (t.isContentEditable || t.closest('input, textarea, select')) return; // està escrivint

  if (e.key === '/') {
    e.preventDefault();
    document.getElementById('buscar').focus();
  } else if (e.key === '?') {
    e.preventDefault();
    abrirAyudaDeAtajos();
  }
});

Fixa't que no es descarta shiftKey: en el teclat espanyol tant / com ? requereixen Maj. I que preventDefault() només es crida per a les tecles que fa servir la drecera; qualsevol altra pulsació segueix el seu curs.

Per donar a conèixer les dreceres, combina tres coses: una ajuda accessible des de la interfície (un botó «Dreceres de teclat» que obre un diàleg amb la llista, i l'opció de desactivar-les), la combinació visible al costat de l'acció (al menú, «Exporta Ctrl+Maj+E») i l'atribut aria-keyshortcuts, que exposa la drecera a les tecnologies de suport:

<button type="button" aria-keyshortcuts="Control+Shift+E">Exporta</button>

aria-keyshortcuts només informa: no implementa la drecera, i no tots els lectors l'anuncien. No substitueix el fet de mostrar-la a la pantalla.

document.addEventListener('keydown', (e) => {
  e.preventDefault(); // perquè el navegador no interfereixi
  gestionarAtajo(e);
});

Detalls que marquen la diferència

• Retorn i Espai en botons propis. En un botó natiu, Retorn dispara el clic en prémer i Espai en deixar anar. Si reconstrueixes un botó, imitar aquest detall és un refinament; l'imprescindible és que totes dues tecles funcionin.
• Escapada amb jerarquia. Escapada ha de tancar l'últim que s'ha obert (el desplegable dins del diàleg abans que el diàleg), no tot alhora. Atura la propagació al component que la gestiona.
• Tecles mantingudes. Si una acció no s'ha de repetir (enviar, esborrar), ignora els esdeveniments amb e.repeat.
• No dupliquis el que és natiu. Si un button real ja executa la seva acció a l'esdeveniment click, no hi afegeixis un gestor de Retorn que també la cridi: el navegador ja genera el clic amb aquesta tecla i l'acció s'executarà dues vegades.

addEventListener('keydown', (e) => console.log(e.key, e.code, e.ctrlKey, e.altKey, e.shiftKey));

Resum

• keydown és l'esdeveniment correcte; keypress, keyCode i which estan obsolets.
• e.key és el que produeix la tecla i e.code, la seva posició física; per a dreceres de lletres i símbols, fes servir key.
• A Windows, AltGr arriba com a Ctrl+Alt: aquestes combinacions xoquen amb l'escriptura en espanyol i en català.
• Revisa els conflictes amb el navegador, el sistema i els lectors de pantalla; mostra les dreceres i permet desactivar-les o reassignar-les.
• No disparis mai una drecera dins d'un camp de text ni cridis preventDefault() de manera general.