Unable to find an accessible element with the role "form" #474

ruscal · 2020-03-11T11:39:40Z

DOM Testing Library version: 9.5.0 (react library)
node version: Whatever CodeSandbox runs on for React sandboxes
npm (or yarn) version: Whatever CodeSandbox runs on for React sandboxes

Relevant code or config:

import React from "react";
import { render } from "@testing-library/react";

const Form = () => (
  <div>
    <form id='form1' title='form title'>
      <p>Hi</p>
    </form>
  </div>
)

const wrapper = render(<Form />);

wrapper.getByRole('form');

What you did:

Trying to select the form element by role. This also fails with findByRole.

What happened:

Error
Unable to find an accessible element with the role "form"

Here are the accessible roles:

  document:

  Name "":
  <body />

Adding role='form' to form element does find the form element but should not be required.

Reproduction:

https://codesandbox.io/s/falling-surf-0br51

Looks like bug was introduced in 16.4.1 as 16.4.0 works fine (with 9.4.1 version of @testing-library/react):
https://codesandbox.io/s/dom-testing-library-template-kzorw

Problem description:

Fails tests that are asserting that an accessible form is in the DOM.

Suggested solution:

aria-query looks to still be exporting form in the roles map so that's probably not the issue. Other than that not had enough time to dig further.

The text was updated successfully, but these errors were encountered:

eps1lon · 2020-03-11T12:34:06Z

This is actually intended by spec. A <form> element needs an accessible name to have the form role. So you need <form aria-label="form" /> or <form aria-labelledby="form-label-element-id" />.

Though we could extend the error message to add a hint if a role is queried where an element needs an accessible name to have that role.

ruscal · 2020-03-11T13:09:06Z

So it's changed from title being the semantic equivalent to name then. I've verified that changing to using name works fine.

Thanks for your help!

SEE testing-library/dom-testing-library#474

sunpietro · 2020-09-22T13:19:55Z

In my case, neither name nor aria-label work when running screen.getByRole('form').

…omponent This change is also needed by #1484: - the "role" attribute makes the alert "searchable" by screen.getByRole() - the "aria-label" attribute makes the form "searchable" by screen.getByRole() (testing-library/dom-testing-library#474 (comment)) Part of #1493

Nargonath · 2022-08-04T12:07:37Z

If I have:

<form name="profile" action="#" >
</form>

It works when querying with screen.getByRole("form") however it doesn't work when doing screen.getByRole("form", { name: "profile" });. I have to add an aria-label="profile" to the form for the name option to work. Is this normal? I thought the name property was enough to consider the form accessible.

alexkrolick · 2022-08-04T15:08:39Z

name is used for form submission to identify the field names. It's not user-accessible content like a label tag or aria-label.

Nargonath · 2022-08-04T15:16:01Z

@alexkrolick When you run screen.getByRole("form") on:

<form action="#"></form>

getByRole throws because the form only has role="form" when it has an accessible name. But if you add a name property to the form the same query works so I guess name works for adding an accessible name to a form.

alexkrolick · 2022-08-07T06:34:31Z

I see aria-query (which powers getByRole) implements that but I am not sure that is correct behavior. At least in Chrome devtools, a form with just a name attribute doesn't have an accessible name.

src/etc/roles/literal/formRole.js

MatanBobi · 2022-08-07T13:40:40Z

As @alexkrolick mentioned, the name property is not the accessible name for a form.
Accessible names are defined either "from author" or "from content" where "from author" stands for: aria-label, aria-labelledby and in some cases alt or title.
More on this can be found in the ARIA spec :)
https://www.w3.org/TR/wai-aria-1.2/#namecalculation

Nargonath · 2022-08-08T08:35:29Z

Alright, thank you @MatanBobi and @alexkrolick for your explanation. 👍

andremarcondesteixeira · 2022-10-02T18:44:24Z

I disagree on this. This can lead to fragile tests.
Let's say you create a button that when clicked displays a form.
The form has a cancel button inside, and you put a aria-label in the form so that dom-testing-library detects it by role.
You write a test that asserts that the form is hidden when the cancel button is clicked.
The test uses expect(screen.queryByRole('form')).not.toBeInTheDocument() to make the assertion.
Now imagine that in the future, someone breaks the cancel button and now the form keeps being displayed, and also this person removed the aria-label attribute.
In this scenario, the previous tests you wrote will keep passing, because even though the form is still visible, dom-testing-library does not see any element with the form role anymore.

Nargonath · 2022-10-03T08:19:29Z

While I agree with you @andremarcondesteixeira, if this is per the spec I'm not sure it's good diverting from it.

MatanBobi · 2022-10-03T13:30:15Z

