Accessibility testing

Automated checks are useful, but they do not establish WCAG conformance on their own. Test Catnip components with keyboard, screen-reader, zoom/reflow, contrast, and manual content-adaptation checks in the consuming product.

WCAG 1.4.12 text spacing

WCAG 2.2 SC 1.4.12 requires content to remain readable and operable when users apply all of these values without changing another style property:

• line height of at least 1.5 times the font size;
• spacing after paragraphs of at least 2em;
• letter spacing of at least 0.12em;
• word spacing of at least 0.16em.

The values are test conditions, not required Catnip defaults. Passing means that text and functionality are not clipped, obscured, overlapped, or otherwise lost.

User stylesheets and DevTools

Ordinary selectors do not cross a custom element's Shadow DOM boundary: a document-level * rule styles the catnip-* host, not the elements inside its shadow root. Inherited values still flow in, so letter-spacing and word-spacing set on a host or any ancestor reach Catnip text, including native buttons and inputs. CatnipBadge keeps its designed tracking. Line height and paragraph spacing do not reach shadow content this way, because components set their own line heights and margins are not inherited.

To apply all four conditions inside Catnip, set its four inherited CSS custom properties alongside the standard properties so the same choices reach Catnip components and ordinary page content:

*,
*::before,
*::after {
  --catnip-text-spacing-line-height: 1.5 !important;
  --catnip-text-spacing-letter-spacing: 0.12em !important;
  --catnip-text-spacing-word-spacing: 0.16em !important;
  --catnip-text-spacing-paragraph-spacing: 2em !important;

  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-block-end: 2em !important;
}

When the Catnip variables are absent, components retain their token-based typography. Applications may set larger values; the WCAG values are a baseline rather than a ceiling.

The custom properties are an explicit Catnip integration hook. Extensions that only inject the standard declarations adjust letter and word spacing in Catnip but not line height or paragraph spacing. Test those extensions against Catnip before recommending them to users. Prefer a tool that traverses open shadow roots and applies all four WCAG test conditions directly to their contents.

Inspect every state and responsive width after applying the override. Include long translated labels, validation and supporting text, menus, dialogs, tooltips, tables, selected and disabled states, and content that normally truncates. Truncated content must remain available through an accessible mechanism.

Do not rely on axe, Lighthouse, or another automated scan alone for this criterion. A person must inspect the adapted layout and exercise its functionality.