Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

unfocus

1.0.1 • Public • Published

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;');

Install

npm i unfocus

DownloadsWeekly Downloads

113

Version

1.0.1

License

MIT

Unpacked Size

3.75 kB

Total Files

5

Last publish

Collaborators

  • avatar