aria-hidden-around-something-focusable

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when aria-hidden="true" wraps something a keyboard can still tab to.

aria-hidden takes a subtree out of the accessibility tree and does NOT take it out of the tab order — nothing about it touches focus. So the control inside stays tabbable while ceasing to exist for the software that would announce it.

What that does to a reader is worse than either half alone: they press Tab, focus moves, and their screen reader says nothing at all, because there is no node left to describe. They have no way to find out where they are or what Enter would do.

Reach for inert — the platform added it for exactly this, and it removes the subtree from the tab order and from the accessibility tree together:

<div inert>…</div>

Where inert is not available, tabIndex={-1} on every control inside does the focus half by hand — which is a list that has to be kept in step, and is why inert exists.

This is the commonest thing to get wrong about a modal: the dialog opens, the page behind it is hidden with one attribute, and the first Tab takes the reader out of the dialog and into a void.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.