1.0.2 • Published 3 years ago
postcss-hover-focus-visible v1.0.2
PostCSS Hover focus-visible
PostCSS plugin to add :focus-visible
selector and/or :focus
to every :hover
, this is for keyboard accessibility.
Before
*:focus {
text-decoration: underline;
}
.button:hover {
color: blue;
}
After
*:focus {
text-decoration: underline;
}
.button:hover, .button:focus-visible {
color: blue;
}
If there is a :focus-visible
selector, it will be excluded from the processing.
Usage
Step 1: Install plugin:
npm install --save-dev postcss-hover-focus-visible
yarn add -D postcss-hover-focus-visible
Step 2: Add the plugin to postCSS plugins list:
var postcssHoverFocus = require('postcss-hover-focus-visible');
postcss([
postcssHoverFocus({focusVisible: true, focus: false})
])