javascript - 仅在选项卡焦点上勾勒轮廓

Question

我正在寻找一种简单、高效的解决方案，使可聚焦元素的轮廓仅在按下 Tab 键时 并且在 React 应用中使用鼠标时不显示。 (类似于 :focus-visible 实际上适用于不同的浏览器) - 非常令人沮丧的是，制作一个可访问的网站几乎没有在线解释的一般解释。 感谢您的帮助!

Answer 1

您要做的是为键盘和鼠标按下添加一个事件监听器。 如果是 Tab 按键，则添加一个 CSS 类来概述所需的元素。

function handleFirstTab(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('user-is-tabbing');

    window.removeEventListener('keydown', handleFirstTab);
    window.addEventListener('mousedown', handleMouseDownOnce);
  }
}

function handleMouseDownOnce() {
  document.body.classList.remove('user-is-tabbing');

  window.removeEventListener('mousedown', handleMouseDownOnce);
  window.addEventListener('keydown', handleFirstTab);
}

window.addEventListener('keydown', handleFirstTab);