no-outline-none.md

Pattern: Use of outline clearing

Issue: -

Description

Disallows outline clearing.

Sources:

• DON'T DO IT!
• a11yproject
• MDN

Examples

The following pattern are considered violations:

.foo:focus {
  outline: 0;
}

.bar:focus {
  outline: none;
}

.baz:focus {
  outline: none;
  border: transparent;
}

.quux {
  .quuux:focus {
    outline: 0;
  }
}

The following patterns are not considered violations:

.foo {
  outline: 0;
}

$primary-color: #333;
.bar:focus {
  outline: 1px solid $primary-color;
}

.baz:focus {
  outline: 1px solid #333;
}

.quux:focus {
  outline: 0;
  border: 1px solid #000;
}