Skip to content

fix: support inert attribute and <search> element in role queries#1376

Open
mixelburg wants to merge 1 commit intotesting-library:mainfrom
mixelburg:fix/inert-attribute-support
Open

fix: support inert attribute and <search> element in role queries#1376
mixelburg wants to merge 1 commit intotesting-library:mainfrom
mixelburg:fix/inert-attribute-support

Conversation

@mixelburg
Copy link
Copy Markdown

Summary

This PR addresses two related issues in role-based queries:

1. inert attribute not hiding elements from a11y tree (#1364)

Elements with the inert attribute (and their descendants) should be excluded from the accessibility tree. Per the HTML spec, inert makes the element and all its contents hidden from assistive technologies.

Fix: Added a check in isSubtreeInaccessible that returns true when:

  • The element itself has the inert attribute, OR
  • The element has an ancestor with the inert attribute (via element.closest('[inert]'))

2. <search> element not found by getByRole('search') (#1359)

The <search> HTML element has an implicit ARIA role of search per the HTML-ARIA spec, but aria-query@5.3.0 does not include this mapping in its elementRoles map.

Fix: Added a fallback in getImplicitAriaRoles that returns [search] for <search> elements. This workaround can be removed once aria-query publishes a version that includes this mapping (the mapping exists in aria-query's main branch but is not yet released).

Test plan

  • Added test case for <div inert /> to the existing shouldExcludeFromA11yTree test matrix
  • Added test case for elements nested inside an inert subtree
  • Added test case for <search> element implicit role
  • All 669 existing tests pass
  • Full test suite passes: 29 passed, 29 total

Related issues

- Add inert attribute check to isSubtreeInaccessible, so elements
  inside inert subtrees are correctly excluded from the a11y tree.
  Fixes testing-library#1364.
- Add <search> element implicit role mapping (search), since
  aria-query 5.3.0 does not yet include this HTML-ARIA mapping.
  Fixes testing-library#1359.
@codesandbox-ci
Copy link
Copy Markdown

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 7451bae:

Sandbox Source
react-testing-library-examples Configuration

@philwolstenholme
Copy link
Copy Markdown

Nice! I think I'll have a use case for this soon so might try it out via patching the main package

@philwolstenholme
Copy link
Copy Markdown

philwolstenholme commented May 2, 2026

Although have you seen the history on #1366? @eps1lon had some concerns about how dialog elements handle inert, so it's not as simple as just 'anything inside an inert parent is also inert', unfortunately.

That said, for my use case this will probably be fine, so I'll probably still apply the patch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Elements with an inert="" attribute aren't being hidden from the accessibility tree getByRole('search') does not find <search />

2 participants