`toHaveValue()` does not support `listbox` role for non-select elements

Clear and concise description of the problem

Currently, in browser mode, toHaveValue() does not work well with listbox role elements other than <select>

The following two code snippets are semantically similar.

<ul role="listbox" aria-multiselectable="true">
  <li role="option" value="first">First Value</li>
  <li role="option" value="second" aria-selected="true">Second Value</li>
  <li role="option" value="third" aria-selected="true">Third Value</li>
</ul>

<select multiple>
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third" selected>Third Value</option>
</select>

Suggested solution

Supporting both would be helpful, as some UI component libraries generate the first one.

Alternative

No response

Additional context

Here is the reproducible CodeSandbox:

https://codesandbox.io/p/devbox/laughing-joliot-ssvs7n?file=%2Fsrc%2FListbox.test.tsx

After preparing this CodeSandbox, I noticed the stackblitz in the docs... If this is insufficient, please let me know and I will recreate it in stackblitz.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Run the linked CodeSandbox reproduction and read src/Listbox.test.tsx to understand the expected toHaveValue behavior. Trace the matcher entry point used by the browser-mode test, then verify that non-select listbox elements report their selected option values consistently with the provided select example.