unfocus
v1.0.1
Published
An accessible way of removing :focus outline on click.
Downloads
8,450
Maintainers
Readme
unfocus
An accessible way of removing :focus outline on click.
Intro
Accessibility on the web is very important and when you have to make the decision between accessibility and style, I urge you to always choose accessibility. That said, sometimes there is a way to make something accessible with style, and this package tries to help you. The idea is to keep the default outline
on :focus
(or any alternative highlight on :focus
) but remove it when the user actually clicks on an item, as the highlight is needed for keyboard navigation only.
Installation
via npm
npm install unfocus --save
via bower
bower install unfocus --save
API
By default the following style will be applied.
:focus{
outline: none !important;
}
However, you can change the style that is applied to :focus
by passing anything to the .style
method. This will be automatically added to the :focus
style, that is used to hide the highlight on click.
unfocus.style('box-shadow: none !important;');