Skip to content

A fully accessible and customizable off-canvas front-end component

License

Notifications You must be signed in to change notification settings

azinasili/a11yoffcanvas

Repository files navigation

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