Raccourcis clavier
Les quatre touches que le thème lie, où chacune s'applique, et où la lectrice l'apprend.
Le thème lie quatre touches. Cette page dit lesquelles, quand elles écoutent, et où une lectrice qui n'a jamais lu cette page l'apprend — car un raccourci que personne ne peut découvrir est un raccourci que personne n'a.
Les liaisons
| Touches | Fait | Écoute tant que |
|---|---|---|
| ⌘K · CtrlK | Ouvre la recherche, et la referme | Partout sur la page, y compris sur un lien ou un bouton ayant le focus |
| ? | Ouvre la liste des raccourcis | Le contenu propre de la page a le focus |
| [ | La page précédente de cette section | Le contenu propre de la page a le focus |
| ] | La page suivante de cette section | Le contenu propre de la page a le focus |
Le modificateur suit le clavier de la lectrice, pas celui de l'auteur : ⌘ sur
un clavier Apple, Ctrl partout ailleurs. Il est résolu dès qu'un navigateur est
là pour répondre : une page prérendue livre donc le Ctrl le plus sûr et
l'échange à l'arrivée.
[ et ] restent dans la section lue. La dernière page d'une section n'offre
aucune page suivante vers une autre — changer de section est le rôle de la
rangée des sections, et une touche nommée « page suivante » qui quitte le sujet
n'est pas la même touche.
Où la lectrice l'apprend
Quatre endroits, et tous les quatre puisent dans la même définition : aucun ne peut donc en venir à annoncer une touche que la couche ne lie plus.
- Le bouton de recherche porte son propre accord —
⌘KouCtrl+K— dans la capsule à sa droite. - Les liens vers la page précédente et la suivante au pied d'une page portent
[et]. C'étaient les touches que rien ne mentionnait : il fallait ouvrir la liste pour apprendre que les deux liens déjà sous les yeux avaient des touches. - Le bouton clavier à côté de la recherche ouvre la liste au pointeur, sur
chaque page à partir du breakpoint
lg; en dessous, l'en-tête le masque, car un écran tactile n'a pas de touches à lister. C'est la réponse à la part circulaire du problème :?ouvre la liste des touches, et il faut le savoir pour la taper. - La liste elle-même énumère chaque liaison vivante avec ses touches, sur
?ou depuis ce bouton.
Quand une touche se retire
Un raccourci global d'un seul caractère se déclenche sous une lectrice qui ne l'a jamais demandé : les touches sans modificateur sont donc gardées, pas seulement liées. Rien ne se déclenche :
- dès que quelque chose de plus proche de la touche l'a déjà traitée ;
- pendant que la lectrice saisit du texte — un champ, un textarea, un select, une zone éditable ;
- n'importe où dans une boîte de dialogue, un menu, une listbox, une combobox, une grille ou un arbre, qui répondent eux-mêmes aux frappes.
Les touches sans modificateur se retirent d'un cran de plus : elles ne se
déclenchent que tant que le contenu propre de la page a le focus, jamais sur un
lien, un bouton ou un onglet. ⌘/Ctrl+K fait exception, car aucun contrôle ne
veut cet accord.
Une cible de focus en tabindex="-1" compte comme du contenu, délibérément :
c'est là que le focus se gare après une navigation, et une lectrice qui vient
d'arriver sur une page est exactement celle à qui [ et ] s'adressent.
Éteindre les touches nues
shortcuts.singleCharacter: false délie ?, [ et ] et laisse ⌘/Ctrl+K.
L'accès par contacteur, le contrôle vocal et la dictée émettent des caractères
nus à longueur de temps, et une page qui s'en va sous l'un d'eux n'en montre
aucune cause ; aucune méthode de saisie ne produit l'accord modifié par accident.
? est un caractère nu comme les autres : un site qui pose cette valeur n'a plus
aucune touche pour ouvrir la liste des raccourcis. Le bouton clavier de l'en-tête
est alors la seule entrée. En dessous de lg, l'en-tête le masque — un écran
tactile n'a pas de touches à lister — en lui passant hidden lg:inline-flex
depuis DuxtHeader ; le composant lui-même ne porte aucune classe responsive.
Retirez-le d'un en-tête surchargé, et la liste devient inaccessible.
La politique est un booléen plutôt qu'une table de liaisons, et c'est délibéré :
voir shortcuts dans la référence de configuration.
Surcharger tout cela
La liste, les gardes et le dessin sont un seul module —
useDuxtShortcuts(). Les
deux composants autour sont
DuxtShortcuts, la liste, et
DuxtShortcutsTrigger,
le bouton qui l'ouvre. Les deux vous appartiennent par la voie habituelle ; voir
Surcharger le thème.