Elements with an inert="" attribute aren't being hidden from the accessibility tree

[thedatadev]

• @testing-library/dom version: 10.4.0
• Testing Framework and version:
  • testing-library/cypress@10.0.1
  • cypress@13.17.0
• DOM Environment:
  • Chrome v138
  • node v22.11.0

Relevant code or config:

Codesandbox URL: https://codesandbox.io/p/sandbox/fwqv27

describe('elements hidden from the accessibility tree', () => {
  it('inert elements should be hidden', () => {
    cy.visit('https://fwqv27.csb.app/', { failOnStatusCode: false });

    // Required to view the codesandbox preview
    cy.findByRole('link', { name: 'Yes, proceed to preview' }).click();

    cy.findByRole('button', { name: 'First', hidden: true }).click();
    cy.findByRole('button', { name: 'Second', hidden: true }).click();
  });
});

What you did:

Tried to target a button nested in a container with an inert attribute with the hidden option set to true.

What happened:

The assertion could not target the button as it isn't recognised as a hidden element.

Reproduction:

Please refer to the codesandbox URL and code snippet above.

Problem description:

According to MDN any inert elements and their children should be hidden from the accessibility tree (see source):

Specifically, inert does the following:
...

• Hides the element and its content from assistive technologies by excluding them from the accessibility tree.

An example scenario from the inert HTML specification (see source):

A Document document is blocked by a modal dialog subject if subject is the topmost dialog element in document's top layer. While document is so blocked, every node that is connected to document, with the exception of the subject element and its flat tree descendants, must become inert.

It also provides a technical example in the following section (see example).

Suggested solution:

We should perform a check within the isSubtreeInaccessible method to see if the element is inside of an inert subtree:

dom-testing-library/src/role-helpers.js

Lines 15 to 29 in 2c57055

	function isSubtreeInaccessible(element) {
	if (element.hidden === true) {
	return true
	}
	if (element.getAttribute('aria-hidden') === 'true') {
	return true
	}
	const window = element.ownerDocument.defaultView
	if (window.getComputedStyle(element).display === 'none') {
	return true
	}
	return false

We could potentially use the .closest() method to determine whether there is an inert ancestor (see docs):

if (element.hasAttribute('inert') || element.closest('[inert]')) {
  return true;
}