Ionic Framework 中 ion-popover 组件的无障碍访问问题解析

背景介绍

Ionic Framework 是一个流行的跨平台移动应用开发框架，它提供了丰富的 UI 组件库。其中，ion-popover 是一个常用的弹出式组件，用于在用户界面中显示临时内容。然而，在最新版本的 Chrome 浏览器中，开发者报告了一个与无障碍访问（Accessibility）相关的问题。

问题现象

当使用 ion-popover 组件时，点击背景遮罩（backdrop）关闭弹窗时，Chrome 浏览器控制台会显示以下错误信息：

Blocked aria-hidden on a <ion-backdrop> element because the element that just received 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.

技术分析

问题根源

这个问题的根本原因在于 ion-backdrop 组件同时设置了两个相互冲突的属性：

1. tabindex="-1" - 使元素可以被聚焦（虽然不能通过 Tab 键访问）
2. aria-hidden="true" - 将元素从无障碍访问树中隐藏

根据 WAI-ARIA 规范，一个可聚焦的元素不应该被隐藏，因为这会导致屏幕阅读器用户无法感知到当前聚焦的元素。

浏览器兼容性

这个问题主要出现在 Chrome 128 及更高版本中，因为 Chrome 团队加强了对无障碍访问规范的强制执行。其他浏览器如 Firefox 和 Safari 目前没有报告此问题。

解决方案

官方修复方向

Ionic 团队已经确认了这个问题，并计划通过以下方式解决：

1. 移除 ion-backdrop 上的 aria-hidden 属性
2. 或者使用 inert 属性替代 aria-hidden，因为 inert 属性既能防止聚焦，又不会违反无障碍访问规范

临时解决方案

对于急需解决问题的开发者，可以考虑以下临时方案：

1. 在 Angular 项目中添加 CUSTOM_ELEMENTS_SCHEMA：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

2. 自定义样式覆盖（不推荐，可能影响其他功能）：

ion-backdrop {
  display: none !important;
}

最佳实践建议

1. 定期更新 Ionic Framework 到最新版本，以获取官方修复
2. 在进行无障碍访问测试时，使用多种浏览器和辅助技术工具
3. 关注 Chrome 浏览器更新日志，了解其对无障碍访问规范的执行变化

总结

这个问题的出现反映了现代 Web 开发中对无障碍访问越来越重视的趋势。作为开发者，我们需要更加关注组件的无障碍访问特性，确保应用对所有用户都可用。Ionic 团队已经意识到这个问题，并将在未来的版本中提供官方修复方案。

对于企业级应用开发，建议建立完善的无障碍访问测试流程，确保应用符合 WCAG 标准，避免类似问题的出现。