ionic-team / ionic-team/ionic-framework

bug: Ionic 8+ produces Blocked aria-hidden on an element because its descendant retained focus

未关闭
#30,240 15 条评论 18 个 reaction 已指派 0 人 在 GitHub 查看
a11y type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

Navigating back and forth with React Router tabs and pages produces the error: Blocked aria-hidden on an element because its descendant retained focus

If you open the StackBlitz for the IonTabs on the docs, it does not show this error message, because the Ionic version of the docs is 7. But, if you upgrade to the latest version of Ionic (8.4.2 at this time) it will start getting the error message.

https://ionicframework.com/docs/api/tabs

Have not tried it with frameworks other than React

Full error is

/home/profile:1 Blocked aria-hidden on an element because its descendant retained focus. The 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. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: a
Ancestor with aria-hidden:

### Expected Behavior

The elements should lose focus before the transition of pages so Chrome does not produce the alert.

### Steps to Reproduce

Go to https://ionicframework.com/docs/api/tabs and open the Stack Blitz. Look in the console as you navigate from Home to Profile and back. Notice no errors.

Upgrade the package json for ionic-react and ionic-react-router. Re-run the application and notice the console started producing logs.

### Code Reproduction URL

https://zt5hvy-amge--5173--495c5120.local-credentialless.webcontainer.io/home/profile

### Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v18.20.3
npm : 10.2.3
OS : Linux 5.0

### Additional Information

Thank you so much for creating a great framework! I love working with it and the HMR makes it a great DX. I have been following Ionic since v1.

I first noticed this on my own project and thought it was an issue with how I was implementing it til I noticed this only happens on Ionic 8+.

贡献指南

打开贡献指南

调研方向

Start with the IonTabs StackBlitz linked in the issue, upgrade ionic-react and ionic-react-router to reproduce the warning, and trace the page-transition focus handling. Confirm the behavior while navigating between Home and Profile, then verify that focused elements are no longer hidden from assistive technology and Chrome no longer reports the aria-hidden alert.

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
accessibility, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。