npm

Need private packages and team management tools?Check out npm Orgs. »

@hiswe/focus-ring

1.0.5 • Public • Published

accessible-focus-ring

npm version Build Status

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

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

other stuff

run the tests

  • clone the project
  • npm install
  • npm test

thanks

install

npm i @hiswe/focus-ring

Downloadsweekly downloads

12

version

1.0.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability