microsoft / microsoft/playwright

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

Open
#36,938 8 comments 4 reactions 0 assignees View on GitHub
P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

### Version

1.49.1

### Steps to reproduce

Run the following test:

```js
test("elements hidden from the accessibility tree", async ({ page }) => {
await page.setContent(`


First


Second

`);

// ✅ - 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert#:~:text=Hides%20the%20element%20and%20its%20content%20from%20assistive%20technologies%20by%20excluding%20them%20from%20the%20accessibility%20tree.)):

> 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](https://html.spec.whatwg.org/multipage/interaction.html#modal-dialogs-and-inert-subtrees)):

> A [Document](https://html.spec.whatwg.org/multipage/dom.html#document) document is blocked by a modal dialog subject if subject is the topmost [dialog](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element) element in document's [top layer](https://drafts.csswg.org/css-position-4/#document-top-layer). While document is so blocked, every node that is [connected](https://dom.spec.whatwg.org/#connected) to document, with the exception of the subject element and its [flat tree](https://drafts.csswg.org/css-scoping/#flat-tree) descendants, must become [inert](https://html.spec.whatwg.org/multipage/interaction.html#inert).

It also provides a technical example in the following section ([see example](https://html.spec.whatwg.org/multipage/interaction.html#modal-dialogs-and-inert-subtrees)).

### Environment

```shell
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
```

Contributor guide

Open the contributing guide

Research direction

Start at the getByRole entry point and the accessibility-tree handling used for the includeHidden option, then reproduce the provided test with an inert container. Add coverage for inert="" while preserving the existing aria-hidden behavior; done means the second assertion passes with includeHidden false and both elements remain findable with includeHidden true.

Written by the indexing model from the issue text.

Assessment

Tech stack
playwright, typescript
Domain
accessibility, testing-qa
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
70/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.