template @community/template-focus-ring

Focus Ring

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

Skill: @community
Domain: accessibility
Version: 1.0.0
Quality: 4.0
Edges: 7 out · 13 in
Tokens: 47/307/307

$ prime install @community/template-focus-ring

Projection

3 levels · agent picks one per query

Always in _index.xml · the agent never has to ask for this.

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.

Loaded when retrieval picks the atom as adjacent / supporting.

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

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;
        }
      }

Loaded when retrieval picks the atom as a focal / direct hit.

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

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;
        }
      }

Source

where the compiled artifact came from

prime-system/examples/frontend-design/primes/compiled/@community/template-focus-ring/atom.yaml

Compiled at 2026-05-07