Nihilist Postmodern Mistake
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@q42/floating-focus-a11y

1.2.5 • Public • Published

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

Install

npm i @q42/floating-focus-a11y

DownloadsWeekly Downloads

487

Version

1.2.5

License

MIT

Unpacked Size

154 kB

Total Files

29

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar