@vrbo/a11y-tools

a11y-tools

• Introduction
• Maintainers
• Usage
• Development
• Further Reading

Introduction

Helper library with focus accessibility tools:

TrackFocus, which tracks focus events caused by the keyboard and highlights them, but DOES NOT show focus state for mouse and touch events. More Information

TrapFocus, which restricts keyboard tabbing to only focusable elements within a container. More Information

Maintainers

• Martin Note [e-mail]

Usage

Application developers that want to consume this component should install the package using npm:

npm install @vrbo/a11y-tools

TrackFocus

Example Usage:

// ES6 module syntax:
import {TrackFocus} from '@vrbo/a11y-tools';

const trackFocus = new TrackFocus();

trackFocus.bindEvents();

TrapFocus

Example Usage:

import {TrapFocus} from '@vrbo/a11y-tools';
import React, {Component} from 'react';

class Example extends Component {
    constructor(props) {
        super(props);
        this.trapFocus = new TrapFocus();
        this.containerRef = React.createRef();
    }

    componentDidMount() {
        const node = this.containerRef.current;
        this.trapFocus.determineFocusable(node);
    }

    handleKeydown = (e) => {
        if (e.keyCode === 9) { // Tab key
            this.trapFocus.handleTabbing(e);
        }
    }

    render() {
        return (
            <div ref={this.containerRef} onKeydown={this.handleKeydown}>
                ...
            </div>
        )
    }
}

Development

Script	Description
npm install	Install the project dependencies; once installed npm run build is also executed
npm start	Run the webpack dev server and open the test harness in a browser
npm run start:silent	Runs the webpack dev server but does not open a browser window
npm run start:docs	Run the dev server and open the component documentation in a browser window
npm run build	Compile Less (CSS) and Javascript assets
npm run test	Run unit tests, stylelint, eslint and provide code coverage metrics
npm run test:unit	Run unit tests only. To debug within the test suite pass the --inspect flag to mocha like so: npm run test:unit -- --inspect and add debugger; //eslint-disable-line to the line in the test file you would like to break on. If you need to break immediately, use --inspect --inspect-brk.
npm run test:style	Run linters to verify code meets the configured eslint settings
npm run test:coverage	Run npm run test:unit and provide metrics about coverage

Notes

• Any time the scripts related to start are executed the documentation or project demo is available in your browser at localhost:8000 or 0.0.0.0:8000.
• To see a complete list of npm scripts, use: npm run

Component Documentation

The npm run start:docs command will build, run and launch the documentation that has been configured for the project. Documentation is configured through the discovery.json file in the root of the project. To add new documentation, add an entry to discovery.json and configure the options to point to the new markdown based documentation. Additionally, the npm run build:docs command is configured to build the documentation and publish it as the Github Pages content for the associated repository.

Further Reading

• Changelog
• Code of conduct
• Contributing
• License