mmahandev / Focusoverlay
Licence: mit
Library for creating animated overlays on focused elements
Stars: ✭ 167
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Focusoverlay
Chakra Ui Vue
⚡️ Build scalable and accessible Vue.js applications with ease.
Stars: ✭ 993 (+494.61%)
Mutual labels: library, accessibility, a11y
vue-focus-loop
Vue component that helps you to to trap focus in an element.
Stars: ✭ 23 (-86.23%)
Mutual labels: accessibility, a11y, focus
Ally.js
JavaScript library to help modern web applications with accessibility concerns
Stars: ✭ 1,447 (+766.47%)
Mutual labels: accessibility, a11y, focus
Skin
Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
Stars: ✭ 126 (-24.55%)
Mutual labels: library, accessibility, a11y
Lumberjack
An automated website accessibility scanner and cli
Stars: ✭ 109 (-34.73%)
Mutual labels: accessibility, a11y
Accordion
Accordion module created in pure javascript & CSS. Very useful to create FAQ lists on your website.
Stars: ✭ 94 (-43.71%)
Mutual labels: accessibility, a11y
React Interactive
Better hover, active and focus states than CSS pseudo classes, and a callback when the interactive state changes
Stars: ✭ 115 (-31.14%)
Mutual labels: accessibility, focus
Pa11y Webservice
Pa11y Webservice provides scheduled accessibility reports for multiple URLs
Stars: ✭ 122 (-26.95%)
Mutual labels: accessibility, a11y
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-49.1%)
Mutual labels: accessibility, a11y
Top People To Follow In Web Accessibility
A list of the top people to follow in web accessibility and web standards.
Stars: ✭ 117 (-29.94%)
Mutual labels: accessibility, a11y
Ember A11y Testing
A suite of accessibility tests that can be run within the Ember testing framework
Stars: ✭ 125 (-25.15%)
Mutual labels: accessibility, a11y
Accessible Html Content Patterns
♿️ The full HTML5 Doctor Element Index as well as common markup patterns for quick reference.
Stars: ✭ 93 (-44.31%)
Mutual labels: accessibility, a11y
A11y Dialog
A very lightweight and flexible accessible modal dialog script.
Stars: ✭ 1,768 (+958.68%)
Mutual labels: accessibility, a11y
Acot
💎 Accessibility Testing Framework. More accessible web, all over the world.
Stars: ✭ 112 (-32.93%)
Mutual labels: accessibility, a11y
Svelte Navigator
Simple, accessible routing for Svelte
Stars: ✭ 125 (-25.15%)
Mutual labels: accessibility, a11y
Parvus
An accessible, open-source image lightbox with no dependencies.
Stars: ✭ 124 (-25.75%)
Mutual labels: accessibility, a11y
Accessibilitools
UI tools to help make your Android app accessible.
Stars: ✭ 81 (-51.5%)
Mutual labels: accessibility, a11y
Accesslint Ci
Install the GitHub Integration https://github.com/apps/accesslint
Stars: ✭ 82 (-50.9%)
Mutual labels: accessibility, a11y
Focus Overlay
Library for creating overlays on focused elements. It was built with accessibility in mind with trigger keys and ARIA roles.
Install
Install with npm:
npm install focus-overlay
Install in browser:
<!-- In the <head> -->
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/focusoverlay.css" />
<!-- End of <body> -->
<script src="//unpkg.com/[email protected]/dist/focusoverlay.js"></script>
The CSS is small enough to copy directly into your project's main stylesheet if you desire.
Usage
FocusOverlay(element, options)
import FocusOverlay from 'focus-overlay';
// Option 1: Zero config - Scopes to <body> element and uses default settings
const fo = new FocusOverlay();
// Option 2: Define an element
const fo = new FocusOverlay(document.body, options);
The element is what FocusOverlay will be scoped to. It takes either a string CSS selector or an HTML element. If no element is supplied it will scope to the <body> element by default.
The options is an optional parameter. Takes an object. See options for more info.
By default Focus Overlay will show and animate when hitting keyboard keys such as the Tab key. It's also preconfigured to animate via CSS transitions.
Options
The default options are:
// Class added to the focus box
class: '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 everything
alwaysActive: false,
// Reposition focus box on transitionEnd for focused elements
watchTransitionEnd: true,
// Initialization event
onInit: function(focusoverlay) {},
// Before focus box move
onBeforeMove: function(focusoverlay) {},
// After focus box move
onAfterMove: function(focusoverlay) {},
// After FocusOverlay is destroyed
onDestroy: function(focusoverlay) {}
Methods
// Example use of the "moveFocusBox" method
focusoverlay.moveFocusBox(document.querySelector('body'));
moveFocusBox
Arguments: Element
Moves the focusBox to a target element
Destroy
Arguments: None
Deconstructs the FocusOverlay instance
Data Attribute Settings
In some cases you might want FocusOverlay to ignore certain elements, or focus other elements instead. There are a few options available:
Example usage for data-focus:
<div id="input-wrapper">
<input type="text" data-focus="#input-wrapper" />
</div>
In this example when the user focuses the input, FocusOverlay will instead target the wrapper. The data-focus attribute accepts a querySelector string.
Example usage for data-focus-label:
<label for="stylized-checkbox" class="rounded-checkbox">Click me</label>
<input
id="stylized-checkbox"
type="checkbox"
class="visually-hidden"
data-focus-label
/>
In this example when the user focuses the input, FocusOverlay will instead target its associated label.
Example usage for data-focus-ignore:
<a href="/info.html" data-focus-ignore>Really important information here!</a>
In this example FocusOverlay will not target this element at all.
Browser support
Focus Overlay works on all modern browsers including IE11.
Notes
- Special thanks to NV as it was inspired by his Flying Focus UI concept.
- The jQuery version is still available at in the jQuery branch. It is no longer mantained.
Todo
- Make zIndex be CSS only
- Add refreshPosition method
- Add currentTarget var
- Fix iframe focus when alwaysActive is true
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].