Kendo UI Core 中 aria-hidden 属性在 Chrome 和 Edge 下的动画容器问题解析

在 Kendo UI Core 项目中，开发团队发现了一个与无障碍访问（a11y）相关的浏览器兼容性问题。该问题主要影响基于 Chromium 内核的浏览器（如 Chrome 和 Edge），涉及弹出式动画容器中 aria-hidden 属性的使用。

问题背景

当开发人员在使用 Kendo UI Core 的弹出组件时，浏览器控制台会间歇性地出现错误提示。这个错误与动画容器元素的 aria-hidden 属性设置有关，虽然不影响功能实现，但会在开发者工具中产生不必要的警告信息。

技术细节分析

aria-hidden 是 WAI-ARIA 规范中的一个重要属性，用于指示屏幕阅读器等辅助技术是否应该忽略某个元素及其子元素。在 Kendo UI Core 的实现中，这个属性被用于动画容器，目的是在动画播放期间暂时隐藏内容，避免对屏幕阅读器用户造成干扰。

问题出现的根本原因在于 Chromium 引擎对 aria-hidden 属性的严格验证机制。在某些情况下，当这个属性被动态添加或移除时，浏览器会认为可能存在无障碍访问问题，从而触发控制台警告。

解决方案与最佳实践

开发团队经过调查后确认，这个问题在较新版本的 Chrome 浏览器中已经得到修复。对于仍在使用受影响版本的用户，建议采取以下措施：

1. 升级浏览器到最新稳定版本
2. 如果无法立即升级，可以忽略这个警告，因为它不会影响实际功能
3. 在自定义组件实现时，考虑在设置 aria-hidden 属性前检查元素状态

对开发者的启示

这个案例提醒我们，在实现动画效果时需要注意以下几点：

• 动态修改 ARIA 属性时要考虑浏览器兼容性
• 即使功能正常，控制台警告也不应被忽视
• 定期更新依赖库和浏览器可以避免许多潜在问题

总结

Kendo UI Core 团队持续关注这类浏览器兼容性问题，确保框架在各种环境下都能提供良好的开发体验和用户体验。虽然这个问题已经被标记为低优先级并已解决，但它展示了开发团队对细节的关注和对无障碍访问的重视。