diff --git a/README.md b/README.md index 1bfa00d..14ea3c7 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,27 @@ $ npm install @q42/floating-focus-a11y --save ``` ## Usage +Import the package and instantiate the class on page load: ```javascript import { FloatingFocus } from '@q42/floating-focus-a11y'; new FloatingFocus(); ``` +Define a default outline and outline-offset. Either of these values can be overruled per component: +```css +// Default outline value, which will be applied to all elements receiving focus, this is a required step. +.floating-focus-enabled *:focus { + outline: dodgerblue solid 2px; + outline-offset: 8px; +} + +// Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed. +[type="button"]:focus { + outline: green dashed 1px; + outline-offset: 4px; +} +``` + ## Develop ```bash $ npm run build