用途:为交互元素生成可见、无障碍的焦点指示器,满足 WCAG 2.4.7(焦点可见,AA)与 2.4.11(焦点外观,AAA,要求 2px 以上周长、3:1 对比度),并兼顾 2.4.12(焦点不被遮挡)。适用于设计系统焦点样式搭建、键盘导航可见性、品牌化焦点环、修复现有 UI 中不可见的焦点状态。
主要能力:提供 Ring、Glow、Underline、Offset、Inset 等焦点样式;支持始终可见或仅 focus-visible;输出 CSS 自定义属性与工具类、组件级焦点样式、Tailwind 配置与工具类、JSON 令牌;包含暗色模式焦点变量与对比度安全配色参考。
使用方式:先获取品牌主色与背景色,选择样式偏好与可见性策略,再生成焦点令牌和工具类,并按键盘测试清单验证。示例:*:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); };Tailwind 可用 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2。
限制:资料未提供安装命令、收费、平台与效果数据;具体对比度需按实际配色验证。