切换el-radio导致报错Blocked aria-hidden on an element because its descendant retained focus.

问题描述

切换el-radio报错：Blocked aria-hidden on an element because its descendant retained focus. The 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.

---

原因分析：

el-radio上面的属性aria-hidden导致的，移除这个属性可以解决问题了。

---

解决方案：

方法一(使用命令式解决)：

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

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

2. 在出现报错的 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>

方法二（使用css解决）：

.el-radio input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

参考

作者：yizhiyang
作者：醒日是归时