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

问题出在 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,推动修复原生组件的无障碍问题。
相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v8 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗9 小时前
React学习(十二)
javascript·学习·react.js
无羡仙9 小时前
Webpack 背后做了什么?
javascript·webpack
老华带你飞10 小时前
校园交友|基于SprinBoot+vue的校园交友网站(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·校园交友网站
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员