postcss / postcss-focus Goto Github PK

View Code? Open in Web Editor NEW

117.0 9.0 14.0 522 KB

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

License: MIT License

JavaScript 100.00%

postcss-focus's Introduction

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.

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

*: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.

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

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

Usage

Step 1: Install plugin:

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:

module.exports = {
  plugins: [
+   require('postcss-focus'),
    require('autoprefixer')
  ]
}

Options

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.

postcss-focus's People

Contributors

Stargazers

Watchers

Forkers

rlugojr roundingwellos humanelement clickbox vrizo vadsaaa begrafx isabella232 euaaaio seanpm2001

postcss-focus's Issues

Skip transformation

Is there any way of skipping transformation for particular selectors (e.g. you only want to have :hover styles)?

Using focus-visible instead of focus

If you use focus wherever you use hover, then the hover state seems to freeze after clicking. And just for keyboard accessibility you should use focus-visible. Can you change the default action or let it adjust yourself to set your own focus type?

Add option to add :focus-visible as separate rule for better support.

:focus-visible support is not that great. Currently it is at 91.41% support.

In CSS, if one selector is invalid, the entire rule is discarded. This means, for browsers which don't support focus-visible, this entire rule will be discarded, and :hover state will not work.

.myclass:hover,
.myclass:focus-visible {
  background: blue;
}

A solution would be to split up the rule. E.g.:

.myclass:hover {
  background: blue;
}

.myclass:focus-visible {
  background:blue;
}

/* or */
.myclass:matches(:focus-visible, :hover) { /* ... */ }

Would be nice to at least have this as an option. I am not sure if :matches could be a solution.

Option to apply default styles

If you want to apply :hover styles to :focus styles, I think it’s reasonable to think that you want to remove default outline on focus with outline:0;. Therefore, maybe it would be nice to have some initial styling applied?

Add option to specify custom :hover selector?

We use what-input to apply the :focus effect only when the user is using the keyboard to navigate.

I'd like to use your postcss plugin, but I'd need it to add the proper selector instead of just :focus.

Example:

.my-button:hover {
  background: red;
}

==>

.my-button:hover,
[data-whatinput="keyboard"] .my-button:focus {
  backgroun: red;
}

The plugin should then allow us to define a custom pattern, for example:

// default pattern
<selector>:focus

// custom pattern
[data-whatinput="keyboard"] <selector>:focus

Is it something feasible?

Error with PostCSS v8

Hello,

Trying to build a project that uses postcss-focus I'm experimenting the following error:

failed Building production JavaScript and CSS bundles - 76.026s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-focus requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/Users/kikobeats/Projects/microlink/www/node_modules/postcss-loader/node_modules/postcss/lib/processor.es6:117:15)
    at new Processor (/Users/kikobeats/Projects/microlink/www/node_modules/postcss-loader/node_modules/postcss/lib/processor.es6:38:25)
    at postcss (/Users/kikobeats/Projects/microlink/www/node_modules/postcss-loader/node_modules/postcss/lib/postcss.es6:34:10)
    at /Users/kikobeats/Projects/microlink/www/node_modules/postcss-loader/src/index.js:140:12

File: src/styles/main.scss

The error is saying PostCSS 8 needs to be used, but the strange this is I have postcsss@8

$ cat node_modules/postcss/package.json | grep "version"
  "version": "8.0.5"