Как сделать набросок CSS на теге <button>, только по вкладке, но не по клику?

Question

У нас есть несколько кнопок, которые стилизованы под css и имеют такие значки:

Эта кнопка имеет свойство контура по умолчанию, поэтому каждый раз, когда мы нажимаем на нее, она имеет контур (синий хром):

чтобы избавиться от него, мы, конечно, можем переписать это свойство как:

outline: none

но затем, когда мы перейдем к этой кнопке и дойдем до нее, у нее также не будет никакого контура, что является плохой практикой для доступности.

Можем ли мы добиться этого, чтобы этот контур появился только тогда, когда мы нажали на эту кнопку с вкладкой, а не когда мы нажали на нее?

Точно так же, как информация: у нас также есть некоторые теги a , которые визуально выглядят именно так, и с тегами у нас точно такое поведение, которое мы хотим, контуры появляются только тогда, когда мы нажимаем на эту ссылку, но не по клику. Мы просто хотим вести себя точно так же с тегами кнопок.

Answer 1

Если ваши иконки - это какие-то шрифты, лучше всего использовать text-shadow вместо:

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);
}

<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> 

В этом примере я использовал font-awesome-4.7 и сгенерировал text-shadow с генератором text-shadow .

Answer 2

Используйте .btn:focus{ outline:0; } для удаления outline

И используйте addEventListener для нацеливания Tab, нажмите и установите box-shadow, если вкладка на вашем элементе

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";
}
  
});

.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;
}

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

Вы можете нацелить tab клик по css с помощью этого плагина: https://github.com/ten1seven/track-focus

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

Answer 3

Когда вы нажимаете на элемент, он накладывает :active на него, поэтому вы хотите связать :active и :focus вместе:

button:active:focus {
  outline: none;
}

<button>Button</button>

Как вы сказали, это не работает с дополнительным CSS, в этом случае вам нужно реализовать немного сложное решение, в котором вы добавляете класс в тело, когда пользователь впервые использует tab, в противном случае вы удаляете все контуры вместе

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);

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

button {
    background-color: red;
}

<button>Button</button>