Blocked aria-hidden on an element because its descendant retained focus.

洗发水很好用2025-06-05 18:02

问题出在 Element UI 的 el-table 组件 全选功能上，这是一个常见的无障碍（a11y）问题 。这个错误提示与网页 accessibility（无障碍访问）相关，涉及 aria-hidden 属性的不当使用。

问题原因分析

1. Element UI 全选功能的结构问题

el-table 的全选功能通常由表头中的一个复选框触发，其结构可能类似：
html 复制代码
```
<el-table>
  <el-table-column type="selection"></el-table-column> 
</el-table>
```
当你点击全选时，组件内部可能错误地将 aria-hidden 应用于包含复选框的元素，导致：
- 复选框（可聚焦元素）被 aria-hidden 隐藏。
- 辅助技术（如屏幕阅读器）无法感知焦点变化。

2. Vue 组件渲染与 ARIA 冲突

Element UI 是 Vue 组件库，动态渲染时可能错误处理 ARIA 属性。
例如，某些状态下（如全选后），组件可能添加了 aria-hidden="true" 到不该添加的元素上。

临时解决方案（生产环境快速修复）

使用指令强制修改 DOM

创建自定义指令，在组件渲染后移除错误的 aria-hidden：

javascript

javascript 复制代码

// main.js
Vue.directive('fix-aria-hidden', {
  inserted(el) {
    const checkboxes = el.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      if (checkbox.closest('[aria-hidden="true"]')) {
        checkbox.closest('[aria-hidden="true"]').removeAttribute('aria-hidden');
      }
    });
  }
});

vue

html 复制代码

<!-- 使用指令 -->
<el-table v-fix-aria-hidden>
  <!-- 表格内容 -->
</el-table>

四、验证修复效果

总结

核心问题 ：Element UI 的 el-table 全选功能在某些场景下错误应用 aria-hidden 导致焦点冲突。
推荐方案：优先升级组件版本，若问题仍存在则通过自定义表头或 CSS 修复。
长期建议：向 Element UI 官方提交 issue，推动修复原生组件的无障碍问题。