A11yoffcanvas NPM

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