Question

我正在寻找一种简单有效的解决方案，以使可聚焦元素仅在按Tab键时具有轮廓，而在 react 应用中使用鼠标时不显示轮廓。（类似于：focus-visible，实际上可以在不同的浏览器上运行） -非常令人沮丧的是，建立一个易于访问的网站几乎没有在线解释一般性解释。谢谢您的帮助！

Answer 1

这是一个普遍的重点。如果有样式优先，则必须包含特殊性或“！important”才能使这些属性起作用。

*:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: Highlight;
}

/* WebKit gets its native focus styles.
 */
@media (-webkit-min-device-pixel-ratio:0) {
  *:focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }
}

参考：https://ghinda.net/article/mimic-native-focus-css/

Answer 2

您要执行的操作是向键盘和鼠标按下添加事件侦听器。如果是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);

仅在标签焦点上概述

2 个答案: