Skip to content

Commit

Permalink
Added instructions for the default CSS properties that are required
Browse files Browse the repository at this point in the history
  • Loading branch information
Ricardo Snoek committed Sep 13, 2019
1 parent 7b441e2 commit 0db9154
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 0db9154

Please sign in to comment.