仅在 Safari 上，单击滑块元素时会出现焦点轮廓
On Safari only, a focus outline is appearing upon clicking of slider element
发生这种情况的站点：
https://elearning.scranton.edu/
在 Safari 桌面版和移动版中，如果您向下滚动到程序滑块并单击箭头，您将看到 整个 滑块模块收到一个灰色的虚线焦点轮廓。我不明白为什么会这样。这个大纲应该只在使用键盘进行 Tab 键时出现，而不是在单击时出现。我不想完全删除 :focus 样式，因为这会让键盘用户看不到他们在屏幕上的位置。我不知道为什么会这样。使用的滑块是 Tiny Slider，但我在文档中没有看到任何与焦点轮廓和 safari 相关的内容。
看来您是在谈论轮播。如果您单击左侧或右侧按钮，整个旋转木马将获得一个虚线焦点指示器。
这是因为旋转木马 <div> 有一个 tabindex="0" 而实际的箭头按钮没有 (tabindex="-1")，所以焦点最终会转到旋转木马并收到一个虚线大纲。 Firefox 和 Chrome 允许在您单击它们时将焦点移动到 <button>，即使它们具有 tabindex="-1"，因此您（最初）看不到旋转木马容器上的虚线轮廓本身，但如果您在单击其中一个箭头后 tab 向后可以 看到相同的轮廓。
这是 Firefox 的屏幕截图：
我不确定为什么行为会有所不同，但它确实表明网站存在可访问性问题。 left/right 箭头按钮应该 而不是 tabindex="-1"。键盘用户没有（明显的）方法来导航到按钮并移动到下一个轮播项目。如果你玩弄它，你最终会发现，当你 tab 到轮播 (<div tabindex="0">) 时，你可以使用键盘左右方向键滚动轮播左和右。
因此，如果您从 <button> 元素中删除 tabindex="-1"，我怀疑您会在所有浏览器上获得相同的焦点行为。
我猜您想将 tabindex="0" 保留在旋转木马（第三方库？）上以允许 left/right 箭头键滚动旋转木马，尽管如果按钮是键盘可聚焦的, left/right 箭头键是多余的。
发生这种情况的站点： https://elearning.scranton.edu/
在 Safari 桌面版和移动版中，如果您向下滚动到程序滑块并单击箭头，您将看到 整个 滑块模块收到一个灰色的虚线焦点轮廓。我不明白为什么会这样。这个大纲应该只在使用键盘进行 Tab 键时出现，而不是在单击时出现。我不想完全删除 :focus 样式，因为这会让键盘用户看不到他们在屏幕上的位置。我不知道为什么会这样。使用的滑块是 Tiny Slider，但我在文档中没有看到任何与焦点轮廓和 safari 相关的内容。
看来您是在谈论轮播。如果您单击左侧或右侧按钮，整个旋转木马将获得一个虚线焦点指示器。
这是因为旋转木马 <div> 有一个 tabindex="0" 而实际的箭头按钮没有 (tabindex="-1")，所以焦点最终会转到旋转木马并收到一个虚线大纲。 Firefox 和 Chrome 允许在您单击它们时将焦点移动到 <button>，即使它们具有 tabindex="-1"，因此您（最初）看不到旋转木马容器上的虚线轮廓本身，但如果您在单击其中一个箭头后 tab 向后可以 看到相同的轮廓。
这是 Firefox 的屏幕截图：
我不确定为什么行为会有所不同，但它确实表明网站存在可访问性问题。 left/right 箭头按钮应该 而不是 tabindex="-1"。键盘用户没有（明显的）方法来导航到按钮并移动到下一个轮播项目。如果你玩弄它，你最终会发现，当你 tab 到轮播 (<div tabindex="0">) 时，你可以使用键盘左右方向键滚动轮播左和右。
因此，如果您从 <button> 元素中删除 tabindex="-1"，我怀疑您会在所有浏览器上获得相同的焦点行为。
我猜您想将 tabindex="0" 保留在旋转木马（第三方库？）上以允许 left/right 箭头键滚动旋转木马，尽管如果按钮是键盘可聚焦的, left/right 箭头键是多余的。