feat(ByRole): Treat inert subtrees as hidden in role queries

[tf]

What:

Exclude inert elements in role queries by default.

Why:

Align behavior with what is described here https://html.spec.whatwg.org/multipage/interaction.html#inert-subtrees:

Inert nodes generally cannot be focused, and user agents do not expose the inert nodes to accessibility APIs or assistive technologies.

How:

Check presence of inert attribute. Since jsdom does not yet fully support the inert attribute, we use element.hasAttribute('inert') instead of element.inert.

Checklist:

• Documentation added (feat(ByRole): Treat inert subtrees as hidden in role queries testing-library-docs#1504)
• Tests
• TypeScript definitions updated N/A
• Ready to be merged

fixes #1364

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2add312:

Sandbox	Source
react-testing-library-examples	Configuration

[eps1lon]

I did a bit more reading and seems like it's not safe to bail out on the subtree since nested dialog can escape inertness:

Modal s generated with showModal() escape inertness, meaning that they don't inherit inertness from their ancestors, but can only be made inert by having the inert attribute explicitly set on themselves.
-- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert

We need a bit more involved tests where you have <div inert><dialog /></div> and have showModal() called on the inner <dialog>. That dialog and all of its content needs to be considered accessible.

But then also even more involved tests where you nest two dialogs that have both been opened and only the parent dialog is explicitly inert.

[tf]

In this case, this effort is probably blocked on JSDOM's missing dialog support. Far as I understand, by default, showModal() turns everything outside of the top layer inert without actually applying the inert attribute to any element. So while it is true, that showModal can be used to escape inertness, I'd argue that the 90% case is either using the inert attribute explicitly without showModal or relying on the implicit inertness resulting from showModal. Both of those cases would be compatible with the proposed change.

One other option to make this safe might be to introduce a config option to explicitly opt in to treating inert subtrees as hidden. But this also adds complexity of course.

[eps1lon]

This library isn't just for JSDOM but any DOM implementation so it must be implemented for the DOM not JSDOM.

[tf]

Makes sense. I'll close this PR then.