Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be...

问题描述

首先可以明确的是，问题是最近刚刚出现的新问题，之前没有出现过这种报错；不是自身代码问题，应该是web或浏览器相关协议更新导致。

element ui 中的单选框组件 el-radio-group 在近期使用中 报错（有关标签属性-aria-hidden），经测试chrome浏览器会出现这个问题。（在Edge浏览器和360浏览器上均无报错现象）

element ui官网 在chrome浏览器中打开 ， el-radio-group 组件 使用 dome 在控制台中也 会报相同的错误。

报错现象

报错内容：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隐藏部分。

解决方案

虽然报错不影响正常功能。但是终究不好。遇bug则debug

下面是解决放错的方法，直接搬代码 亲测有效。

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

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

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

原理就是移除 其 aria-hidden 报错属性，因为这个属性是后来运行过程中 给标签自动添加上去的，与实际功能无关，移除后不影响功能，并解决报错问题。

这个方法相当于是解决了问题表层现象，如果要彻底解决 估计得等官方调整。