Styles de focus pour le clavier uniquement dans les navigateurs modernes

Dans les navigateurs modernes, la pseudo-classe :focus-visible peut être utilisée pour obtenir des uniquement les styles de focus. Cette pseudo-classe correspond aux éléments ciblés lorsque l'utilisateur interagit avec la page via un clavier ou un autre périphérique sans pointage, indiquant le focus lorsqu'elle aide l'utilisateur. Par conséquent, les anneaux de mise au point sont supprimés lorsqu'un utilisateur interagit en cliquant ou en appuyant.

Style de mise au point personnalisé avec :focus-visible

Pour mettre en œuvre des styles de mise au point personnalisés tout en préservant compatibilité avec les anciens navigateurs, suivez cette approche :

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

Dans les navigateurs prenant en charge :focus-visible, la deuxième règle remplace les styles de focus définis dans la première règle lorsque :focus-visible est inactif. Cela garantit que les styles de focus ne sont appliqués que lorsque :focus-visible est actif.

Solution originale pour les navigateurs plus anciens

Pour les navigateurs qui ne prennent pas en charge :focus-visible, une approche alternative consiste à utiliser un élément supplémentaire dans chaque élément focalisable, comme proposé dans l'article de Roman Komarov :

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

En plaçant les styles de focus sur un élément interne, tout en supprimant les contours par défaut sur les éléments parent et internes après avoir ajouté le style de focus personnalisé, seules les interactions clavier appliquent les styles de focus à l'élément visible principal.