报错：Blocked aria-hidden on a ＜input＞ element because the element that just...

一、前言

• 这个bug是最近才出现的，之前自己也这样写也没有问题，今天改需求就发现了，网上说是chrome浏览器升级出现的问题
• 报错信息：Blocked aria-hidden on a 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 w3c.github.io/aria/#aria-…. <input type=​"radio" aria-hidden=​"true" tabindex=​"-1" autocomplete=​"off" class=​"el-radio__original" value=​"true">​

二、产生原因

• 监听 el-radio-group的值，点击切换

三、解决bug

• 参考文章

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

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

• 在出现报错的 el-radio-group 组件上绑定自定义指令

<el-radio-group v-model="ruleForm.isLimit" v-removeAriaHidden>
  <el-radio :value="2" :label="false" size="large">否</el-radio>
  <el-radio :value="1" :label="true" size="large">是</el-radio>
</el-radio-group>