fix: Various implicit roles in ByRole

[eps1lon]

With #408 we'll be able to correctly identify some of these implicit roles (e.g. <form> or <section>)

What:

Fix various issues with implicit roles

Why:

Examples for elements with the wrong implicit role when using aria-query@3:

• <form> without an accessible name having a role (though even with it now has is not queried by the form role. this requires feat(byRole): Add name filter #408)
• <select> being identified as both combobox and listbox even though it is only a combobox
• <input list="" /> not being identified as a combobox

How:

Bump aria-query to ^4.0.1

Checklist:

• ~[ ] Documentation added to the
  docs site
• [ ] I've prepared a PR for types targeting
  DefinitelyTyped~
• Tests
• Ready to be merged
  

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3d38d1b:

Sandbox	Source
practical-hooks-5i0vh	Configuration

[codecov]

Codecov Report

Merging #446 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #446   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          22     22           
  Lines         397    402    +5     
  Branches       94     95    +1     
=====================================
+ Hits          397    402    +5

Impacted Files	Coverage Δ
src/role-helpers.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a98dc9f...3d38d1b. Read the comment docs.

[kentcdodds]

Looks good to me! Thank you! Just one comment.

[kentcdodds]

this requires #408

Does this mean that we should make sure we merge #408 before this PR?

[eps1lon]

Would be better to not have a this released without #408. Then we can add tests with named elements.

[kentcdodds]

Working on getting this mergable right now.

[kentcdodds]

Looking good. Just want to make sure aria-query didn't mess us up.

[kentcdodds]

This change appears to be a result of the aria-query update. Maybe that's a bug?

[kentcdodds]

Super. Thank you!

[kentcdodds]

🎉 This PR is included in version 6.14.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[nixxquality]

This was a breaking change in my case.

If anyone else is having issues with ****ByRole("form") not working anymore, add an ARIA label to your form.

   return (
-    <form onSubmit={ onSubmit }>
+    <form onSubmit={ onSubmit } aria-label="Configuration">
       <div id="floatsubmit">

[smeijer]

Is that form bug something for which an issue should be created?

[kentcdodds]

I don't think an aria label should be required on the form. This seems like a bug.

[nixxquality]

It was an upstream change in aria-query, and it follows the w3c spec.
The only problem I had with it was that it was a breaking change in aria-change (4.0) but it was a minor change in this project, sending me on a bit of a journey to find out why my code suddenly wasn't working (because it wasn't correct in the first place, mind you).

[kentcdodds]

Oh, that's very interesting. So a label is required on a form according to the spec?

[nickserv]

Should we bump the major version? The semver spec recommends doing that retroactively after it’s discovered that a breaking change has been already published accidentally.

[smeijer]

Oh, that's very interesting. So a label is required on a form according to the spec?

It does look that way:

role=form if the form element has an accessible name. Otherwise, no corresponding role.
--

It still feels very weird to me. Other elements (like heading, article) get an implicit role, but form does not? Both Chrome and Firefox show me a role=form for forms without accessible names. Are they messing up here?

On a positive note, the label seems to work nicely.

And maybe that's the entire idea behind it. A heading and article will make sense due to their content. But selecting a form without a label, might not. Think of invoice address and shipping address. Without proper labels, it's impossible to tell which "input: address" has the focus.

<form aria-labelledby="signup-form">
  <h1 id="signup-form">
    Signup Form
  </h1>
  
  <input placeholder="email" />
</form>

screen.getByRole('form', { name: /signup form/i })

playground