焦点可见性检查 - :focus-visible样式测试

:focus 是 CSS 伪类，当元素获得焦点时总是匹配，无论焦点是通过键盘、鼠标还是触摸获得。

:focus-visible 是较新的 CSS 伪类，仅当元素获得焦点且浏览器认为应该显示焦点指示器时才匹配。通常，通过键盘（Tab键）导航时会触发，而鼠标点击通常不会触发。

这解决了长久以来的用户体验问题：鼠标用户不希望看到丑陋的焦点环，但键盘用户需要它来进行无障碍导航。

这是浏览器的有意为之。对于文本输入框（<input>、<textarea>），浏览器认为即使是鼠标点击，显示焦点指示器也是合理的——因为用户需要知道光标在哪里输入文字。

这种行为因浏览器而异：

• Chrome/Edge： 文本输入框鼠标点击也会触发 :focus-visible
• Firefox： 通常只在键盘导航时触发
• Safari： 行为类似 Chrome，但桌面和移动端有差异

最佳实践是同时定义两个伪类，确保在各种情况下都有合适的焦点指示：

/* 移除默认焦点样式 */
.my-element:focus {
  outline: none;
}
/* 键盘导航时显示明显的焦点环 */
.my-element:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

这样，鼠标点击不会显示焦点环（保持界面干净），但键盘导航用户能看到清晰的焦点指示。

截至2024年，所有现代浏览器都支持 :focus-visible：

• Chrome 86+ (2020年10月)
• Firefox 85+ (2021年1月)
• Safari 15.4+ (2022年3月)
• Edge 86+ (2020年10月)

对于旧浏览器，可以使用 focus-visible polyfill 来提供支持。

推荐使用 :focus-visible 的场景：

• 按钮、链接等交互元素——鼠标点击时隐藏焦点环，键盘导航时显示
• 自定义UI组件（下拉菜单、标签页、卡片等）
• 任何你希望保持视觉干净，但又不能牺牲可访问性的地方

仍需使用 :focus 的场景：

• 需要始终显示焦点状态的元素
• 文本输入框（浏览器已智能处理）
• 需要兼容非常旧的浏览器时（配合polyfill）

:focus-visible 是可访问性最佳实践的重要组成部分：

• WCAG 2.4.7 要求所有可交互元素有可见的焦点指示器
• :focus-visible 让开发者可以在不牺牲视觉设计的前提下满足这一要求
• 键盘导航用户（包括运动障碍用户、高级用户）依赖焦点指示器来定位
• 使用 :focus-visible 可以避免鼠标用户被不必要的焦点环干扰

简而言之，:focus-visible 让界面既美观又可访问，是现代化Web开发的推荐做法。