A11yOffCanvas

A fully accessible and customizable off-canvas front-end component. Use your own markup and styles and let A11yOffCanvas do the hard stuff for you.

DEMO

Installation

A11yOffCanvas is available at:

Source
NPM	npm install a11yoffcanvas --save
Yarn	yarn add a11yoffcanvas
unpkg	https://unpkg.com/a11yoffcanvas

Usage

A11yOffCanvas does require minimal amount of markup to function:

<!--
  - Trigger for drawer must have `data-a11yoffcanvas-trigger` attribute must point to the id of it's corresponding drawer
-->
<button data-a11yoffcanvas-trigger="drawerLeft">Open drawer</button>
<!--
  - Although the drawer is not required to be an `<aside>`, semantically it's an appropriate tag to use
  - Drawers must have an unique id
  - Drawers must have `data-a11yoffcanvas-drawer` attribute
-->
<aside id="drawerLeft" data-a11yoffcanvas-drawer>
  <!--
    - Add optional `data-a11yoffcanvas-close` attribute to be able to close drawers
  -->
  <a href="#" data-a11yoffcanvas-close>x</a>
</aside>

// Import A11yOffCanvas if utilizing JS modules
import A11yOffCanvas from 'a11yoffcanvas';
 
// Create a new instance of A11yOffCanvas
// All options and default values shown
const drawerTrigger = document.querySelector('button');
const offcanvas = new A11yOffCanvas(drawerTrigger, {
  drawerCloseClass: null,
  drawerOpenClass: null,
  closeOnClick: false,
  afterCloseFunction: null,
  afterOpenFunction: null,
  beforeCloseFunction: null,
  beforeOpenFunction: null,
  addEvents: false,
  trapFocus: true,
});
 
// Initialize your new tabs
offcanvas.init();

A11yOffCanvas will handle all ARIA roles/attributes, focus management, and events, which transform the original HTML into the following:

<button data-a11yoffcanvas-toggle="drawerLeft" aria-controls="drawerLeft" aria-expanded="false">Open drawer</button>
<aside id="drawerLeft" data-a11yoffcanvas-drawer aria-hidden="true">
  <a href="#" data-a11yoffcanvas-close>x</a>
</aside>

A11yOffCanvas API

Options

Property	Type	Default	Description
drawerCloseClass	String	null	Class to add to drawer when closed
drawerOpenClass	String	null	Class to add to drawer when opened
closeOnClick	String	null	Close drawer when clicking outside outside of it
afterCloseFunction	Function	null	Function to run after drawer closes
afterOpenFunction	Function	null	Function to run after drawer opens
beforeCloseFunction	Function	null	Function to run before drawer closes
beforeOpenFunction	Function	null	Function to run before drawer opens
addEvents	Boolean	false	Add custom A11yOffCanvas events
trapFocus	Boolean	true	Trap focus within opened drawer

Methods

Name	Description
init	Initializes instance of A11yOffCanvas
destroy	Kills instance of A11yOffCanvas
open	Open drawer
close	Close drawer

License

MIT License