Javascript 实现纯键盘的最佳方式是什么：2021年的焦点造型？

长期以来，通过CSS

outline:none删除outline是一种常见的做法来自按钮等可交互元素，因为大多数时候它看起来不像品牌，但它阻碍了可访问性，并使依赖键盘导航的残疾人更难浏览网站

问题是我还没有找到一种简单的方法来区分鼠标/键盘之间焦点事件的来源，单击和键盘选项卡元素将触发焦点状态

我知道这个问题一直都是一个问题，但大多数资料都有好几年的历史了，所以我将展示我找到的关于如何实现仅键盘焦点的4种主要方法，每种方法都有各自的优缺点：

在“作弊”方法中，一些网站如Target.com有相同的悬停和对焦风格，这种设计选择让他们可以选择根本不需要删除对焦轮廓
优点：解决了问题

缺点：设计选项有限


按钮{
宽度：180px；
高度：60px；
背景：#999；
边界：无；
}
按钮：焦点，
按钮：悬停{
外形：5px纯绿；
}
单击或标记我
然而，正如你所说的，所有4个选项都有缺点

就我个人而言，我会选择“最适合”的解决方案，在这种解决方案中，一些用户可能会在点击时显示焦点指示器，但大多数新浏览器会优雅地处理事情：


按钮：焦点{
外形：3px实心#333；
轮廓偏移量：3倍；
}
按钮：焦点：不（：焦点可见）{
大纲：无；
轮廓偏移：0；
}
测试
另一个测试
我想不起来了，但是有一种方法是使用JS，基本上是用鼠标点击删除轮廓。我是一年前做的，我只是对细节模糊不清