postcss-focus

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-focus
7.0.0a year ago9 years agoMinified + gzip package size for postcss-focus in KB

Readme

PostCSS Focus
title="Philosopher’s stone, logo of PostCSS" src="https://postcss.org/logo-leftp.svg">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;
}

alt="Sponsored by Evil Martians" width="236" height="54">

Docs

Read full docs here.