e11y-tdd

Excessibility TDD - Build with Inspection

Build Phoenix LiveView features with full visibility into rendered HTML and state.

Core Powers

• html_snapshot(view) - Capture HTML at any point (sprinkle liberally while building)
• axe-core checks - Ensure accessibility (WCAG compliance)
• Timeline analysis - See state evolution across events

The e11y-TDD Cycle

1. EXPLORE   - Add html_snapshot(view) calls to see what's rendered
2. RED       - Write test with snapshot at key moment
3. GREEN     - Implement feature, use snapshots to debug
4. CHECK     - Run `mix excessibility` for axe-core/a11y validation
5. CLEAN     - Remove temporary snapshots, keep essential ones

Snapshot Strategies

Temporary Snapshots (for building/debugging)

Sprinkle these while building. Delete when feature works.

test "building new feature" do
  {:ok, view, _html} = live(conn, "/page")

  # Sprinkle these to see what's happening
  html_snapshot(view)  # <- see initial state

  view |> element("button") |> render_click()
  html_snapshot(view)  # <- see after click

  view |> form("#my-form") |> render_submit(%{name: "test"})
  html_snapshot(view)  # <- see after submit

  # Delete these when feature works
end

Permanent Snapshots (for regression testing)

Keep these - axe-core will check them on every run.

test "feature works and is accessible" do
  {:ok, view, _html} = live(conn, "/page")
  view |> element("button") |> render_click()

  # Keep this - axe-core will check it on every run
  html_snapshot(view)
end

When to Use

• Building any LiveView feature - snapshots show you what's rendered
• Debugging state issues - sprinkle snapshots, inspect, delete
• Accessibility compliance - axe-core catches WCAG violations
• Form implementations - see validation errors, field states
• Modals/dialogs - verify focus management, aria attributes
• Dynamic content - check aria-live regions render correctly