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);
});