@q42/floating-focus-a11y
An a11y focus solution that is clear, beautiful and easy to implement.
Last updated a year ago by fricorico .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @q42/floating-focus-a11y 
SYNC missed versions from official npm registry.

floating-focus-a11y Build Status npm version

A clear, beautiful and easy to implement focus-state solution.

Installation

With npm installed, run

$ npm install @q42/floating-focus-a11y --save

Usage

Import the package and instantiate the class on page load:

import FloatingFocus from '@q42/floating-focus-a11y';
new FloatingFocus(containerElement); // Element is an optional parameter which defaults to `document.body`

Define a default outline and outline-offset. Either of these values can be overruled per component:

// Hide all default focus states if a mouse is used, this is completely optional ofcourse
*:focus {
  outline: none;
}

// Default outline value, which will be applied to all elements receiving focus, this is a required step.
.floating-focus-enabled *:focus, .floating-focus-enabled .focus {
  outline: dodgerblue solid 2px;
  outline-offset: 8px;
}

// Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed.
.floating-focus-enabled [type="button"]:focus {
  outline-color: green;
  outline-offset: 4px;
}

It's also possible to define a focus-target attribute on focusable elements:

<input type="file" class="hidden" id="file-upload-123" focus-target="file-upload-123-label"/>
<label id="file-upload-123-label" for="file-upload-123">Please upload a file</label>

This will append the focus class to the target element and make the focus box appear around the target element.

Develop

$ npm run build
$ npm run watch
$ npm run test

Deploy

# bump version
$ npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

# pubplish
$ npm publish

License

MIT

Current Tags

  • 1.2.5                                ...           latest (3 months ago)

8 Versions

  • 1.2.5                                ...           3 months ago
  • 1.2.4                                ...           7 months ago
  • 1.2.3                                ...           8 months ago
  • 1.2.1                                ...           9 months ago
  • 1.2.0                                ...           9 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (18)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |