web-dev-qa-db-fra.com

Pourquoi un événement «clic» est-il déclenché sur mon <bouton> lorsque j'appuie sur Entrée?

J'ajoute uniquement un gestionnaire d'événements click sur mon <button>.

document.getElementsByTagName("button")[0].addEventListener("click", event => {
  event.preventDefault();

  console.log("Click:", event);
});
<button>Press <kbd>Enter</kbd> on me</button>

( Lien de démonstration )

Néanmoins, lorsque je clique sur le bouton dans Firefox, appuyez sur Enter, Je vois que l'événement click est déclenché. Cependant, je ne peux voir ce comportement documenté nulle part. Ce comportement est-il standard et puis-je compter sur son fonctionnement dans tous les navigateurs?

javascripthtmldomaccessibilitydom-events
14
Vincent

Cela est principalement dû au fait que de nombreux auteurs ont historiquement écrit du code en utilisant des événements de clic tout en oubliant de tenir compte des utilisateurs qui ne cliquent pas (que ce soit parce qu'ils préfèrent utiliser un clavier pour naviguer, ont un handicap qui rend difficile l'utilisation d'un dispositif de pointage, ou pour toute autre raison).

Le comportement est documenté dans la spécification HTML :

Certains éléments en HTML ont un comportement d'activation, ce qui signifie que l'utilisateur peut les activer. Cela déclenche une séquence d'événements dépendant du mécanisme d'activation et aboutissant normalement à un événement de clic, comme décrit ci-dessous.

…

Pour l'accessibilité, les touches Entrée et Espace du clavier sont souvent utilisées pour déclencher le comportement d'activation d'un élément.

Il explique ensuite les étapes en détail.

17
Quentin

Parce que pour les utilisateurs de clavier (lorsqu'une souris n'est pas disponible), lorsqu'un bouton est mis au point et que vous appuyez sur Enter (peut-être Space ainsi), il simule un événement de clic.

Il s'agit du support d'accessibilité du navigateur que la plupart des navigateurs, sinon tous, fournissent.

3
Adriani6

Ceci est documenté dans WCAG: SCR35: Rendre le clavier d'actions accessible en utilisant l'événement onclick des ancres et des boutons:

Alors que onclick semble lié à la souris, l'événement onclick est en fait mappé à l'action par défaut d'un lien ou d'un bouton. L'action par défaut se produit lorsque l'utilisateur clique sur l'élément avec une souris, mais elle se produit également lorsque l'utilisateur concentre l'élément et frappe enter ou spaceet lorsque l'élément est déclenché via l'API d'accessibilité.

Ceci est également indiqué dans IEVents/click section :

En plus d'être associé à des périphériques pointeurs, le click event type [~ # ~] doit [~ # ~] être distribué dans le cadre d'une activation d'élément, comme décrit au §3.5 Déclencheurs d'activation et comportement .

Le paragraphe Déclencheurs d'activation indique que:

Les déclencheurs d'activation initiés par l'utilisateur incluent le fait de cliquer sur un bouton de la souris sur un élément activable, d'appuyer sur la touche Enter key lorsqu'un élément activable a le focus, ou en appuyant sur une touche qui est en quelque sorte liée à un élément activable (un raccourci clavier ou une touche d'accès) même lorsque cet élément n'a pas le focus.

Ce qui signifie que l'un de ces déclencheurs enverra l'événement click.

3
Adam