@chase439/flying-focus

Highlight HTML elements on focus for accessibility

Usage no npm install needed!

<script type="module">
  import chase439FlyingFocus from 'https://cdn.skypack.dev/@chase439/flying-focus';
</script>

README

Improvements to Original Repository

This is a fork of flying-focus. In the original repository, the focus disappears after 150ms. In this fork, it will remain visible when navigating using tab. Also, this fork:

  • adds package.json
  • separates src files (js and scss)
  • modularlizes the libary to work with turbolinks
  • jslints javascript
  • removes unnecessary files for the standalone version.

To Use

Install the package:

$ npm install @chase439/flying-focus

If you're using Turbolinks and jQuery,

// Require the javascript inside your application.js
require("@chase439/flying-focus/src/js/flying-focus.js")

// Import stylesheet inside your application.scss
@import "~@chase439/flying-focus/src/scss/flying-focus";

// Activate FlyingFocus
$( document ).on('turbolinks:load', function() {
  FlyingFocus.start();
});

If you're using native JavaScript, add the script and stylesheet files to your HTML and then activate it:

// Activate FlyingFocus
document.addEventListener("DOMContentLoaded", function() {
  FlyingFocus.start();
});

Focus Transition

Flying Focus icon

Flying Focus is a UI concept. It adds a transition to the focus outline when you tab around inputs, buttons, and links.