accessible-focus-ring

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

the problem
use
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

as a global variable

<head>
  <link rel="stylesheet" href="https://unpkg.com/@hiswe/focus-ring/dist/focus-ring.min.css">
  <script src="https://unpkg.com/@hiswe/focus-ring/dist/focus-ring.min.js"></script>
</head>
<body>
  <script>
    (function () {
      focusRing()
    }());
  </script>
</body>

as a NPM module

npm install @hiswe/focus-ring

commonJS

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

ES module

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

styling files

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:

$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:

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

github pages

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

local

you'll need node

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

other stuff

run the tests

clone the project
npm install
npm test

thanks

David Gilbertson for the snippet

Package detail

@hiswe/focus-ring

readme