https://github.com/19h47/19h47-spinbutton
➖➕
https://github.com/19h47/19h47-spinbutton
a11y accessibility spinbutton
Last synced: about 1 month ago
JSON representation
➖➕
- Host: GitHub
- URL: https://github.com/19h47/19h47-spinbutton
- Owner: 19h47
- Created: 2020-02-06T08:26:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T08:11:47.000Z (7 months ago)
- Last Synced: 2024-10-29T09:27:01.830Z (7 months ago)
- Topics: a11y, accessibility, spinbutton
- Language: HTML
- Homepage: https://19h47.github.io/19h47-spinbutton/
- Size: 2.75 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @19h47/spinbutton
A spinbutton is an input widget that restricts its value to a set or range of discrete values.
## HTML
```html
-
+
```
## JavaScript
```javascript
import SpinButton from '@19h47/spinbutton';
const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);
spinbutton.init();
```
## Events
| Event | Args | Description |
| ----------------- | ----- | --------------------------------- |
| SpinButton.change | value | Return the current activate value |
```javascript
import SpinButton from '@19h47/spinbutton';
const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);
spinbutton.init();
spinbutton.on('SpinButton.change', value => {
console.log(value);
});
```
## Options
| Option | Type | |
| ------ | ------ | ------------------------------------------------------------------------------------------------- |
| `text` | object | Object containing _single_ and _plural_ text. Can be set as data attribute `data-spinbutton-text` |
## Keyboard Support
The spin buttons provide the following keyboard support described in the [spin button design pattern](https://www.w3.org/TR/wai-aria-practices/#spinbutton).
| Key | Function |
| ---------- | ---------------------------- |
| Down Arrow | Decreases value 1 step. |
| Up Arrow | Increases the value 1 step. |
| Page Down | Decreases the value 5 steps. |
| Page Up | Increases the value 5 steps. |
| Home | Decreases to mimimum value. |
| End | Increases to maximum value. |
## Role, Property, State, and Tabindex Attributes
| Role | Attribute | Element | Usage |
| ------------ | --------- | ------- | --------------------------------------------- |
| `spinbutton` | | `div` | Identifies the `div` element as a spinbutton. |
## References
[Spinbutton Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)