https://github.com/19h47/19h47-listbox
📝
https://github.com/19h47/19h47-listbox
listbox option
Last synced: 6 months ago
JSON representation
📝
- Host: GitHub
- URL: https://github.com/19h47/19h47-listbox
- Owner: 19h47
- Created: 2020-02-04T09:53:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-20T08:54:22.000Z (6 months ago)
- Last Synced: 2024-11-20T10:47:41.566Z (6 months ago)
- Topics: listbox, option
- Language: JavaScript
- Homepage: https://19h47.github.io/19h47-listbox/
- Size: 1.34 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @19h47/listbox
Collapsible single-select listbox widget
## Installation
```
yarn add @19h47/listbox
```
## Usage
```javascript
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();
```
```html
Choose an monster
Bat
- Bat
- Bear
- Behir
- Beholder
- Boar
- Bookworm
- Brownie
- Bugbear
- Carrion crawler
- Catoblepas
- Cats, great
- Cave fisher
- Centaur, sylvan
- Centipede
- Chimera
- Cockatrice
- Couatl
- Dragon turtle
- Hydra
- Minotaur
- Ogre
- Vampire
- Wyvern
- Yeti
- Yuan-ti
- Zombie
```
## 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](https://19h47.github.io/19h47-list/), see [sources](/docs/index.html).
## References
- [Example of Tabs with Manual Activation](https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html)
- [Keycode](https://keycode.info/) by [Wes Bos](https://wesbos.com/)