I disagree on this. This can lead to fragile tests. Let's say you create a button that when clicked displays a form. The form has a cancel button inside, and you put a aria-label in the form so that dom-testing-library detects it by role. You write a test that asserts that the form is hidden when the cancel button is clicked. The test uses expect(screen.queryByRole('form')).not.toBeInTheDocument() to make the assertion. Now imagine that in the future, someone breaks the cancel button and now the form keeps being displayed, and also this person removed the aria-label attribute. In this scenario, the previous tests you wrote will keep passing, because even though the form is still visible, dom-testing-library does not see any element with the form role anymore.

I get what you're saying but the same can happen if the engineer removes the name property, keep in mind that if you don't have the aria-label/aria-labelledyby, you're form isn't accessible so you have an accessibility issue.
Eventually, @Nargonath is right, the spec states that and we work according to the spec :)

SEE testing-library/dom-testing-library#474

lacrossehub · 2022-12-07T23:25:23Z

Solved for me by enabling the hidden option in getByRole

screen.getByRole('form', { hidden: true }),

BAsed on https://github.com/testing-library/dom-testing-library/issues/474\#issuecomment-597606894

SEE testing-library/dom-testing-library#474

ruscal closed this as completed Mar 11, 2020

leosuncin added a commit to leosuncin/mui-next-ts that referenced this issue Mar 29, 2020

test(form): Fix unit tests

6b1e669

SEE testing-library/dom-testing-library#474

eps1lon mentioned this issue Aug 12, 2020

Forms changed to Divs and not present in Role calls #738

Closed

Proful mentioned this issue Dec 17, 2020

Convert patients/care-goals/AddCareGoalModal.test.tsx to RTL OpenSourceRaidGuild/hospitalrun-frontend#25

Closed

calebeby mentioned this issue Mar 9, 2021

Bug: getByRole('form') doesn't work cloudfour/pleasantest#46

Closed

brianespinosa mentioned this issue Aug 9, 2021

DNM chore(FDS-249): all modules need to present the aria-label on the inputs Espressive/cascara#230

Closed

vabruzzo mentioned this issue Aug 4, 2022

fix(app): connect pipette settings form's submit button Opentrons/opentrons#11288

Merged

QuailtyDev added a commit to QuailtyDev/mui-next that referenced this issue Oct 22, 2022

test(form): Fix unit tests

b31f36c

SEE testing-library/dom-testing-library#474

lvieira-godaddy mentioned this issue Feb 16, 2023

Add pun bioneoficial/trocadilhoAward#2

Merged

WYGIN mentioned this issue May 30, 2023

fix: navbar not showing login when user Logged Out Real-Dev-Squad/website-status#589

Closed

1 task

lebaudantoine mentioned this issue Aug 23, 2023

♿️(frontend) remove redundant form role in the LTI app openfun/marsha#2380

Merged

heilop referenced this issue in heilop/gif-finder2-app Nov 18, 2023

Add aria-label attribute to form to fix error

7ad6e64

BAsed on https://github.com/testing-library/dom-testing-library/issues/474\#issuecomment-597606894

winter21228 added a commit to winter21228/Next.js-MUI that referenced this issue Dec 29, 2023

test(form): Fix unit tests

337c72a

SEE testing-library/dom-testing-library#474

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to find an accessible element with the role "form" #474

Unable to find an accessible element with the role "form" #474

ruscal commented Mar 11, 2020 •

edited

Loading

eps1lon commented Mar 11, 2020

ruscal commented Mar 11, 2020

sunpietro commented Sep 22, 2020

Nargonath commented Aug 4, 2022

alexkrolick commented Aug 4, 2022

Nargonath commented Aug 4, 2022

alexkrolick commented Aug 7, 2022 •

edited

Loading

MatanBobi commented Aug 7, 2022

Nargonath commented Aug 8, 2022

andremarcondesteixeira commented Oct 2, 2022

Nargonath commented Oct 3, 2022

MatanBobi commented Oct 3, 2022

lacrossehub commented Dec 7, 2022

Unable to find an accessible element with the role "form" #474

Unable to find an accessible element with the role "form" #474

Comments

ruscal commented Mar 11, 2020 • edited Loading

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

eps1lon commented Mar 11, 2020

ruscal commented Mar 11, 2020

sunpietro commented Sep 22, 2020

Nargonath commented Aug 4, 2022

alexkrolick commented Aug 4, 2022

Nargonath commented Aug 4, 2022

alexkrolick commented Aug 7, 2022 • edited Loading

MatanBobi commented Aug 7, 2022

Nargonath commented Aug 8, 2022

andremarcondesteixeira commented Oct 2, 2022

Nargonath commented Oct 3, 2022

MatanBobi commented Oct 3, 2022

lacrossehub commented Dec 7, 2022

ruscal commented Mar 11, 2020 •

edited

Loading

alexkrolick commented Aug 7, 2022 •

edited

Loading