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. ```elixir 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. ```elixir test "feature works and is accessible" do {:ok, view, _html} = live(conn, "/page") view |> element("button") |> render_click() ...