Improve listbox support in selectOptions

[GeorgeTaveras1231]

Allow role="option" elements to contain more complex html

What:

Allow role="option" elements to contain complex HTML when using selectOption. selectOption will perform a look up of the listbox option elements, only comparing the trimmed visible text against the given option value.

Example

<ul role="listbox">
  <li role="option">
     Some text
    <span>Nested HTML text</span>
  </li>
</ul>

Why:

The current implementation is too strict and in some cases does not make sense. If the role="option" element contains any HTML structure, it compares the given option against the raw innerHTML.

Using the example above, the call that would work would me

userEvent.selectOption(listbox, '     Some text\n    <span>Nested HTML text</span>') // 💀 

With these fixes, this becomes

userEvent.selectOption(listbox, 'Some text Nested HTML text') // 👍🏽  

How:

Implement a misc util named getVisibleText which clones the node, removes nodes that are not visible, extracts the textContent, then removes duplicate spaces.

The visibility heuristic follows the implementation in ./utils/isVisible (using getComputedStyle) and also looks at aria-hidden (since the role="listbox"/role="option" is rooted on aria, this seemed like a reasonable approach).

Checklist:

• Documentation
• 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.

[alexanderop]

I hope this gets merged soon would be really useful

[adarshotto]

It's a pain to use selectOption without these improvements.

[melisa-diaz]

Would be really helpful to have this 🙏