Skip to content

focus-overlay 1.0.0

Install from the command line:
Learn more about npm packages
$ npm install @limbo-works/focus-overlay@1.0.0
Install via package.json:
"@limbo-works/focus-overlay": "1.0.0"

About this version

Focus Overlay

Vue layer that implements the focus overlay plugin, allowing for better focus handling.

Installation

yarn add @limbo-works/focus-overlay

Using the wrapper component

Make the plugin register by extending the layer in nuxt.config.js.

export default defineNuxtConfig({
    extends: [
        '@limbo-works/focus-overlay',
        ...
    ],
    ...
});

Then it will run in the client, by adding an overlaying focus element for you to style. To begin with, you will probably remove standard focus outlines:

:where(:focus) {
	    outline: none;
}

Then you can style the focus overlay by targeting the classes during its various states:

Class Description
.js-focus-overlay The base class of the focus overlay, always present when the focus overlay is there.
.js-focus-overlay--is-active This class is added to the focus overlay when an element has focus, whether that be via keyboard or mouse.
.js-focus-overlay--is-active-visible This class is added to the focus overlay when an element has visible focus, ie. focus via the keyboard.
.js-focus-overlay__partial The focus overlay contains children elements for all the partials of the focus, as to better handle line breaks and so forth. This is their class.
.js-focus-overlay__target This class is added to the actual element receiving focus in the dom.

A focus styling could look like this (a black and a white outline for optimal accessibility):

.js-focus-overlay--is-active-visible,
.js-focus-overlay--is-active-visible .js-focus-overlay__partial {
	    transition: all 0.2s ease-in-out;
}
.js-focus-overlay--is-active-visible .js-focus-overlay__partial {
	    border: inherit;
	    border-radius: 2px;
}
.js-focus-overlay--is-active-visible .js-focus-overlay__partial:before,
.js-focus-overlay--is-active-visible .js-focus-overlay__partial:after {
	    position: absolute;
	    left: 0;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    content: '';
	    border: inherit;
	    border-radius: 2px;
}
.js-focus-overlay--is-active-visible .js-focus-overlay__partial:before {
	    outline-offset: 3px;
	    outline-style: solid;
	    outline-color: black;
}
.js-focus-overlay--is-active-visible .js-focus-overlay__partial:after {
	    outline-offset: 5px;
	    outline-style: solid;
	    outline-color: white;
}

Special Attributes

For extra control over the focus overlay's behavior, you can sprinkle a couple of special attributes into the dom. data-focus=".some-query .selector" allows you to redirect a recieved focus to visually be placed on another element, and data-focus-ignore allows an element to be ignored by the focus overlay altogether.

Details


Assets

  • focus-overlay-1.0.0.tgz

Download activity

  • Total downloads 697
  • Last 30 days 355
  • Last week 256
  • Today 0

Recent versions

View all