Accessible Animated Focus Box Plugin With jQuery - FocusOverlay

Accessible Animated Focus Box Plugin With jQuery - FocusOverlay
File Size: 16.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An accessible, animated focus overlay plugin for jQuery that highlights the current focused element with a highly customizable focus box (focus border) when switching between elements with Tab key.

How to use it:

1. Import jQuery library and the jQuery FocusOverlay plugin's files into your document.

<link rel="stylesheet" href="src/focusOverlay.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="src/focusOverlay.js"></script>

2. Just call the function on document ready and done.

$(function(){

  $("body").focusOverlay();

});

3. Just call the function on document ready and done.

$(function(){

  $("body").focusOverlay();

});

4. To customize the focus box, pass the following options object to the focusOverlay() function.

$("body").focusOverlay({

  // ID added to the focus box
  id: "focus-overlay", 

  // Class added while the focus box is active
  activeClass: "focus-overlay-active", 

  // Class added while the focus box is animating
  animatingClass: "focus-overlay-animating", 

  // Class added to the target element
  targetClass: "focus-overlay-target", 

  // z-index of focus box
  zIndex: 9001, 

  // Duration of the animatingClass (milliseconds)
  duration: 500, 

  // Removes activeClass after duration
  inactiveAfterDuration: false, 

  // Tab, Arrow Keys, Enter, Space, Shift, Ctrl, Alt, ESC
  triggerKeys: [9, 36, 37, 38, 39, 40, 13, 32, 16, 17, 18, 27], 

  // Make focus box inactive when a non specified key is pressed
  inactiveOnNonTriggerKey: true, 

  // Make focus box inactive when a user clicks
  inactiveOnClick: true, 

  // Force the box to always stay active. Overrides inactiveOnClick
  alwaysActive: false
  
});

5. Move the focus box to a specific element.

$("body").focusOverlay("moveFocusBox", $("#element"));

6. Set the element you want to ignore.

<a href="#" data-focus-ignore>Ignore element</a>

7. Set focus on the target element.

<div id="target">
  <input type="text" data-focus="#target">
</div>

8. Set focus on the label element instead.

<label for="demo" class="demo">Click me</label>
<input id="demo" type="checkbox" class="demo" data-focus-label>

9. Event listeners.

$("body")
.on("foInit", function(event, focusOverlay) {
  // on init
})
.on("foBeforeMove", function(event, focusOverlay, $previousTarget, $currentTarget, $nextTarget) {
  // before move
})
.on("foAfterMove", function(event, focusOverlay, $previousTarget, $currentTarget) {
  // after move
})
.on("foDestroyed", function(event, focusOverlay) {
  // on destroy
}).focusOverlay()

Changelog:

2019-03-01

  • Add iframe check to event listener to destroy method

2018-10-02

  • Fix focusing of inner elements after transitionEnd

2018-03-19

  • Make data-focus-label elements focus wrapping <label> is no associated "for" attribute is found

2018-02-01

  • Make focusOverlay be scoped to the main element it's called on

This awesome jQuery plugin is developed by MauriceMahan. For more Advanced Usages, please check the demo page or visit the official website.