testing-library / testing-library/dom-testing-library
ByRole queries don't support <section> as region with only a `title`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
@testing-library/domversion: v8.14.0.- Testing Framework and version: N/A
- DOM Environment: Chrome 103.0.5060.114 (Official Build) (64-bit)
Relevant code or config:
<section title="My Section">
some text
</section>
What you did:
screen.getByRole('region')
What happened:
TestingLibraryElementError: Unable to find an accessible element with the role "region"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, <script />, <style />
<body
data-gr-ext-installed=""
data-new-gr-c-s-check-loaded="14.1067.0"
>
<div
id="root"
>
<section
title="My Section"
>
some text
</section>
</div>
Reproduction:
https://codesandbox.io/s/bold-bush-64s8n0?file=/src/App.js
Problem description:
<section> elements should have an internal browser role of section until you give them an accessible name; in which case, they implicitly have the role region:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
Implicit ARIA role region if the element has an accessible name, otherwise no corresponding role
Potential accessibility names are either an alt label, ARIA label, title, or the text content for certain elements. For whatever reason, Testing Library is not treating this <section> as a 'region' when it has an accessible name. Works fine for aria-label and aria-labelledby but not for title.
Suggested solution:
Either fix the aria-query library or @testing-library/dom so it includes proper support for accessibility names using the HTML title attribute. Not sure if this is limited to <section> or if it happens for other elements too.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the CodeSandbox example with screen.getByRole('region'), then trace the role handling in @testing-library/dom and the aria-query library, comparing title with aria-label and aria-labelledby. Done means a section with a title is found as a region while an unnamed section is not, without breaking the existing naming behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100