accessible-focus-ring

 

remove the focus-ring while staying accessible
for 1.5kb (0.65 kB gzipped), including JS & CSS

- the problem
- use
- as a global variable
- as a NPM module
- styling files
- configuration
- class
- onTab
- demo
- github pages
- local
- other stuff
- run the tests
- thanks

the problem

Focus rings on elements are mostly not wanted on mobile.
But they are good for accessibility!

So we remove it until someone use the tab key.

See this hackernoon article by David Gilbertson for more details.

use

$3

``html







`

$3

`sh
npm install @hiswe/focus-ring
`

commonJS

`js
const focusRing = require('@hiswe/focus-ring')
focusRing()
`

ES module

`js
import focusRing from '@hiswe/focus-ring'
focusRing()
`

$3

this package provides 2 styling files:

`
@hiswe/focus-ring/dist/focus-ring.min.css
@hiswe/focus-ring/dist/focus-ring.scss
`

if you're using the SCSS files you can override the class used by setting:

`scss
$focus-ring-selector: '.my-custom-selector';
@import '~@hiswe/focus-ring/dist/focus-ring.scss';
`

configuration

focus-ring allows you to have more control by passing a configuration object:

`js
focusRing({
class: 'user-not-tabbing',
onTab: function noop() {},
})
`

#### class

type: string
default: 'user-not-tabbing'

Change the CSS class name.

⚠️ Changing the class won't update the CSS file.

You will have to:

- provide your own
- or use & configure the scss file

#### onTab

type: function
default: function noop(){}

you can specify a callback which will be called after the first user tab

demo

$3

https://hiswe.github.io/accessible-focus-ring/

$3

you'll need node

- clone the project
- npm install
- npm start
- go to: http://localhost:8080

other stuff

$3

- clone the project
- npm install
- npm test`

$3

- David Gilbertson for the snippet