如何修复ESlint"A form label must be associated with a control"报错

报错核心原因 #

这个报错来自eslint-plugin-jsx-a11y的label-has-associated-control规则，你写的htmlFor和id值匹配本身没有问题，触发报错的根源是代码里存在不符合HTML规范的属性，导致规则判定你绑定的不是有效可关联的表单控件：

• readOnly属性只对text、password、search、url、tel、email这类文本输入型控件生效，在radio、checkbox类型的input上写readOnly完全无效，属于不符合规范的写法。规则会把带这类无效属性的radio识别为非有效表单控件，自然不会认可和label的关联关系。
• 第一个label标签上写了type="text"，<label>原生没有type属性，这类冗余无效属性在部分旧版本规则里会干扰校验逻辑。

修复步骤 #

• 替换radio上的无效属性：如果需要固定选中状态禁止用户操作，将readOnly替换为disabled；如果不想显示禁用样式，只是阻止点击切换行为，用onClick={e => e.preventDefault()}替代readOnly即可。
• 删除第一个label上冗余的type="text"属性。
• 如果修改后仍报错，检查ESLint配置文件中的对应规则，确保校验逻辑符合预期，标准可用配置如下：

// .eslintrc 对应规则配置
rules: {
  'jsx-a11y/label-has-associated-control': [
    'error',
    {
      assert: 'either', // 支持两种关联方式：htmlFor绑定、label直接嵌套控件
      depth: 3 // 允许label嵌套最多3层DOM节点查找关联控件
    }
  ]
}

修复后参考代码 #

{/* 如果不需要禁用，只是做展示用，可给input加 aria-hidden="true" 标记为无需无障碍读取 */}
<input disabled type="radio" name="slider-2" id="s1-2" checked />
<input disabled type="radio" name="slider-2" id="s2-2" />
<input disabled type="radio" name="slider-2" id="s3-2" />

<label htmlFor="s1-2" id="slide1-2">
  <div className="slider-image">
    <img src={SecendQadroFirst} alt="qadro" />
  </div>
</label>
<label htmlFor="s2-2" id="slide2-2">
  <div className="slider-image">
    <img src={SecendQadroSecend} alt="qadro" />
  </div>
</label>
<label htmlFor="s3-2" id="slide3-2">
  <div className="slider-image">
    <img src={SecendQadroThird} alt="qadro" />
  </div>
</label>

补充：如果这些radio只是轮播组件的视觉状态指示器，不需要被屏幕阅读器识别，可以直接给input加aria-hidden="true" tabIndex={-1}，标记为装饰性节点，也不会触发规则报错。

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