Question sur le focus par défaut des Mixins

Bonjour,

La dernière mise à jour de l’uniform focus style inclut un nouveau mixin qui ajoute une bordure autour des champs de saisie, des sélections et d’autres éléments. C’est excellent pour l’accessibilité, mais nous utilisons un border-radius: 4px sur les champs de saisie. Est-il possible de surcharger les mixins ou d’ajouter un border-radius: 0 dans le fichier core mixins.scss afin que le border-radius passe de 4px à 0 lors du focus ?

À gauche, c’est l’apparence actuelle, et à droite, après l’application de border-radius: 0 :arrow_down:

Merci ! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}

Nous avons un thème interne avec des coins arrondis pour les boutons, et je ne vois pas de problème similaire au vôtre. Pouvez-vous fournir un peu plus de contexte, par exemple une capture d’écran plus large afin que je puisse identifier de quel bouton il s’agit ? Faites-moi savoir si vous utilisez un thème public ; je suis certain que cela peut être résolu.

Ah, je vois. Je pense que votre meilleure option est de gérer cela dans votre thème, car le noyau définit déjà la bordure à 0 pour tous les éléments de saisie :

Ainsi, dans votre thème, vous pouvez remplacer le border-radius de l’élément de saisie en focus au même endroit où vous le définissez actuellement à une valeur.

Si vous souhaitez conserver les coins arrondis au focus, vous pouvez également procéder ainsi :

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(La propriété outline ne peut pas avoir de coins arrondis, donc l’exemple ci-dessus passe à l’utilisation d’une ombre solide pour la remplacer.)

Merci beaucoup ! :slight_smile: Je vais le faire. Encore une question… Est-ce une mauvaise pratique de désactiver le contour ? Je veux dire, pour des raisons d’accessibilité.

Je pense que c’est acceptable, étant donné que vous utiliserez autre chose pour styliser l’élément en focus.