Cannot select accessible listbox options

[luistak]

Envs

• @testing-library/user-event version: ^12.1.7

• Testing Framework and version: Jest@24.9.0

• DOM Environment: jsdom 16

Relevant code or config

https://codesandbox.io/s/silent-brook-ksldl?file=/src/App.js

What you did:

Tried to use selectOptions in with a custom select using Downshift useSelect hook

What happened:

It did not work as expected selecting the right options

Reproduction repository:

https://codesandbox.io/s/silent-brook-ksldl?file=/src/App.js

Problem description:

When trying to use the selectOptions API using a non-native select, the current selector does not match accessible compatible roles

Suggested solution:

Change this line to

Array.from(select.querySelectorAll("option, [role='option']"));

[luistak]

The #470 PR was incomplete when selecting a non-native accessible listbox we can't handle like a normal option

There small differences:

• Option values need to be compared with innerHTML instead of value
• When selecting the option we need to change the aria-selected property instead of selected
• We need to click instead of firing an input event

I'm going to open a new pr with those fixes, can you please re-open this issue @kentcdodds?