el-radio 点击报错 Element with focus: inputAncestor with aria-hidden....

丁先生3202024-10-20 11:48

一、序言

浏览器版本影响的问题（与代码无关，可能是web或浏览器相关协议更新导致），不影响功能的使用.

翻译：元素上的Blocked aria-hidden，因为刚刚接收焦点的元素不能对辅助技术用户隐藏。避免在焦点元素或其祖先元素上使用aria-hidden。考虑使用惰性属性，这也会阻止焦点。有关更多详细信息，请参见 WAI-ARIA规范的aria隐藏部分。

二、配置全局方法 main.js

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

三、使用

<el-raido v-model="radio" v-removeAriaHidden></el-radio>

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