InContextTools dialog triggers aria-hidden warning due to focus conflict

[wouterdebie]

Description

When using InContextTools from @tolgee/web/tools (imported directly to work in production builds), clicking on a translatable element to open the in-context editing dialog produces the following browser warning:

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.

Details

• Element with focus: <div.MuiDialog-container MuiDialog-scrollPaper tolgee-dev-tools-ekeie0>
• Ancestor with aria-hidden: <div#__tolgee_dev_tools>

It appears the #__tolgee_dev_tools container has aria-hidden set, but when the MUI dialog inside it receives focus, the browser flags the conflict.

Suggested fix

Either:

1. Remove aria-hidden from #__tolgee_dev_tools when the dialog is open
2. Use the inert attribute instead of aria-hidden on the container

Environment

• @tolgee/web v6.3.0
• @tolgee/react v6.3.0
• Chrome 133
• Using InContextTools from @tolgee/web/tools with the Tolgee browser extension

[Barush]

Dear @wouterdebie,
thank you for letting us know. I will add it to the maintenance logs and hopefully we will get to that soon.