accessible-focus-ring
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-ringcommonJS
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.
You will have to:
- provide your own
- or use & configure the
scssfile
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 installnpm start- go to: http://localhost:8080
other stuff
run the tests
- clone the project
npm installnpm test
thanks
- David Gilbertson for the snippet