Comment avoir un contour css sur une balise , uniquement par tabulation, mais pas par clic?

Lorsque vous cliquez sur un élément, il lance : active dessus, vous voulez donc enchaîner : active et : focus ensemble:

<button>Button</button>

body:not(.user-is-tabbing) button:focus {
  outline: none;
}

button {
    background-color: red;
}

Comme vous l'avez dit, cela ne fonctionne pas avec des css supplémentaires, dans ce cas, vous devez implémenter une solution un peu compliquée, où vous ajoutez une classe au corps lorsque l'utilisateur utilise tab pour la première fois, sinon vous supprimez les contours tous ensemble

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

<button>Button</button>

button:active:focus {
  outline: none;
}

Si vos icônes sont une sorte de police, la meilleure option est d'utiliser text-shadow à la place:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<button class="btn">
  <i class="fa fa-heart-o"></i>
</button> 

button {
  outline: none!important;
  background: transparent;
  border-color: transparent;
  color: red;
  font-size: 30px;
}

button:focus i.fa {
  text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.7);
}

Dans cet exemple, j'ai utilisé font-awesome-4.7 et généré le text-shadow avec text-shadow générateur .

Utilisez .btn: focus {contour: 0; } pour supprimer contour

Et utilisez addEventListener pour cibler Tab cliquez et définissez box-shadow code > si l'onglet sur votre élément

body[data-whatinput="keyboard"] .btn:focus {
  box-shadow:  0 0 0 0.2rem rgba(0,123,255,.25);
}

<button class="btn" id="heart">
</button>

.btn {
  width: 80px;
  height: 80px;
  transform: rotate(-46deg);
  border: none;
  background: url(https://image.flaticon.com/icons/svg/579/579268.svg);
}
.btn:focus{
outline:0;
}

Vous pouvez cibler onglet clic par css avec ce plugin: https://github.com/ten1seven/track-focus

document.addEventListener('keydown', function(e) {
var elem=document.getElementById('heart');
  if (e.key === 'Tab' &&  document.activeElement === elem) {
     elem.style.boxShadow="0 0 0 0.2rem rgba(0,123,255,.25)";
  }
else{
elem.style.boxShadow="none";
}
  
});

Étant donné qu'aucune des réponses ci-dessus n'a vraiment fonctionné pour moi dans tous les cas (la plupart ignorent au moins le fait que l'on peut à nouveau passer à la souris, et le boxshow doit alors également être supprimé du bouton. Il n'est pas nécessaire être toujours supprimée de l’écouteur d’événements), voici la réponse pour moi:

Si vos balises html sont plus ou moins au même niveau (vous n’avez donc pas à créer d’écouteur pour toute la page):

• L'élément précédent, dont «tab» doit basculer le focus sur le bouton, doit avoir un événement keydown / keyup qui s'exécute ensuite:

    @HostListener('document:keyup.shift.tab', ['$event'])
    @HostListener('document:keyup.tab', ['$event']) onTabHandler(event: KeyboardEvent) {
      const focusedElm = event.target;
      if (focusedElm.id === 'my-heart-button') {
        focusedElm.style.boxShadow = '0 0 5px 1px #305C73';
      }
    }
  

• Lorsque vous souhaitez également prendre en charge un shift + tab (tabulation arrière), ce que vous devriez, vous en avez également besoin pour l'élément suivant:

  <li>
    <previousTag>
    <button>
  </li>
  <li>
    <nextTag>
  <li>
  

• Le bouton lui-même affiche le supprimer par son propre événement de flou:

  <previousTag (keydown)="addBoxShadowBorButtonOnTab($event)">
  
  <button (blur)="removeBowShadow($event)">
  
  <nextTag (keydown)="addBoxShadowBorButtonOnShiftTab($event)">
  

• Le bouton lui-même peut toujours définir son contour sur aucun:

  outline: none
  

Depuis que j'ai posé la question indépendamment de la technologie JS en arrière-plan, les parties de gestion d'événements ne sont pas incluses ici. Mais dans le cas d'une application angulaire, on peut utiliser qc. comme ceci:

$event.target.style.boxShadow = 'none';

En javascript brut, cette partie se fait comme dans les réponses ci-dessus avec un EventListener.

Si vos balises sont dans d'autres balises et vous avez une structure DOM hiérarchique, ou vous ne pouvez pas changer vos balises «précédent» et «suivant»:

Dans mon cas, nous avons eu sth. comme ceci:

if ($event.keyCode === '9' && $event.shiftKey) {
  $event.target.previousSibling.style.boxShadow = '0 0 5px 1px #305C73';
}

Il est préférable d'enregistrer un auditeur pour les événements keyup / keydown pour ajouter votre boxShadow puisque vous êtes alors plus indépendant de votre structure HTML et des futurs changements du DOM. Vous pouvez donc définir votre contour indépendamment des éléments dont vous venez.

Dans mon application Angular, il semble qc. comme ceci:

if ($event.keyCode === '9' && !$event.shiftKey) {
  $event.target.nextSibling.style.boxShadow = '0 0 5px 1px #305C73';
}

La suppression du contour devrait toujours fonctionner exactement de la même manière que ci-dessus.

C'est la seule façon de s'assurer que les boutons seront toujours ont un contour «juste pendant la mise au point en tabulant» pour l'accessibilité, mais ils n'apparaîtront pas sur un clic de souris concernant l'esthétique.

Pouvons-nous réaliser ceci pour que ce contour n'apparaisse que lorsque nous arrivons sur ce bouton avec tabulation, mais pas lorsque nous cliquons dessus?

Oui, vous pouvez en utilisant : focus -visible .

Si vous voulez qu'un contour apparaisse lorsque le bouton est tabulé et non cliqué, définissez contour: aucun sur le bouton sur : focus mais pas sur :focus-visible:

button:focus:not(:focus-visible) {
  outline: none;
}