microsoft / microsoft/playwright
[Bug]: Elements with an inert="" attribute aren't hidden from the accessibility tree
- 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
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