remove the focus-ring while staying accessible
for 1.5kb (0.65 kB gzipped), including JS & CSS
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.
<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>npm install @hiswe/focus-ringcommonJS
const focusRing = require('@hiswe/focus-ring')
focusRing()ES module
import focusRing from '@hiswe/focus-ring'
focusRing()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';focus-ring allows you to have more control by passing a configuration object:
focusRing({
class: 'user-not-tabbing',
onTab: function noop() {},
})type: string
default: 'user-not-tabbing'
Change the CSS class name.
You will have to:
- provide your own
- or use & configure the
scssfile
type: function
default: function noop(){}
you can specify a callback which will be called after the first user tab
https://hiswe.github.io/accessible-focus-ring/
you'll need node
- clone the project
npm installnpm start- go to: http://localhost:8080
- clone the project
npm installnpm test
- David Gilbertson for the snippet