Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svinkle/launchy
Launchy: An Accessible Modal Window
https://github.com/svinkle/launchy
a11y accessibility dialog html javascript modal
Last synced: 19 days ago
JSON representation
Launchy: An Accessible Modal Window
- Host: GitHub
- URL: https://github.com/svinkle/launchy
- Owner: svinkle
- License: mit
- Created: 2017-07-30T17:12:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-27T21:26:19.000Z (over 5 years ago)
- Last Synced: 2024-04-26T01:05:06.816Z (7 months ago)
- Topics: a11y, accessibility, dialog, html, javascript, modal
- Language: JavaScript
- Homepage: https://svinkle.github.io/launchy
- Size: 174 KB
- Stars: 103
- Watchers: 3
- Forks: 11
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/svinkle/launchy)
[](https://badge.fury.io/js/launchy-modal-window)
# Launchy! 🚀
> An accessible modal window!
## Features include:
- Easy to use and implement!
- On launch, keyboard focus shifts to the modal window container
- The modal window is described via _optional_ modal heading
- Traps the keyboard focus within the modal when active/visible
- Closes the window on `esc` key press
- Closes the window on overlay mouse `click`
- Sets keyboard focus back to the launcher element on window close
- Add your own custom close controls!
- Add your own custom controls which send focus to somewhere else on the page!
- Transparent border for Windows High Contrast themes
For more details on the accessibility of modal windows:
- WCAG 2.4.3: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html#navigation-mechanisms-focus-order-examples-head
- WAI-ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
## Demo
- Check out the [demo](https://svinkle.github.io/launchy)! 👈
- Try your own HTML with the [CodePen](https://codepen.io/svinkle/pen/pjVepz/) demo!
## Usage
_Launchy!_ is very easy to install and use:
### HTML
Wherever you want to have a _Launchy!_ control + window appear in your HTML content, simply **wrap** your content with a `
` and add the `data-launchy` attribute.
Example:
```html
This content will appear in the modal window.
```
- **Required**: `data-launchy` -- Attribute is required but the value can be anything
- **Required**: `data-launchy-text` -- This is the text that will be output to the launcher control
- Optional: `data-launchy-title` -- The text which appears in the heading of the modal window, recommended for greater a11y context 👍
- Optional: `data-launchy-button` -- If you'd rather have `button` elements instead of the default `a` elements as launcher and close controls
#### Custom Close Controls
You can add your own custom close controls to any _Launchy!_ modal window!
1. Add the HTML element you wish to use for the control within your content
2. Apply the `data-launchy-close` attribute
Example:
```html
```
Clicking on the _"Ok!"_ link will hide the modal window and send focus back to the launcher control!
#### Custom Refocus Controls
You can add your own custom "refocus" controls to any _Launchy!_ modal window!
1. Add the HTML element you wish to use for the control within your content
2. Apply the `data-launchy-refocus` attribute
3. Set the value of the `data-launchy-refocus` attribute to the `id` of the element you wish to send focus to
Example:
```html
My perfect sundae…
```
Clicking on the _"Send me to the article headline!"_ link will hide the modal window and shift keyboard focus to the `
` element!
### CSS
_Launchy!_ has many CSS classes available on its generated elements for custom styles. Check out the [style.scss](https://github.com/svinkle/launchy/blob/master/brochure/css/sass/styles.scss) file for class names and an example on how you might want to style your modal windows!
### JavaScript
For any site, grab the `/dist/launchy.js` file and include it at the bottom of your HTML page/template:
```html
```
_Launchy!_ will run automatically and generate all the modal windows for you!
### `npm` Package
_Launchy!_ is also available as an npm package!
#### Install
```sh
npm i launchy-modal-window
```
#### Usage
Include the `launchy.js` directly in your app or site template.
```html
```
## Contributions
See the [CONTRIBUTING](https://github.com/svinkle/launchy/blob/master/CONTRIBUTING.md) file.
## License
See the [LICENSE](https://github.com/svinkle/launchy/blob/master/LICENSE.md) file.