[Bug]: getByRole() doesn't find <section> elements with title attribute

[developenguin]

Version

1.44.1

Steps to reproduce

1. Clone https://github.com/developenguin/playwright-region-query
2. run npm install
3. run npx playwright test

Expected behavior

I expect page.getByRole('region', { name: 'WWF History' }) to find the <section title="WWF History"> element.

Actual behavior

The element is not found.

Additional context

Screenshot of the DOM

Environment

System:
    OS: Linux 6.5 Linux Mint 21.3 (Virginia)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900HX
    Memory: 51.63 GB / 62.50 GB
    Container: Yes
  Binaries:
    Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.3/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.44.1 => 1.44.1

[pavelfeldman]

You need to set an explicit aria label as per
https://www.w3.org/TR/wai-aria-1.2/#region
Also see
https://www.w3.org/WAI/GL/wiki/Using_HTML5_section_element

[pavelfeldman]

(It might be easier to use getByTitle in your case).

[developenguin]

I did indeed get it working using getByTitle. However, since Chromium does report the name property in the Accessibility properties for the section, it was my expectation that getByRole would find it based on that:

But I guess that's not the case. I'll use aria-label then, thank you for your response!

[pavelfeldman]

Chrome will sometimes step away from the spec and use accessible name heuristics. We'll check why they did it, but we seem to be correct as per the spec on this one.

[pavelfeldman]

Closing as per above, please feel free to open a new issue if this does not cover your use case.