解决elementui使用el-radio单选组件aria-hidden报错:Blocked aria-hidden on an element because its descendant retained focus.

报错详情

vue项目使用element-ui中的radio,切换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.

报错原因

aria-hidden属性用于隐藏元素及其所有子元素,使其不被屏幕阅读器等辅助技术所访问。然而,当使用aria-hidden隐藏的元素或其祖先元素中包含了当前获得焦点的元素时,就会出现问题,因为这可能使得辅助技术的用户无法得知哪个元素是当前焦点所在。

解决方案

/* 解决浏览器报错:Blocked aria-hidden on an element because its descendant retained focus */
input[aria-hidden="true"]{
    display: none !important;
}

/deep/ .el-radio__original {
  display: none !important; /* 隐藏原生 radio 输入,但仍然允许交互 */
}
 
/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容