https://github.com/postcss/postcss-focus
PostCSS plugin to add :focus selector to every :hover for keyboard accessibility
https://github.com/postcss/postcss-focus
Last synced: 11 months ago
JSON representation
PostCSS plugin to add :focus selector to every :hover for keyboard accessibility
- Host: GitHub
- URL: https://github.com/postcss/postcss-focus
- Owner: postcss
- License: mit
- Created: 2015-04-23T14:08:59.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T14:18:22.000Z (over 1 year ago)
- Last Synced: 2024-10-29T14:38:24.565Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 510 KB
- Stars: 117
- Watchers: 9
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Focus
[PostCSS] plugin to add `:focus-visible` selector to every `:hover`
for keyboard accessibility.
See also [postcss-pseudo-class-enter] for more explicit way.
[postcss-pseudo-class-enter]: https://github.com/jonathantneal/postcss-pseudo-class-enter
[PostCSS]: https://github.com/postcss/postcss
```css
*:focus-visible {
outline: 0;
}
.button:hover {
background: red;
}
```
```css
*:focus-visible {
outline: 0;
}
.button:hover {
background: red;
}
.button:focus-visible {
background: red;
}
```
If there is a `:focus-visible` selector, it will be excluded
from the processing.
```css
.a:hover, .b:hover {
outline: 0;
}
.b:focus-visible {
background: red;
}
```
```css
.a:hover, .b:hover, .a:focus-visible {
outline: 0;
}
.b:focus-visible {
background: red;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-focus
```
**Step 2:** Check your project for existing PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-focus'),
require('autoprefixer')
]
}
```
## Options
```js
module.exports = {
plugins: [
require('postcss-focus')({
oldFocus: true,
splitRules: false,
})
]
}
```
### `oldFocus`
Type: `boolean`. Default: `false`.
Enable if you need to add the old `:focus` instead of `:focus-visible` selector
to every `:hover`.
### `splitRules`
Type: `boolean`. Default: `true`.
Disable if you need to append the selector. If you don't need to support browsers, which doesn't support `:focus-visible`, you can safely disable this option.
[official docs]: https://github.com/postcss/postcss#usage