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

    Install

    npm i aria-autopilot

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • rikschennink