Aides

Anneau de focus

La classe .focus-ring remplace le contour natif du navigateur par un anneau coloré dont vous réglez la couleur, la largeur et le flou. Elle sert aux éléments interactifs sur mesure.

Tabulez dans l’exemple pour voir l’anneau apparaître. .focus-ring supprime le contour natif au focus et dessine à la place une ombre portée pleine (box-shadow) aux couleur et largeur définies par des variables CSS. Les composants de Cauri (boutons, champs, pagination…) utilisent déjà la même apparence : cette classe sert à l’étendre à vos propres éléments.

Anneau par défaut#

Utilisez le clavier (touche Tab) pour déplacer le focus sur le lien.

Voir mes opérations

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded">Voir mes opérations</a>

Couleurs du thème#

.focus-ring-{couleur} change la couleur de l’anneau pour toutes les couleurs du thème.

Primaire Succès Danger Avertissement

<div class="d-flex flex-wrap gap-3">
  <a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded">Primaire</a>
  <a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded">Succès</a>
  <a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded">Danger</a>
  <a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded">Avertissement</a>
</div>

Largeur, décalage et flou#

Changez les variables CSS directement sur l’élément : --bs-focus-ring-width, --bs-focus-ring-x, --bs-focus-ring-y et --bs-focus-ring-blur.

Anneau épais Anneau flou Anneau décalé

<div class="d-flex flex-wrap gap-3">
  <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded" style="--bs-focus-ring-width: .5rem">Anneau épais</a>
  <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded" style="--bs-focus-ring-blur: .5rem">Anneau flou</a>
  <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded" style="--bs-focus-ring-x: 6px; --bs-focus-ring-y: 6px">Anneau décalé</a>
</div>

Opacité de l'anneau#

L’opacité de la couleur se règle avec --bs-focus-ring-opacity ; une opacité de 1 donne l’anneau le plus visible.

Anneau plein

<a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded" style="--bs-focus-ring-opacity: 1">Anneau plein</a>

Personnalisation en Sass#

Ces variables, définies avant l’import de Cauri, changent l’anneau de tous les composants.

$focus-ring-width:   .25rem;
$focus-ring-opacity: .25;
$focus-ring-color:   rgba($primary, $focus-ring-opacity);
$focus-ring-blur:    0;

Classes et variables

Classes et variables
Élément	Valeur par défaut	Rôle
`.focus-ring`	—	Au focus : supprime le contour natif et applique l’anneau.
`.focus-ring-{couleur}`	—	Définit `--bs-focus-ring-color` avec la couleur du thème et l’opacité courante.
`--bs-focus-ring-width`	`0.25rem`	Épaisseur de l’anneau.
`--bs-focus-ring-opacity`	`0.25`	Opacité de la couleur des classes `.focus-ring-*`.
`--bs-focus-ring-color`	bleu BDU à 25 %	Couleur de l’anneau.
`--bs-focus-ring-x`, `--bs-focus-ring-y`	`0`	Décalage horizontal et vertical (absents par défaut, repli à 0).
`--bs-focus-ring-blur`	`0`	Flou de l’ombre (absent par défaut, repli à 0).
`$focus-ring-width`, `$focus-ring-opacity`, `$focus-ring-color`, `$focus-ring-blur`	voir ci-dessus	Variables Sass correspondantes.

Bonnes pratiques

À faire

Vérifiez que l’anneau reste bien visible sur le fond de votre composant, y compris à 25 % d’opacité.
Augmentez --bs-focus-ring-opacity pour les éléments posés sur une image ou sur un fond coloré.

À éviter

Ne supprimez jamais le contour de focus sans le remplacer par un indicateur visible.
Ne cachez pas l’anneau avec outline: none sur vos propres styles.

Accessibilité

L’indicateur de focus doit avoir un contraste d’au moins 3:1 avec le fond adjacent (critère WCAG 1.4.11).
Tous les éléments interactifs doivent afficher un focus visible à la navigation au clavier.
Testez toujours à la touche Tab : l’ordre de focus doit suivre l’ordre de lecture.