Vue项目实战：ElementUI中el-radio报错‘Blocked aria-hidden‘的3种解决方案（含动态数据场景）

Vue项目实战：ElementUI中el-radio报错'Blocked aria-hidden'的深度解决方案

在Vue项目中使用ElementUI的el-radio组件时，不少开发者会遇到控制台报出Blocked aria-hidden on an element because its descendant retained focus的警告。这个看似无害的提示背后，实际上隐藏着Web可访问性(A11Y)规范与组件内部实现的微妙冲突。本文将深入剖析问题根源，并提供三种不同维度的解决方案，特别针对动态数据加载这一常见场景。

1. 问题诊断与原理分析

aria-hidden是WAI-ARIA规范中用于指示屏幕阅读器是否忽略某个元素的属性。当ElementUI的el-radio组件被点击时，其内部实现会临时将焦点保留在隐藏的原始input元素上，这与aria-hidden的语义产生了冲突。

典型错误场景特征：

• 控制台警告仅在交互时触发
• 动态加载的选项可能出现持续性警告
• 组件功能正常但影响调试体验

通过Chrome开发者工具的Accessibility面板检查，可以发现.el-radio__original这个隐藏的input元素同时具有aria-hidden="true"和tabindex="0"这两个相互矛盾的属性：

<input 
  class="el-radio__original" 
  type="radio" 
  aria-hidden="true" 
  tabindex="0"
  <!-- 其他属性 -->
>

这种设计矛盾正是触发浏览器警告的根本