问题描述

使用vue+elementui开发时，用到el-form中的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.
Element with focus: input
Ancestor with aria-hidden:

报错原因

翻译后发现是el-radio上面的 aria-hidden 属性导致，移除属性或者添加以下样式即可解决

解决方案1：使用样式解决

.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;
}

解决方案2：使用vue自定义指令解决

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

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

这样即可解决问题

参考地址：

掘金文章–