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

[kevinclarkadstech]

Describe the Bug

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. 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:

Listen now?

Listen now content 159
Profile

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.

Screenshots

No response

Operating System

Windows

Browser

Chrome

Version

133.0.6943.127

Additional Information

No response

[kevinclarkadstech]

Since this is more of a framework Issue, opening this in the ionic-framework repo and closing this.