getByRole('form') should work without "name" attribute #937

kentcdodds · 2021-04-28T22:03:08Z

@testing-library/dom version: all
Testing Framework and version: Any
DOM Environment: Any

Relevant code or config:

// this passes, and that's great:
test('form with name', () => {
  const form = document.createElement('form')
  form.name = 'anything'
  const container = document.createElement('div')
  container.append(form)
  within(container).getByRole('form')
})

// this fails, but I think it should pass:
test('form without name', () => {
  const form = document.createElement('form')
  const container = document.createElement('div')
  container.append(form)
  within(container).getByRole('form')
})

What you did:

Originally I thought that a form didn't actually have the accessible role "form" unless they had a name, but I just did a quick check in the devtools and that appears to not be the case:

I did a bit of research and it appears there aren't any strong reasons to use a name attribute for a form, so it seems an odd limitation for us to have.

What happened:

Test fails.

Reproduction:

Put the above snippet in any jest environment you have working with testing library.

Alternatively, you'll find the same behavior in the browser as well: https://jsbin.com/ceyifo/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@testing-library/dom@7.30.4/dist/@testing-library/dom.umd.js"></script>
</head>
<body>
  <div>Check the console</div>
  <script>
    function withName() {
      const form = document.createElement('form')
      form.name = 'anything'
      const container = document.createElement('div')
      container.append(form)
      TestingLibraryDom.within(container).getByRole('form')
    }
    
    function withoutName() {
      const form = document.createElement('form')
      const container = document.createElement('div')
      container.append(form)
      TestingLibraryDom.within(container).getByRole('form')
    }
    
    try {
      withName()
      console.log('withName passes')
    } catch (error) {
      console.error('withName fails', error)
    }
    try {
      withoutName()
      console.log('withoutName passes')
    } catch (error) {
      console.error('withoutName fails', error)
    }
  </script>
</body>
</html>

Problem description:

It seems odd to me that a form requires a name attribute to be retrievable by a role query when it appears that the browser considers it to have a role of form.

Suggested solution:

Update getByRole to match forms without a name.

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

mt9eet · 2021-05-01T22:38:35Z

@kentcdodds I think this is expected, or at least that's what the spec says.

kentcdodds · 2021-05-01T22:57:46Z

Ah! That's interesting. So this sounds more like a bug in Chrome's accessibility devtools than a DTL bug 😅

Thanks for finding that @mt9eet! 👏

ahsatha · 2021-10-13T18:26:52Z

I'm sorry to comment here but I'm trying to get a form by the role and name by setting the name prop on it and, it seems like it can't find it though it gets listed in the output

const form = getByRole('form', { name: /login/i })

Update
This works:

const form = getByRole('form', { name: "" })

MatanBobi · 2021-10-14T05:40:04Z

@ahsatha thanks for reaching out.
This issue you're experiencing isn't really related to the one described in this issue.
The reason you're seeing this is because the name attribute on a form doesn't represent the accessible name.
You can read in the accessible name computation spec.
If I'm not mistaken, you need an aria-label an aria-labelledyby or a title.

alexkrolick · 2021-10-14T17:36:35Z

This is a good gotcha to mention in the docs pages somewhere.

MatanBobi · 2021-10-16T06:18:52Z

@alexkrolick that's actually already in the docs page in the *ByRole page:

Do you think that's enough?

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937

- cleanup is done automatically after each test - only forms with an accessible name have the role "form" Check: https://www.w3.org/TR/html-aria/#docconformance and testing-library/dom-testing-library#937 - waitForElement has been removed, now we can use find* variants, which return a promise, or waitFor

…sting-library/dom-testing-library#937)

challet · 2024-10-22T22:37:32Z

Setting a title still makes the form hidden from getByRole("form")

github-actions · 2024-10-22T22:37:46Z

Uh oh! @challet, the image you shared is missing helpful alt text. Check #937 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

MatanBobi · 2024-10-26T07:11:00Z

Thanks @challet. This looks like an issue with aria-query: https://github.com/A11yance/aria-query/blob/main/src/etc/roles/literal/formRole.js

Maybe @jlp-craigmorten will know?

jlp-craigmorten · 2024-10-28T08:49:23Z

Exactly as @MatanBobi suggests, the role of form currently has constraints set within aria-query which only cater to:

aria-label
aria-labelledby
name

it seems. So title is not being considered.

See also #1293 which might be a better place to track this rather this older closed issue? There is an open draft MR A11yance/aria-query#547 to try address the fact that the implicit form role conditions appear to have changed whereby it is not now necessary to name a form to get a form role. If this lands it would make the missing title constraint moot.

kentcdodds closed this as completed May 1, 2021

Paul-Hebert mentioned this issue Jul 20, 2021

Integrate reply Comment Form into Comment pattern cloudfour/cloudfour.com-patterns#1423

Merged

jhLim97 mentioned this issue Feb 5, 2022

[Sprint 1] 거래 내역을 추가 및 수정하는 모달에 대한 UI 구현 #5 jhLim97/account-book#42

Merged

5 tasks

keif pushed a commit to keif/pointwith.me that referenced this issue Dec 23, 2023

IssueNameForm form element needs a name for proper detection (see: te…

a4e6a95

…sting-library/dom-testing-library#937)

VinayakaHegade mentioned this issue Mar 8, 2024

Add test case for AddAdminForm, AdminTable, PreviewModal TeamShiksha/logoexecutive#173

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

getByRole('form') should work without "name" attribute #937

getByRole('form') should work without "name" attribute #937

kentcdodds commented Apr 28, 2021

mt9eet commented May 1, 2021

kentcdodds commented May 1, 2021

ahsatha commented Oct 13, 2021 •

edited

Loading

MatanBobi commented Oct 14, 2021 •

edited

Loading

alexkrolick commented Oct 14, 2021

MatanBobi commented Oct 16, 2021 •

edited

Loading

challet commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

MatanBobi commented Oct 26, 2024

jlp-craigmorten commented Oct 28, 2024 •

edited

Loading

getByRole('form') should work without "name" attribute #937

getByRole('form') should work without "name" attribute #937

Comments

kentcdodds commented Apr 28, 2021

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

mt9eet commented May 1, 2021

kentcdodds commented May 1, 2021

ahsatha commented Oct 13, 2021 • edited Loading

MatanBobi commented Oct 14, 2021 • edited Loading

alexkrolick commented Oct 14, 2021

MatanBobi commented Oct 16, 2021 • edited Loading

challet commented Oct 22, 2024

github-actions bot commented Oct 22, 2024

MatanBobi commented Oct 26, 2024

jlp-craigmorten commented Oct 28, 2024 • edited Loading

ahsatha commented Oct 13, 2021 •

edited

Loading

MatanBobi commented Oct 14, 2021 •

edited

Loading

MatanBobi commented Oct 16, 2021 •

edited

Loading

jlp-craigmorten commented Oct 28, 2024 •

edited

Loading