Collapsible single-select listbox widget
yarn add @19h47/listbox
const $list = document.querySelector('.js-list');
const $listbox = $list.querySelector('[role="listbox"]');
const $button = $list.querySelector('.js-list-button');
// Init box.
const box = new Listbox.Box($listbox);
box.init();
// Init button.
const button = new Listbox.Button($button, box);
button.init();<div class="js-list">
<h2 id="title">Choose an monster</h2>
<button id="button" aria-labelledby="title button" type="button">Bat</button>
<ul class="hidden" tabindex="-1" role="listbox" aria-labelledby="title">
<li id="monster-bat" role="option">Bat</li>
<li id="monster-bear" role="option">Bear</li>
<li id="monster-behir" role="option">Behir</li>
<li id="monster-beholder" role="option">Beholder</li>
<li id="monster-boar" role="option">Boar</li>
<li id="monster-bookworm" role="option">Bookworm</li>
<li id="monster-brownie" role="option">Brownie</li>
<li id="monster-bugbear" role="option">Bugbear</li>
<li id="monster-carrion" role="option">Carrion crawler</li>
<li id="monster-catoblepas" role="option">Catoblepas</li>
<li id="monster-cats-great" role="option">Cats, great</li>
<li id="monster-cave-fisher" role="option">Cave fisher</li>
<li id="monster-centaur-sylvan" role="option">Centaur, sylvan</li>
<li id="monster-centipede" role="option">Centipede</li>
<li id="monster-chimera" role="option">Chimera</li>
<li id="monster-cockatrice" role="option">Cockatrice</li>
<li id="monster-coualt" role="option">Couatl</li>
<li id="monster-dragon-turtle" role="option">Dragon turtle</li>
<li id="monster-hydra" role="option">Hydra</li>
<li id="monster-minotaur" role="option">Minotaur</li>
<li id="monster-ogre" role="option">Ogre</li>
<li id="monster-vampire" role="option">Vampire</li>
<li id="monster-wyver" role="option">Wyvern</li>
<li id="monster-yeti" role="option">Yeti</li>
<li id="monster-yuan-ti" role="option">Yuan-ti</li>
<li id="monster-zombie" role="option">Zombie</li>
</ul>
</div>The example listbox on this page implements the following keyboard interface.
| Key | Function |
|---|---|
| Enter | - If the focus is on the button, expands the listbox and places focus on the currently selected option in the list. - If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label. |
| Escape | If the listbox is displayed, collapses the listbox and moves focus to the button. |
| Down Arrow | - Moves focus to and selects the next option. - If the listbox is collapsed, also expands the list. |
| Up Arrow | - Moves focus to and selects the previous option. - If the listbox is collapsed, also expands the list. |
| Home | If the listbox is displayed, moves focus to and selects the first option. |
| Printable Characters | - Type a character: focus moves to the next item with a name that starts with the typed character. - Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed. |
Button.change
delay