css - 键盘选项卡上的输入效果 ->焦点，但不是点击

Question

当用户“tabs over”输入时，我希望焦点效果正常显示，但在点击时，我不希望它可见。

用户点击标签，现在专注于切换按钮，我希望切换按钮有轻微的发光轮廓，我目前可以做到这一点。

现在，

用户点击切换按钮或它的关联标签，切换像往常一样变化，但是，我希望发光从一开始就不会出现，或者尽快消失。

我知道 .blur()，现在我不得不使用 setTimeout 进行延迟修复，但我想知道是否有一个更好的方法来完成这个，或者如果可能有一个 CSS only solution

Answer 1

我认为很多前端开发人员都在努力寻找美学与可访问性最佳实践之间的平衡点。这似乎是一个很好的妥协。

这是我的做法。这个想法是在用户使用 Tab 键时打开大纲，并在他们单击时将其关闭。

JS

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('body').addClass('show-focus-outlines');
  }
});

document.addEventListener('click', function(e) {
  $('body').removeClass('show-focus-outlines');
});

样式

body:not(.show-focus-outlines) button:focus, 
body:not(.show-focus-outlines) [tabindex]:focus {
  outline: none;
}