Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
julienw opened this issue Mar 4, 2024 · 5 comments
Open

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

julienw opened this issue Mar 4, 2024 · 5 comments

Comments

@julienw
Copy link
Contributor

julienw commented Mar 4, 2024

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!
@julienw
Copy link
Contributor Author

julienw commented Mar 4, 2024

It looks like it's been changed in w3c/html-aria#402
(found that from the change on MDN in mdn/content@e31cb59#diff-25921a273c422a060a3204a4c8e46fb9d42be0ce77679b9d1e5094c9fc627985)

@julienw
Copy link
Contributor Author

julienw commented Mar 4, 2024

Should the fix be made in https://github.com/A11yance/aria-query/blob/main/src/etc/roles/literal/formRole.js ?

@julienw julienw mentioned this issue Mar 4, 2024
Merged
@cmorten
Copy link

cmorten commented Mar 14, 2024

Looking at:

I’m inclined to agree, all the specs point to the form element having the form role regardless of accessible name. As you describe the only condition is regarding whether it’s also considered a landmark.

@cmorten
Copy link

cmorten commented Mar 14, 2024

In addition to the update to aria-query, perhaps worth removing the comment in https://github.com/eps1lon/dom-accessibility-api/blob/main/sources/getRole.ts#L30 as well (although no code change needed as seems already assumed a form role)

julienw added a commit to julienw/aria-query that referenced this issue Mar 15, 2024
@julienw
fix: The <form> element now always exposes the role "form"
adb2927 
This has been changed in the ARIA spec in
w3c/html-aria#402.

See also testing-library/dom-testing-library#1293
@julienw julienw mentioned this issue Mar 15, 2024
Open
julienw added a commit to julienw/dom-accessibility-api that referenced this issue Mar 15, 2024
@julienw
fix: The <form> element now always exposes the role "form"
b06b77e 
This has been changed in the ARIA spec in
w3c/html-aria#402.

See also testing-library/dom-testing-library#1293
@julienw julienw mentioned this issue Mar 15, 2024
Open
@jlp-craigmorten
Copy link
Contributor

Some more context:

The last one means that WAI-ARIA is somewhat in conflict with the AAM specs currently as it still states that an accessible name is required on a form (something that is a bug in in aria-query as it has accessibleNameRequired: false, currently).

If we assume that WAI-ARIA is updated (e.g. in 1.3) then we could ignore that aria-query has been inconsistent / incorrect till now on this one point.

julienw added a commit to julienw/aria-query that referenced this issue Mar 15, 2024
@julienw
fix: The <form> element now always exposes the role "form"
f52b777 
This has been changed in the ARIA spec in
w3c/html-aria#402.

See also testing-library/dom-testing-library#1293
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@julienw @cmorten @jlp-craigmorten