Safari浏览器下使用Tab键导航无法聚焦按钮且无焦点提示问题

这个问题是Safari与Chrome的默认交互策略差异导致的，和你的代码逻辑没有直接关联，核心原因有两个：

1. macOS系统默认关闭了全键盘控制功能，默认状态下TAB键仅能聚焦输入框、下拉选择框等文本输入类控件，按钮、复选框等交互控件默认不在TAB导航序列中
2. Safari浏览器自身也有独立的TAB导航设置，默认不会将按钮等非输入类交互控件纳入TAB焦点序列

开发者侧兼容方案（优先选择） #

不需要修改用户设置即可生效的适配操作：

• 给需要支持TAB聚焦的button元素显式添加 tabindex="0" 属性，强制将其纳入默认可聚焦序列，注意不要设置大于0的tabindex值，会破坏页面原生的焦点导航顺序
• 如果你用到了focus-visible polyfill，要确保初始化逻辑正确，已经给目标按钮自动注入了对应的类名
• 调整你现有CSS的冲突规则：你当前代码中.App button:focus { outline: none !important; } 规则会覆盖掉全局的button:focus样式，在不支持原生:focus-visible的Safari 15.4以下版本中，按钮获得焦点也不会显示任何样式提示，可以把这条规则调整为仅在支持:focus-visible的环境下生效，或者补充低版本兼容逻辑

用户端手动开启方案 #

如果是你自己调试时需要触发该效果，可以手动开启对应设置：

1. 打开macOS「系统设置」-「键盘」，开启「键盘导航」开关（旧版本macOS路径为「系统偏好设置」-「键盘」-「快捷键」，勾选底部「使用键盘导航在控制间移动焦点」）
2. 打开Safari「设置」-「高级」，勾选「按下Tab键以高亮显示网页上的每个项目」

内容的提问来源于stack exchange，提问作者user944513