@19h47/listbox

Collapsible single-select listbox widget

Installation

yarn add @19h47/listbox

Usage

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>

Keyboard Support

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

Event

Button.change

Options

delay

Example

An example is located right here, see sources.

References

• Example of Tabs with Manual Activation
• Keycode by Wes Bos