无法在 Safari 上使用 Tab 键导航聚焦按钮

Question

TABS您能告诉我为什么在 safari 浏览器中使用时焦点不会转到按钮上或没有指示焦点位于按钮上吗？

在 Chrome 中它工作正常。问题出在SAFARI浏览器上。

这是我的代码 https://codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

/* .js-focus-visible :focus:not(.focus-visible) {
  outline: 0;
} */

button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

.App button:focus,
.App a:focus {
  outline: none !important;
}
.App button:focus-visible,
.App a:focus-visible {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none !important;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible:focus-visible {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

设置为重现。

1. 聚焦到第一个输入字段，然后按TAB两次焦点应该转到按钮 。在 chrome 中它正在运行。但是 safari 却没有运行，为什么？

我已经做了下面的回答不起作用？

Answer 1

因为 Mac（和 Safari）都默认只允许您使用 Tab 键进入文本框和列表。

但是，有一个辅助功能设置可以启用“全键盘访问”。

macOS 文图拉

它位于“系统设置”>“辅助功能”>“键盘”下（“电机”标题下）。

较旧的 macOS 版本

最有可能的是 Catalina 或之前：

请注意，Safari > 设置 > 高级（包括在 Ventura 中）有一个Press Tab to highlight each item on a webpage，尽管这并不是使所提供的代码沙箱中的按钮可选择的必要条件。

来源：https ://www.scotohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html