FocusRingBase [template] v1.0.0

A baseline focus ring CSS template that satisfies WCAG 2.2 SC 2.4.11. Use as the foundation for per-component focus customization.

Language

css

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Body

    /* Focus ring — satisfies WCAG 2.2 SC 2.4.11 */
    /* Apply to your component's :focus-visible selector */

    :focus-visible {
      outline: {WIDTH} solid {COLOR};
      outline-offset: {OFFSET};
      border-radius: {RADIUS};

      /* Remove default browser style to avoid double ring */
      /* Do NOT add outline: none to :focus — only to :focus:not(:focus-visible) */
    }

    /* Optional: high-contrast mode enhancement */
    @media (forced-colors: active) {
      :focus-visible {
        outline: {WIDTH} solid ButtonText;
        outline-offset: {OFFSET};
      }
    }
  

Example

• Selector: button.primary
• Output:

        button.primary:focus-visible {
          outline: 2px solid currentColor;
          outline-offset: 2px;
          border-radius: inherit;
        }
        @media (forced-colors: active) {
          button.primary:focus-visible {
            outline: 2px solid ButtonText;
            outline-offset: 2px;
          }
        }
      
  

FocusRingBase [template] v1.0.0

A baseline focus ring CSS template that satisfies WCAG 2.2 SC 2.4.11. Use as the foundation for per-component focus customization.

Language

css

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Body

    /* Focus ring — satisfies WCAG 2.2 SC 2.4.11 */
    /* Apply to your component's :focus-visible selector */

    :focus-visible {
      outline: {WIDTH} solid {COLOR};
      outline-offset: {OFFSET};
      border-radius: {RADIUS};

      /* Remove default browser style to avoid double ring */
      /* Do NOT add outline: none to :focus — only to :focus:not(:focus-visible) */
    }

    /* Optional: high-contrast mode enhancement */
    @media (forced-colors: active) {
      :focus-visible {
        outline: {WIDTH} solid ButtonText;
        outline-offset: {OFFSET};
      }
    }
  

Example

• Selector: button.primary
• Output:

        button.primary:focus-visible {
          outline: 2px solid currentColor;
          outline-offset: 2px;
          border-radius: inherit;
        }
        @media (forced-colors: active) {
          button.primary:focus-visible {
            outline: 2px solid ButtonText;
            outline-offset: 2px;
          }
        }
      
  

Relations

related: [@community/value-focus-outline-width, @community/term-focus-ring, @w3c/fact-wcag-focus-contrast, @community/check-focus-visible, @community/check-focus-visible-styled, @community/anti-pattern-outline-suppression, @community/anti-pattern-invisible-focus]