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
Vue layer that implements the focus overlay plugin, allowing for better focus handling.
yarn add @limbo-works/focus-overlay
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;
}
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
- focus-overlay
- limbo-works
- 4 months ago
- 2 dependencies
Assets
- focus-overlay-1.0.0.tgz
Download activity
- Total downloads 697
- Last 30 days 355
- Last week 256
- Today 0