begrafx/postcss-focus

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

PostCSS Focus

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.