https://github.com/jpdevries/availability-grid
An accessible HTML Component for accepting weekly availability.
https://github.com/jpdevries/availability-grid
Last synced: 2 months ago
JSON representation
An accessible HTML Component for accepting weekly availability.
- Host: GitHub
- URL: https://github.com/jpdevries/availability-grid
- Owner: jpdevries
- License: mit
- Created: 2016-06-11T00:20:23.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-30T09:47:45.000Z (over 9 years ago)
- Last Synced: 2025-04-09T09:37:45.040Z (12 months ago)
- Language: HTML
- Homepage:
- Size: 56.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## HTML–first
`AvailabilityGrid` is progressively enhanced from a semantic HTML `` made up of a `` of `
document.addEventListener('DOMContentLoaded',function(){
var grid = new AvailabilityGrid();
});
```
### Methods
When a new `AvailabilityGrid` is created the instance automatically initializes itself. `AvailabilityGrid` instances can be destroyed via `.destroy()` and re-awoken from the dead with `.init()`.
```js
grid.destroy(); // remove listeners
// mutate the DOM or whatever...
grid.init(); // re-add listeners
```
When calling `.init()` you may pass in a fresh set of options.
```js
grid.init({
element:document.getElementById('new-grid')
});
```
Calling `.destroy()` will remove all listeners and references to `element` but options like `inputSelector` will persist and do not need to be reset when reawakening an instance by later calling `.init()`.
_Note: As AvailabilityGrid instances `.destroy()` themselves they look for an `id` on `element`. If found, `element` will be set to the string `id` so as to remove references to that element while still being able to query the DOM for it if `.init()` is later called without passing in an element._
The current selection can be inverted using the `.inverse()` method.
```js
var grid = new AvailabilityGrid();
grid.inverse(); // inverse the selection
```
### Options
| key | default | description |
| ---- | ---- | ---- |
| `element` | `'availability-grid'` | The HTML Element or `id` of the HTML element |
| `inputSelector` | `'input[type="checkbox"]'` | Selector used when querying DOM for checkbox inputs |
| `whenTextSelector` | `'span.a11y-hidden'` | Selector used when querying DOM to change hidden text for screen readers |
## Weigh–In
| Type | Un–minified (kB) | Minified (kB) | GZIP (kB)
| ------------- | ------------- | --- | --- |
| CSS | 7.14 | 6.01 | 0.846 |
| JavaScript | 12.32 | 5.77 | 1.96 |
## Screencasts
- [AvailabilityGrid VoiceOver Preview](https://vimeo.com/170844798)
- [AvailabilityGrid Demo + Shift Selection](https://vimeo.com/170857351)
## HTML Architecture
See [the Wiki](https://github.com/jpdevries/availability-grid/wiki/HTML-Architecture).
## Keyboard Accessibility
In addition to the inherent keyboard accessibility that comes with the ability to tab through a table of `` elements and use space bar to check or un–check them, AvailabilityGrid adds the following keyboard considerations:
- Arrow Keys
### Arrow Keys
While focused on a cell, the up, right, down, and left arrow keys can be used to shift focus to a neighboring cell.
## Usability Considerations
The main usability consideration currently made is:
- range selection
- inverse selection
- VoiceOver usage
### Range Selection
The Shift key can be used to select ranges of inputs. When focused on a cell, hold Shift while clicking another to toggle a range of time slots.
### Inverse Selection
`AvailabilityGrid` exposes a `.inverse()` method that inverts the checked property of each option. This user consideration can be used as a shortcut to make particular selections.
### VoiceOver Usage
Accessibly hidden text is used to make screen readers read aloud a question like "Are you available Mondays at 9am?" or a statement like "You are available Mondays at 9am." accordingly. It will also read aloud keyboard shorcuts and tips.
See the [VoiceOver Screencast](https://vimeo.com/170844798).
## Styles
The default styles for `AvailabilityGrid` consist of [some simple Sass](https://github.com/jpdevries/availability-grid/blob/master/_build/scss/main.scss).
```html
```
You can include the default styles and/or override them with your own.
## Techniques
See [the Wiki](https://github.com/jpdevries/availability-grid/wiki/Techniques).
## Contribution Guidelines
Trying to follow the guidelines at [frend/frend.co](https://github.com/frend/frend.co#javascript). However, support for multiple "JS Drivers" is on the roadmap. The same style guide for the VanillaJS driver would not necessarily apply to a React or Angular driver. To suggest a feature or report a bug feel free to [open an issue](https://github.com/jpdevries/availability-grid/issues/new).
## Accessibility Proclaimer
This component strives for WCAG 2.0 Guidelines Level AA. Please [open an issue](https://github.com/jpdevries/availability-grid/issues/new) for any accessibility issue, feedback, or concern.