An accessible way of removing :focus outline on click.
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
: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.
npm install unfocus --save
bower install unfocus --save
By default the following style will be applied.
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.
unfocusstyle'box-shadow: none !important;';