Focus Ring ^commun

Les éléments html focusables ont un style déterminé pour satisfaire les contraintes d'accessibilité.
La classe .focus-ring supprime l'outline par défaut au profit d'un box-shadow personnalisable.
Penser à tabuler avec le clavier pour constater les résultats.

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

--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};

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