aria-autopilot

0.0.1 • Public • Published

Aria Autopilot, Declarative accessibility

License: MIT npm version Donate with PayPal

Aria Autopilot binds interactive behavior based on declarative rules.

It exposes a set of instructions often used when building interactive widgets.

Aria Autopilot is currently a work in progress

We can bind ARIA attributes using data-aria-autopilot attribute, Aria Autopilot will then automatically apply the attributes when loaded. Aria Autopilot uses MutationObserver to automatically expand attributes defined on dynamically inserted DOM elements.

Time to learn ES6?

Aria Autopilot is written in ES6.

If you want to learn how to write modern ES6 JavaScript as well, I highly recommend ES6 for Everyone by Wes Bos.

Installation

It's best if Aria Autopilot runs as quickly as possible after loading the DOM. If you put the script reference in the <head> and add a defer attribute to it the browser will load the script in parralel with your HTML and will automatically execute it once the DOM is ready.

<!doctype html>
<html>
  <head>
    <title>Aria Autopilot</title>
    <script defer src="aria-autopilot.min.js"></script> 
  </head>
  <body>
 
  </body>
</html>

Configuration

Instruction format

An @event happens, a relation is found, a sequence of actions is run.

@event: relation -> action
@event: relation -> action, action
@event: relation(parameter, paremeter, ...) -> action; relation -> action, action

Available events

Event Description
activate Triggered on click or return key pressed
expand Triggered when the aria-expanded attribute is switched to "true"
collapse Triggered when the aria-expanded attribute is switched to "false"
press Triggered when the aria-pressed attribute is switched to "true"
release Triggered when the aria-pressed attribute is switched to "false"
select Triggered when the aria-selected attribute is switched to "true"
deselect Triggered when the aria-selected attribute is switched to "false"
target Triggered when the element is the target of the location hash
key_up Triggered on key up pressed
key_down Triggered on key down pressed
key_left Triggered on key left pressed
key_right Triggered on key right pressed
key_escape Triggered on escape key pressed
key_enter Triggered on enter key pressed
key_space Triggered on spacebar pressed
key_tab Triggered on tab key pressed
key_backspace Triggered on backspace pressed
key_code Triggered on key press with given code

Available relations

Relation Description
origin(childSelector) the first element referencing this element
target(childSelector) the element targetted by this element via href, aria-controls or if both are missing the next sibling
context(childSelector) the current element
siblings(childSelector, parentSelector) the siblings of this element
next-sibling(childSelector, parentSelector) the next sibling of this element
previous-sibling(childSelector, parentSelector) the previous sibling of this element
last-sibling(childSelector, parentSelector) the last sibling of this element
first-sibling(childSelector, parentSelector) the first sibling of this element

Available actions

Action Description
select Sets the aria-selected attribute to "true" and fires the select event
deselect Sets the aria-selected attribute to "false" and fires the deselect event
press Sets the aria-pressed attribute to "true" and fires the press event
release Sets the aria-pressed attribute to "false" and fires the release event
expand Sets the aria-expanded attribute to "true" and fires the expand event
collapse Sets the aria-expanded attribute to "false" and fires the collapse event
toggle Toggles the aria state on the element and fires the related event
activate Sets the aria state on the element to "true" and fires the related event
deactivate Sets the aria state on the element to "false" and fires the related event
focus Moves focus to the selected element
show Sets the hidden attribute to "false" on the element
hide Sets the hidden attribute to "true" on the element
show-target show the target element (the element reference by href, aria-controls or the next sibling)
hide-target hide the target element (the element reference by href, aria-controls or the next sibling)
set-focusable Sets the tabindex of the element to "0" allowing user focus
set-script-focusable Sets the tabindex of the element to "-1" allowing script focus
update-location Update window location hash with element id

Versioning

Versioning follows Semver.

License

MIT

Package Sidebar

Install

npm i aria-autopilot

Weekly Downloads

2

Version

0.0.1

License

MIT

Unpacked Size

16.5 kB

Total Files

6

Last publish

Collaborators

  • rikschennink