Dom-testing-library: Not able to find fieldset element using `getByRole('group', { name: 'Name'})`

Created on 15 May 2020  路  3Comments  路  Source: testing-library/dom-testing-library
  • @testing-library/dom version: "^7.2.2"
  • Testing Framework and version:

    • @testing-library/react version: "^10.0.4"


  • DOM Environment: "jest-environment-jsdom-sixteen": "^1.0.3"

Node version: 13.7.0

Relevant code or config:

test("fieldset accessible name", () => {
  const { getByRole } = render(
    <>
      <fieldset>
        <legend>My Legend</legend>
        <label>
          My Input
          <input type="text" />
        </label>
      </fieldset>
    </>
  );

  const fieldset = getByRole("group", { name: /my legend/i });
  expect(within(fieldset).getByLabelText(/my input/i)).not.toBeNull();
});

What you did:

Following the suggested guidance from Which query should I use FAQ
I am trying to get a fieldset element by its role and name.

What happened:

Unable to find an accessible element with the role "group" and name `/fieldset/i`

Here are the accessible roles:

  document:

  Name "":
  <body />

  --------------------------------------------------
  group:

  Name "":
  <fieldset />

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

  Name "My Input":
  <input
    type="text"
  />

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

<body>
  <div>
    <fieldset>
      <legend>
        Legend
      </legend>
      <label>
        My Input
        <input
          type="text"
        />
      </label>
    </fieldset>
  </div>
</body>

Reproduction:

https://codesandbox.io/s/fieldset-accessible-name-69lhg?file=/src/__tests__/App.test.js

Problem description:

  1. Trying to get a fieldset by its role: "group", the accessible name for the "group" is not associated with the legend element.
  --------------------------------------------------
  group:

  Name "":
  <fieldset />

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

Suggested solution:

  1. As described in WAI-ARIA Name with legend:
    > The HTML fieldset element can be used to group form controls, and the legend element can be used to give the group a name.

Consider assigning legend element as accessible name for a fieldset.

bug released
Source
picture ricardozv28

All 3 comments

The fix is likely similar to #570. Instead of the <caption> for a <table> we should use the <legend> for a <fieldset>.

eps1lon picture eps1lon on 15 May 2020

:tada: This issue has been resolved in version 7.5.7 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

kentcdodds picture kentcdodds on 18 May 2020
👍1

For future viewers the <legend> needs to be the first child of the <fieldset> per MDN.

A聽fieldset聽whose first child is this聽legend聽element

nathanforce picture nathanforce on 21 Aug 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

babramczyk picture babramczyk  路  4Comments
nazanine picture nazanine  路  3Comments
rbrtsmith picture rbrtsmith  路  4Comments
ysgk picture ysgk  路  3Comments
eliyaomid picture eliyaomid  路  3Comments