82 lines
3.1 KiB
Elixir
82 lines
3.1 KiB
Elixir
defmodule MvWeb.MemberLive.IndexA11yHardeningTest do
|
|
@moduledoc """
|
|
§3.5 — WCAG 2.2 AA posture: ≥24px interactive targets in both densities,
|
|
scroll-margin on rows so a focused row is not obscured by the sticky header,
|
|
select-all `indeterminate` for partial selection, and reflow markup keeping the
|
|
table in its own focusable scroll region.
|
|
"""
|
|
use MvWeb.ConnCase, async: false
|
|
|
|
import Phoenix.LiveViewTest
|
|
|
|
alias Mv.Helpers.SystemActor
|
|
|
|
@moduletag :ui
|
|
|
|
setup %{conn: conn} do
|
|
actor = SystemActor.get_system_actor()
|
|
|
|
members =
|
|
for i <- 1..3 do
|
|
{:ok, m} =
|
|
Mv.Membership.create_member(
|
|
%{first_name: "Wcag#{i}", last_name: "Row", email: "wcag#{i}@example.com"},
|
|
actor: actor
|
|
)
|
|
|
|
m
|
|
end
|
|
|
|
%{conn: conn_with_oidc_user(conn), members: members}
|
|
end
|
|
|
|
test "rows reserve scroll-margin under the sticky header", %{conn: conn} do
|
|
{:ok, _view, html} = live(conn, ~p"/members")
|
|
assert html =~ "scroll-mt-16"
|
|
end
|
|
|
|
test "the table lives in its own focusable scroll region that reflows", %{conn: conn} do
|
|
{:ok, _view, html} = live(conn, ~p"/members")
|
|
|
|
# Focusable region (1.4.10: table scrolls within its own focusable region).
|
|
assert html =~ ~r/data-testid="members-table-scroll"[^>]*tabindex="0"/
|
|
# The toolbar reflows to one column on narrow viewports.
|
|
assert html =~ "flex-wrap"
|
|
end
|
|
|
|
test "interactive row targets meet the >=24px minimum in both densities", %{conn: conn} do
|
|
{:ok, view, _html} = live(conn, ~p"/members")
|
|
|
|
# The row/select-all checkboxes are pinned to 1.5rem (24px) in both densities
|
|
# via the `#members-table-guard input.checkbox` CSS rule (WCAG 2.5.8), which
|
|
# overrides DaisyUI's density-proportional sizing. The faithful proxy in a
|
|
# LiveView test is that the guarded checkbox markup exists in both densities.
|
|
assert has_element?(view, "#members-table-guard input[type='checkbox'].checkbox")
|
|
|
|
# Toggle density via the view-settings dropdown (default is comfortable, so
|
|
# this switches to compact) to check the other density too.
|
|
view |> element("[data-testid='view-settings-button']") |> render_click()
|
|
view |> element("[data-testid='view-setting-density']") |> render_click()
|
|
assert has_element?(view, "#members-table-guard input[type='checkbox'].checkbox")
|
|
end
|
|
|
|
test "select-all reflects indeterminate for a partial selection", %{
|
|
conn: conn,
|
|
members: members
|
|
} do
|
|
{:ok, view, _html} = live(conn, ~p"/members")
|
|
|
|
# No selection: not indeterminate.
|
|
assert has_element?(view, "#select-all-checkbox[data-indeterminate='false']")
|
|
|
|
# Select one of several -> partial -> indeterminate.
|
|
[m | _] = members
|
|
render_click(view, "select_member", %{"id" => m.id})
|
|
assert has_element?(view, "#select-all-checkbox[data-indeterminate='true']")
|
|
|
|
# Select all -> fully checked, not indeterminate.
|
|
view |> element("[phx-click='select_all']") |> render_click()
|
|
assert has_element?(view, "#select-all-checkbox[data-indeterminate='false']")
|
|
assert has_element?(view, "#select-all-checkbox[checked]")
|
|
end
|
|
end
|