Non-native dropdown test

Index page

These tests are to determine how different online examples mark up non-native dropdown lists.


Example 01: <li> items

Code

<button
  aria-haspopup="listbox"
  aria-labelledby="aaa bbb"
  id="aaa"
>
  Choose a fruit
</button>
<ul role="listbox" aria-activedescendant="bbb">
  <li id="bbb" role="option" aria-selected="true">Apple</li>
  <li id="ccc" role="option">Banana</li>
</ul>

Dummy link after


Example 02: <a> items

Code

<button role="combobox">Choose a fruit</button>
<ul role="presentation">
  <li><a role="option" aria-selected="true" href="#">Apple</a></li>
  <li><a role="option" href="#">Banana</a></li>
</ul>

Index page