[Bug]: Elements with an inert="" attribute aren't hidden from the accessibility tree

[thedatadev]

Version

1.49.1

Steps to reproduce

Run the following test:

test("elements hidden from the accessibility tree", async ({ page }) => {
  await page.setContent(`
        <div aria-hidden="true">
            <button type="button">First</button>
        </div>

        <div inert="">
            <button type="button">Second</button>
        </div>
    `);

  // ✅ - This passes because `includeHidden` is `false` by default and ignores elements nested
  //      within an ancestor that has `aria-hidden` set to `true`.
  await expect(page.getByRole("button", { name: "First" })).toHaveCount(0);

  // ❌ - This fails because the `inert` attribute isn't being recognised as something that
  //      should be hidden from assistive technologies.
  await expect(page.getByRole("button", { name: "Second" })).toHaveCount(0);

  // ✅ - This passes because `includeHidden` recognises `[aria-hidden="true"]` as a hidden element.
  await expect(
    page.getByRole("button", { name: "First", includeHidden: true })
  ).toHaveCount(1);

  // ✅ - This passes because specifying `includeHidden: true` includes both hidden and non-hidden elements.
  await expect(
    page.getByRole("button", { name: "Second", includeHidden: true })
  ).toHaveCount(1);
});

Expected behavior

The second assertion in the code snippet above should pass i.e. the getByRole method should recognise that the button nested inside an inert container is hidden from the accessibility tree if the includeHidden option is false.

Actual behavior

The second assertion above doesn't pass.

Additional context

According to MDN (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).

Environment

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 83.08 MB / 16.00 GB
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.1.2 - ~/.volta/bin/pnpm
  IDEs:
    VSCode: 1.102.3 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash

[philwolstenholme]

This caught us out today as React Aria now makes more use of inert instead of aria-hidden: #36938

[OliverJAsh]

I think modal <dialog>s have the same issue. If I understand correctly, the modal background is considered inert.

import { expect, test } from '@playwright/test';

test('elements hidden from the accessibility tree', async ({ page }) => {
  await page.setContent(`
    <button>Download</button>
    <dialog id="modalDialog"><button>Download</button></dialog>
    <script>
        modalDialog.showModal();
    </script>
  `);

  // Just making sure the dialog is open.
  await page.waitForTimeout(1000);

  // ❌ - This fails because the modal background isn't being recognised as something that
  //      should be hidden from assistive technologies.
  await expect(page.getByRole('button', { name: 'Download' })).toHaveCount(1);
});

[OliverJAsh]

It looks like this issue should have been marked as fix following #36947. Is that right?

@agg23 Do you know if this also fixes the modal issue mentioned above?

Edit: I just tested and I can still reproduce both issues on 1.56.0.

[agg23]

@OliverJAsh we reverted this in #37137 and are not likely to revisit it.

[bacher]

Hello, for me it's not clear why the mentioned above fix was reverted without any plans to actually fix the underlaying problem.
I only see the message about fact that it's getting reverted without any reason. Maybe I'm missing something? And why it's not likely to be revisited?

I'm using RAC and after recent updated they switched from aria-hidden="true" attribute to inert attribute. Which breaks quite a big portion of playwright tests in my company.

inert attribute is not just another semantic/accessibility attribute anymore, it's actually implemented on browser level now, and affects user flow, your can check this example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_att_inert

The buttons, inputs, links, etc, are getting effectively disabled, they can't be focused nor clicked. So in my opinion it's much stronger evidence that inert should be treated in the same way as aria-hidden="true" attribute.