React+Formik+Tailwind下自定义复选框如何恢复键盘导航功能

根本原因 #

你为<Field>组件添加的Tailwind hidden类对应display: none属性，会直接将原生复选框从Tab导航序列中移除，浏览器无法将其识别为可聚焦交互元素，因此失去键盘导航能力。

修复步骤 #

• 替换原生复选框的隐藏方式：移除hidden类，改用sr-only类实现视觉隐藏，同时保留元素的可聚焦性与屏幕阅读器识别能力，新增peer类用于关联兄弟元素的聚焦样式。
• 调整聚焦样式绑定逻辑：普通div默认不可聚焦，原有写在父div上的focus样式无效，通过peer状态将聚焦样式绑定到展示用的文本span上，原生复选框被键盘聚焦时自动触发span的高亮样式。
• 替换事件绑定类型：原有onClick仅能响应鼠标点击操作，键盘按空格/回车选中复选框时不会触发，换成onChange即可同时兼容鼠标、键盘两种触发场景，也符合Formik的表单事件规范。

修改后代码 #

<div
  key={index}
  className="rounded-md flex gap-2"
>
  <label htmlFor={player.name} className="cursor-pointer">
    <Field
      type="checkbox"
      onChange={() => handleSetChecked(index)}
      id={player.name}
      name="players"
      value={player.name}
      className="sr-only peer cursor-pointer"
    />
    <span
      className={`block h-full py-1 px-2 rounded-md transition-all border-2 border-quad text-base ${
        checkedStatus[index] ? 'bg-quad text-primary' : 'bg-transparent'
      } peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-quad peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-primary`}
    >
      {player.name}
    </span>
  </label>
</div>

补充说明 #

如果使用的Tailwind版本不支持peer-focus-visible状态，可手动给<Field>绑定onFocus、onBlur事件维护一个聚焦状态变量，再给span绑定对应样式即可实现相同效果。修改后组件完全符合WAI-ARIA交互规范，Tab导航、空格切换选中等原生键盘能力都会正常生效，也不会影响原有Formik的表单校验与提交逻辑。

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