Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be hi

Blocked aria-hidden on a <input> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. 

1，我们使用element-ui的单选框radio，点击的时候报错如下图的错，究其原因是访问ibility问题：这个错误可能是因为HTML元素<input>上的aria-hidden属性被错误地使用了。aria-hidden属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。如果一个<input>元素被设置为aria-hidden="true"，这可能违反了无障碍性web的最佳实践，因为屏幕阅读器用户依赖这类元素来理解应用的结构和内容

解决办法

1. 自定义指令

// 1.在vue 项目 main.js文件中创建一个全局自定义指令。

Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    let ariaEls = el.querySelectorAll('.el-radio__original');
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden');
    });
  }
});



2.在出现报错的 el-radio-group 组件 上去绑定我们的自定义指令。

  <el-radio-group  v-removeAriaHidden>
        <el-radio :label="1">A</el-radio>
        <el-radio :label="2">B</el-radio>
  </el-radio-group>

 2. 组件中设置

<el-radio-group
    v-model="formData.dimension"
    @input="changeHandle"
    ref="radio"
>
    <el-radio :label="1">男</el-radio>
    <el-radio :label="2">女</el-radio>
</el-radio-group>
 
 
 
mounted() {
    this.$refs.radio.$children.forEach((item) => {
        item.$refs.radio.removeAttribute("aria-hidden");
    });
}