1

我正在使用 Algolia React Instant 搜索包为 React 中的 Web 项目开发高级搜索功能。

我在键盘导航方面有点挣扎。

搜索结果包含一长串具有各种 URL 的文章。该列表仅使用 Tab 键导航非常麻烦，因此我使用箭头键实现了导航，效果非常好。

但是，我偶然发现了一个问题，我不确定如何解决关于焦点可见的问题。当使用箭头键导航时，组件内的功能将使用 element.focus();

如果我用鼠标聚焦搜索字段并使用箭头键开始导航，则焦点可见轮廓丢失。但是，如果我使用 Tab 键导航到搜索字段并使用箭头键开始导航，则焦点可见轮廓是可见的。这是根据规范，因为 focus() 不会更改为焦点可见，并且最后一次导航是用鼠标完成的。

但这使得无法使用按键进行导航 - 您不知道焦点所在的元素。知道如何在以编程方式设置焦点时强制浏览器认为我正在使用键盘导航吗？

4

1 回答 1

0

我最终重新考虑了我的风格并使用了焦点风格。

但是 Chrome 中的行为真的很奇怪。

如果我设置了像 focus:not(:focus-visible) 这样的样式，当使用鼠标在焦点上导航时，它将使用焦点样式设置样式，但如果我使用 Element.focus() 设置焦点（并且最初设置了焦点）用鼠标在活动元素上）；所以 Chrome 浏览器知道这不是通过鼠标导航的吗？这对我来说完全没有意义吗？

于 2021-09-01T15:12:48.007 回答