testing-library / testing-library/dom-testing-library

*ByRole form seems not to find <form /> elements

Open
#1,293 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.3k
Forks
474
PR merge metrics
No merged PRs in 30d

Description

Prior issue #1021

Testcase:

it(`testcase`, async () => {
    render(
        <div>
            <h1>helloworld</h1>
            <form>
                <h2>content</h2>
                <label htmlFor="tinput">hello</label>
                <input type="text" id="tinput" />
            </form>
        </div>
    )

    expect(screen.getByRole("form")).toBeInTheDocument()
})

Result:

 FAIL  src/test/foo.test.js
  ● testcase

    TestingLibraryElementError: Unable to find an accessible element with the role "form"

    Here are the accessible roles:

      heading:

      Name "helloworld":
      <h1 />

      Name "content":
      <h2 />

      --------------------------------------------------
      textbox:

      Name "hello":
      <input
        id="tinput"
        type="text"
      />

      --------------------------------------------------

    Ignored nodes: comments, script, style
    <body>
      <div>
        <div>
          <h1>
            helloworld
          </h1>
          <form>
            <h2>
              content
            </h2>
            <label
              for="tinput"
            >
              hello
            </label>
            <input
              id="tinput"
              type="text"
            />
          </form>
        </div>
      </div>
    </body>

      15 |   );
      16 |
    > 17 |   expect(screen.getByRole('form')).toBeInTheDocument();
         |                 ^
      18 | });
      19 |

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at node_modules/@testing-library/dom/dist/query-helpers.js:95:19
      at Object.getByRole (src/test/foo.test.js:17:17)
  • @testing-library/dom version: 9.3.4
  • Testing Framework and version: jest 29.7.0
  • DOM Environment: jsdom 20.0.0

In the previously mentioned bug, @eps1lon explained that this was following the roles from html-aam. However it looks like they've been updated, see https://www.w3.org/TR/core-aam-1.2/#role-map-form-nameless. It looks like that a form element without an accessible name gets a computed role form too.
However they mention that it shouldn't be exposed as a landmark. Is that where my interpretation is wrong?

Thanks for your feedback!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the testcase in src/test/foo.test.js with @testing-library/dom 9.3.4, then compare the observed form role behavior with the linked Core-AAM form role mapping. Check the existing role-computation tests and add a regression case if the specification supports exposing a nameless form. Done means the behavior and test expectations agree with the applicable accessibility mapping.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.