让“获得焦点但未激活”的交互元素，更友好！

2023-10-19 16:22:36

众所周知，交互元素的 :focus 样式，通常用于提醒用户已选择该元素，也可以触发某些交互（比如打开某个下拉菜单），然后配合 :active (点击后) 和 :hover (悬浮) 可以实现更好的交互体验。

但是在现代浏览器中，:focus 在按下Tab键时也会触发，这可能会导致一些问题：

当用户使用 Tab 键在页面上导航时，每个带有 :focus 样式的元素都会显示聚焦效果。这在某些情况下可能导致混乱或视觉干扰，因为用户可能并不希望这些元素显示聚焦效果。
在某些情况下，:focus 样式可能会干扰其他交互。例如，如果某个元素在 :focus 时改变其外观，那么当用户使用 Tab 键在该元素上导航时，该元素的外观可能会发生变化，这可能会导致用户感到困惑或难以使用。
而 :focus-visible 的作用就是：去除Tab键乱聚焦的副作用。

:focus-visible 伪类选择器，它允许我们控制 :focus 样式仅在元素获得焦点且可见时才应用。这意味着我们可以禁用 :focus 样式，仅在用户点击元素或使用方向键或空格键激活元素时才应用 :focus 样式。

我们可以通过以下步骤启用 :focus-visible ：

在 CSS 中添加以下代码：

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

在 JavaScript 中添加以下代码：

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    document.querySelectorAll(':focus').forEach((element) => {
      element.classList.remove('focus-visible');
    });
  }
});

document.addEventListener('mousedown', (event) => {
  const element = document.activeElement;
  if (element) {
    element.classList.add('focus-visible');
  }
});