问题描述
首先可以明确的是,问题是最近刚刚出现的新问题,之前没有出现过这种报错;不是自身代码问题,应该是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 报错属性,因为这个属性是后来运行过程中 给标签自动添加上去的,与实际功能无关,移除后不影响功能,并解决报错问题。
这个方法相当于是解决了问题表层现象,如果要彻底解决 估计得等官方调整。