`*byRole("listbox")` does not properly query <select /> elements

[nicklemmon]

• @testing-library/dom version: @testing-library/dom@8.11.0
• Testing Framework and version: @testing-library/cypress@8.0.2
• DOM Environment: Cypress/browser (though the issue is reproduced in the Codesandbox that follows via Jest/JSDom)

Relevant code or config:

<label for="my-select">My Select</label>

<select id="my-select"></select>

// Using `dom-testing-library` via `cypress-testing-library`
cy.findByRole("listbox", { name: "My Select" }); // Doesn't work, element not found
cy.findByRole("combobox", { name: "My Select" }); // Does work! But this isn't the right ARIA role

What you did:

• Tried to query a select element using the analogous ARIA role for a select

What happened:

• "combobox" worked where it should have failed - the combobox role is distinct from the listbox role

Reproduction:

Codesandbox reproduction

Problem description:

• A <select /> should be query-able via *byRole("listbox")

Suggested solution:

• It looks like aria-query lists "listbox" as a valid role mapping to the select element - I would assume there is an integration problem with this library

Thanks for all of your great work on this library - it's truly a game changer in the space 🎉

[MatanBobi]

Hi @nicklemmon, thanks for taking the time to open this one :)

For the issue, looking at the code this looks like an expected behavior.

From the MDN you attached:

"The listbox role is used for lists from which a user may select one or more items which are static and, unlike HTML <select>elements, may contain images."

In order to enable multi selection on select, you'll have to add the multiple attribute to it and that's what's being verified in the code. Looking at the codesandbox attached, if you add multiple to the select, the query will work. Thanks again for your time and effort!

[nicklemmon]

Thanks for the quick response, @MatanBobi! That's not actually how I read the spec - to me, it seems that role="listbox" should be the equivalent of a select or select with the multiple attribute - not just with the multiple attribute solely. See the official WAI-ARIA listbox example - looks like either multi or single select is supported here.

That being said, combobox definitely refers to something other than a select. The official WAI-ARIA combobox example is pretty different from an interaction standpoint from a native select.

Then again, I see a newer demo that uses role="combobox" and it works just like a native select!

😕 This is all very confusing.

[MatanBobi]

Hmm, I see what you're saying here, though it's important to note that if you'd do something like this:

      <ul id="my-select" role="listbox">
        <li>Option 1</li>
        <li>Option 2</li>
      </ul>

Then screen.findByRole("listbox", { name: "My Select" }); will work (tested in your codesandbox). So just to see I'm getting it right, the only issue you're talking about is that you believe select element should also have listbox role without having the multiple attribute?

@eps1lon wdyt about this one?

[nicklemmon]

you believe select element should also have listbox role without having the multiple attribute?

@MatanBobi yes, you're hearing me right - though the spec is unclear to me. I'm pretty sure that should be the case, though not 100% positive.

[MatanBobi]

@nicklemmon I looked into the spec a little more and found this:

Since this is the wanted behavior, can we close this one? :)

[nicklemmon]

@MatanBobi we sure can! Appreciate your help and your work on this library. Happy New Year to you as well.

[MatanBobi]

Thanks Nick! You too :)