Element-plus的一个RadioGroup Label 关联告警缺陷

最近在使用Element-plus库做前端开发时，无意发现一个与 Lighthouse 无障碍规则有关的关联告警。作为一个新手，一开始以为是我的代码问题，本来打算放过，但是实在是“强迫症”作祟，还是一步步剥离业务代码排查。最后简化成下面的代码复现出来。

一、现象代码

<script setup lang="ts" name="GroupForm">
import { ref } from "vue";

const gender = ref(1);

const genderProps = { value: "id", label: "label" };

const genderOptions = [
  { id: 1, label: "男" },
  { id: 2, label: "女" },
];
</script>

<template>

  <el-form>
      <el-form-item>
        <el-input></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="gender" :options="genderOptions" :props="genderProps" />
      </el-form-item>
  </el-form>
  
</template>

<style lang="less" scoped></style>

其实就是一个简单表单组件和RadioGroup组件的组合。

二、告警内容

浏览器告警如下图：

三、排查分析

1、如果把“ label="性别" ”这句代码去掉，改为：

<el-form-item prop="gender">

告警消失。

2、或者，如果把

<el-input></el-input>

替换成

<el-text></el-text>

告警也会消失。

3、尝试了各种修复方法，比如用label-for指定radio id，都无效。要消除警告，必须将label单独拎出来，写自定义 CSS，使用复杂的栅格布局来手动和表单的其它组件对齐，这会破坏组件库封装，而且还涉及到响应式布局，大大增加了代码维护成本。

四、最终结论

查阅了相关资料，并问了AI，知道了这是 Element Plus RadioGroup 在 Lighthouse 中存在的 Label 关联警告，应该是Element-plus组件本身存在的缺陷。

因为这不是一个功能性告警，实际上也不影响无障碍体验，所以最后我还是用el-form-item的label属性配合el-radio-group使用，忽略这个告警。虽然不够完美，但减少了代码复杂度和维护成本，也符合官方推荐写法。