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

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

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

# Run tests (generates snapshots)
mix test test/my_live_view_test.exs
 
# Check accessibility on all snapshots
mix excessibility
 
# Run specific test then check its snapshots
mix excessibility test/my_live_view_test.exs
 
# Debug with timeline analysis
mix excessibility.debug test/my_live_view_test.exs

test/excessibility/
  html_snapshots/           # HTML files from html_snapshot() calls
    MyApp_PageTest_42.html  # Module_Line.html naming
  timeline.json             # State evolution (if using debug)

test "form shows validation errors accessibly" do
  {:ok, view, _html} = live(conn, "/register")
 
  # Submit empty form
  view |> form("#register-form") |> render_submit(%{})
 
  # Snapshot captures error state - axe-core will check:
  # - Error messages are associated with inputs (aria-describedby)
  # - Required fields are marked (aria-required)
  # - Invalid fields have aria-invalid
  html_snapshot(view)
end

test "modal is accessible" do
  {:ok, view, _html} = live(conn, "/page")
 
  # Open modal
  view |> element("#open-modal") |> render_click()
 
  # Snapshot captures modal state - axe-core will check:
  # - role="dialog" or aria-modal
  # - aria-labelledby for title
  # - Focus trapped inside modal
  html_snapshot(view)
end

test "loading state is accessible" do
  {:ok, view, _html} = live(conn, "/dashboard")
 
  # Trigger async load
  view |> element("#refresh") |> render_click()
 
  # Snapshot during loading - axe-core will check:
  # - aria-busy on loading container
  # - Loading indicator has appropriate role
  html_snapshot(view)
end