Accessible Animated Focus Box Plugin With jQuery - FocusOverlay

Accessible Animated Focus Box Plugin With jQuery - FocusOverlay

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.

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()

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

  • Publication date: 30.01.2018
  • Source