当前位置:   article > 正文

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

element because the element that just received focus must not be hidden from

问题描述

首先可以明确的是,问题是最近刚刚出现的新问题,之前没有出现过这种报错;不是自身代码问题,应该是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');
    });
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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>
  • 1
  • 2
  • 3
  • 4

Alt

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/994296
推荐阅读
相关标签
  

闽ICP备14008679号