user-event Improve listbox support in selectOptions

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: