vue+element项目中报错Blocked aria-hidden on an element because its descendant retained focus. The focus m

问题描述

在vue+element项目开发过程中 有一个页面使用了el-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

解决方式

浏览器检测策略导致

//lang="scss"
/deep/ .el-radio__original {
  display: none !important;
}
 
/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}

添加后完美解决

### VbenAdmin Vue 弹窗 Blocked aria-hidden 错误修复方案 在处理 `Blocked aria-hidden` 的错误时,核心在于理解该错误的原因以及如何通过调整代码逻辑来满足无障碍设计标准 (ARIA) 要求。以下是针对此问题的具体分析与解决方案。 #### 1. **错误原因** 当页面中的某个元素被设置为 `aria-hidden="true"` 后,其子节点仍保留焦点,则会触发 `Blocked aria-hidden` 的警告或错误。这是由于辅助功能技术(如屏幕阅读器)无法正确解析隐藏状态下的可聚焦内容[^1]。 对于 VbenAdmin 中的 Vue 弹窗组件而言,可能是因为某些情况下弹窗关闭后未及时移除焦点或者存在多余的 DOM 结构干扰所致。 --- #### 2. **解决方案** ##### 方法一:修改 CSS 样式 可以通过覆盖默认样式的方式解决此问题。具体来说,在定义单选框或其他交互控件时,确保隐藏输入框的同时不会影响到 ARIA 属性的行为: ```css /* 隐藏原生 radio 输入 */ .el-radio__input { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } ``` 上述方法利用了 `clip` 和 `pointer-events` 来实现视觉上的隐藏效果,而无需依赖于 `display: none` 或者直接操作 `aria-hidden` 属性[^2]。 --- ##### 方法二:动态管理 ARIA 属性 如果需要更灵活地控制 ARIA 行为,可以在 Vue 生命周期钩子函数中手动调整相关属性值。例如: ```javascript export default { mounted() { this.$nextTick(() => { const radios = document.querySelectorAll('.el-radio'); radios.forEach((radio) => { if (!radio.querySelector('input').disabled) { radio.setAttribute('tabindex', '-1'); // 移除不必要的 tab 焦点支持 } }); }); }, }; ``` 这段代码的作用是在组件挂载完成后遍历所有的 `.el-radio` 元素,并为其内部不可见的 `<input>` 设置合理的 tabindex 值,从而避免潜在冲突。 --- ##### 方法三:升级框架版本 考虑到原始问题可能是由第三方库(Element UI 或其他依赖项)引发的兼容性缺陷,建议尝试将所使用的前端框架及其插件更新至最新稳定版。通常开发者社区会在新版本发布过程中修复已知漏洞并改进用户体验。 执行如下命令完成包升级: ```bash npm install element-ui@latest --save ``` 注意检查官方文档确认是否有额外配置需求。 --- #### 3. **验证修正成果** 无论采用哪种方式解决问题之后都应进行全面测试以确保改动有效且不影响原有业务流程。推荐重点关注以下几个方面: - 不同浏览器环境下的表现一致性; - 辅助工具能否正常读取界面信息; - 用户交互体验是否受到影响。 --- ### 总结 综合以上三种策略可以看出,合理运用现代 Web 开发技巧能够很好地应对因 ARIA 协议变化带来的挑战。实际应用时可根据具体情况选择最合适的手段加以实施。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值