el-radio 和 el-cascader 选择报错 Blocked aria-hidden on a...

前言

这个问题的出现不是代码问题，应该是web或浏览器相关协议更新导致。element ui 中的单选框组件 el-radio-group 在近期使用中 报错（有关标签属性-aria-hidden），经测试chrome浏览器会出现这个问题。（在Edge浏览器和360浏览器上均无报错现象）。 在官网使用demo的时候也会有这个错误。

报错内容：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…

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

这个错误虽然不影响正常使用，但是看到控制台爆红，一点都忍受不了，直接上代码：

解决办法：

方法一：针对只使用过el-radio标签的页面：在main.js添加指令removeAriaHidden。el-cascader级联标签则不适用。

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

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

方法二：css去除aria-hidden

这个方法对于el-radio和el-cascader都适用，但是在样式上会有问题，按钮外廓会有模糊，此时需要设置一下对应的样式。

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

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

到此完美解决，注意针对报错位置去应用，不要写全局样式，感谢点赞。