PostCSS plugin to add :focus selector to every :hover for keyboard accessibility
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
index.test.js
package.json
yarn.lock

README.md

PostCSS Focus Build Status

PostCSS plugin to add :focus selector to every :hover for keyboard accessibility.

See also postcss-pseudo-class-enter for more explicit way.

*:focus {
    outline: 0;
}
.button:hover {
    background: red;
}
*:focus {
    outline: 0;
}
.button:hover, .button:focus {
    background: red;
}

If there is a :focus selector, it will be excluded from the processing.

.a:hover, .b:hover {
    outline: 0;
}
.b:focus {
    background: red;
}
.a:hover, .b:hover, .a:focus {
    outline: 0;
}
.b:focus {
    background: red;
}

Usage

postcss([ require('postcss-focus') ])

See PostCSS docs for examples for your environment.