1. Accessibility tree invariant: every interactive element has programmatically determinable name, role, and state
2. Focus visibility invariant: keyboard users can always identify which element receives next keystroke
3. Keyboard operable invariant: all pointer functions available via keyboard
4. Time limit adjustability: user-facing time limits can be disabled or extended 10x
5. Error prevention (high-stakes): reversibility, validation, or confirmation before finalization

• Race conditions and async ordering
• Hydration mismatch
• Frame budget and jank
• Event graph correctness (capture/bubble)
• Layout correctness (float clearing, grid alignment)
• Backend-side constraints
• Behavioral correctness beyond accessibility tree

a11y_contract cluster has WCAG as authoritative reference. Other clusters must cite framework docs, issue trackers, and observed defects since WCAG doesn't cover them.

Each APG pattern documents:

• Keyboard interactions (many marked "optional")
• Focus management rules
• Required ARIA roles and attributes
• Behavioral requirements (mutual exclusivity, modal semantics)

1. Explicit prescriptions: "Tab and Shift+Tab do not move focus outside the dialog"
2. Implicit constraints in examples
3. ARIA semantics as behavioral specification (aria-modal="true")
4. "Not applicable" as silent specification (alerts must NOT consume keyboard input)

• Animation timing and easing
• Focus restoration after async operations
• Autocomplete filtering algorithms
• Nesting and composition rules
• Dynamic content loading strategies

APG strongly specifies roles and attributes; weakly specifies timing, composition, and dynamic content. Goldberry fills the behavioral gaps.

• Granular part access for customization
• Roving tabindex for complex components
• Behavior wiring handled internally
• Explicit ARIA synthesis

• Component-specific accessibility assertions
• Multi-browser focus/keyboard validation
• Jest-based with custom a11y utilities

• data-focus and activeOption for tracking
• Modal focus trap with scroll locking and inert
• Framework variants (React, Vue) with contract parity

• Focus trap and restoration tests
• ARIA pattern validation
• Interaction module helpers

• useDialog, useButton, useMenu etc.
• Developers don't need ARIA knowledge
• Portable across frameworks
• TypeScript contracts

• Automated jest-axe integration
• Screen reader testing (NVDA, JAWS, VoiceOver)
• Complete keyboard flow tests

• Single invariant: focus cannot escape without closing
• Framework agnostic
• Lightweight, no dependencies

Focus trap strictness is a spectrum. GitHub issues document edge cases (datepicker within dialog) where strict trapping breaks UX.

• Components behave like native HTML elements
• Warns when focus management incomplete
• as prop for semantic customization

"In most cases, developers don't need to know anything about ARIA to use Reach UI" - accessibility built in, not bolted on.

• "States that should be unreachable but are"
• "Transitions that should fire but don't"
• Multiple conflicting state representations (boolean flags)

• Hierarchy: nested states with OR semantics
• Orthogonality: parallel regions with AND semantics
• Broadcast: events propagate to listening regions
• Guards: preconditions on transitions
• Actions: postconditions (entry/exit/transition)

• Explicit state enumeration
• Guards as preconditions
• Actions as postconditions
• TypeScript integration: impossible states as type errors
• Model-based testing with state/transition coverage

• Layout and visual geometry
• Accessibility semantics
• Timing and performance
• Continuous values
• Rendering and DOM state

A component is incompletely specified by its source code. Its full specification is the cartesian product of (component x props x state x context). Render that product as cards, and the contract becomes inspectable, sharable, version-controlled.

Cards ARE the test cases ARE the documentation ARE the demo ARE the regression suite. Same artifact, four uses.

Five layers of contract enforcement, none framed as "formal methods" but collectively producing the strongest UI-correctness story in the wild. Each layer assumes previous layer's invariants hold.

ClojureScript's adoption ceiling is a hiring-pool problem. The stack works. There aren't enough engineers willing to write parens.

Devcards proves corpus-as-development-environment works. The invariants the CLJS stack enforces by construction can be extracted, cataloged, and verified post-hoc in other paradigms. That's the wedge.

• shadow-cljs manifest-based code splitting
• Helix: React wrapper preserving CLJS invariants
• Reagent ratoms: closure-stale-closure defect class structurally cannot exist
• Reframe-10x: event/coeffect/effect flow inspectable as corpus
• Electric Clojure: bombadil:goldberry split collapses; same form executes server and client

• Missing attributes (alt, labels, roles)
• Color contrast violations
• Heading hierarchy breaks
• ARIA attribute presence/syntax

• Relevance of alternative text
• Complex dynamic interactions
• Logical form field grouping
• Contextual accessibility decisions

Native HTML elements have implicit accessibility contracts. A native <button> has keyboard support, tabindex, screen reader role, hover/pressed states by default. A <div role="button"> lacks these.

Tests using getByRole() fail if an element lacks accessible name or role, forcing developers to fix accessibility before the test passes. This is behavioral contract validation.

ARIA snapshot testing captures page as accessibility hierarchy. When snapshot changes unexpectedly, test fails. Validates structural invariants without vision models.

• Keyboard navigation behavior
• WCAG 2.1 AA compliance
• Component state matrices
• Multi-component interaction patterns
• Content rules

• Animation timing
• State transition sequences
• Error recovery
• Responsive breakpoint rules
• Platform adaptation

No design system enforces behavioral contracts like formal methods. Accessibility is the most formalized (WCAG criteria are testable). Manual testing still required for interaction feel and edge cases.

• Mathematical set theory for dialog specifications
• 200 lines to specify a button's behavior
• No path from spec to running code
• Correct invariant notation, unusable ergonomics

• Applied to safety-critical UI (avionics, ATC)
• State machines as core abstraction
• Rare skill set, niche tools

• Place-transition graphs for concurrent events
• Explosion problem: 10 actions x 10 states = unreadable diagrams
• Correct about concurrency; wrong abstraction boundary

• UI components as processes with channels
• Close to modern component architecture
• No code generation; alien notation

• Structured test scenarios
• Artifact-as-spec approach
• Lost to prototyping tools

• Hierarchical task decomposition
• Temporal sequencing
• Tool existed (CTTE); adoption stayed academic

• Object-oriented abstract UI components
• Closest to modern component frameworks
• Two decades too early

JS compiler + linter + type checker + dependency manager + module system + minifier. Used for Gmail, Maps, Docs. Single source-of-truth because Closure forces it. Didn't conquer outside Google: ergonomic cost (JSDoc annotations uglier than TypeScript).

Extends contract to build, deploy, test, depend. Hermetic, reproducible. Goldberry-shaped at every layer. Adoption: Google, parts of Meta/Stripe. Cost: ergonomics.

Closest single-place stack. Same Elixir code generates server logic, view, client interaction contract, deployment artifact. Invariant claim: there is no separate frontend. Reaches superset of most concerns except CSS-as-invariant.