feat(member): bring the overview table up to WCAG 2.2 AA

This commit is contained in:
Simon 2026-07-06 10:49:10 +02:00
parent 0c375234c8
commit c2cb3edab8
6 changed files with 91 additions and 39 deletions

View file

@ -47,13 +47,16 @@ defmodule MvWeb.MemberLive.IndexA11yHardeningTest do
test "interactive row targets meet the >=24px minimum in both densities", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/members")
# Compact (default) and comfortable both keep the >=24px checkbox target.
assert has_element?(view, "input[type='checkbox'].min-h-6.min-w-6")
# 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")
# Switch to comfortable via the view-settings dropdown.
view |> element("[data-testid='view-settings-button']") |> render_click()
view |> element("[data-testid='view-setting-density']") |> render_click()
assert has_element?(view, "input[type='checkbox'].min-h-6.min-w-6")
assert has_element?(view, "#members-table-guard input[type='checkbox'].checkbox")
end
test "select-all reflects indeterminate for a partial selection", %{

View file

@ -1,8 +1,10 @@
defmodule MvWeb.MemberLive.IndexStickyPinnedTest do
@moduledoc """
§1.19 When the table scrolls vertically and horizontally, the header stays
sticky and the identifier (Name) column stays pinned; overflowing cell content
truncates with ellipsis and exposes a hover/focus tooltip.
sticky. Horizontal pinning is limited to the checkbox column (with a scroll
fade marking the boundary) rather than also pinning the Name column;
overflowing cell content truncates with ellipsis and exposes a hover/focus
tooltip.
"""
use MvWeb.ConnCase, async: false
@ -30,16 +32,18 @@ defmodule MvWeb.MemberLive.IndexStickyPinnedTest do
%{conn: conn_with_oidc_user(conn)}
end
test "header is sticky and the identifier column is pinned", %{conn: conn} do
test "header is sticky and only the checkbox column is pinned", %{conn: conn} do
{:ok, _view, html} = live(conn, ~p"/members")
# Sticky header (desktop).
assert html =~ "lg:sticky"
assert html =~ "lg:top-0"
# Checkbox column pinned at left-0, identifier (Name) column pinned beside it.
# Only the checkbox column is pinned (left-0) now; a scroll fade marks the
# boundary instead of also pinning the Name column at left-12.
assert html =~ "left-0"
assert html =~ "left-12"
assert html =~ "sticky-first-col-th"
refute html =~ "left-12"
end
test "composite cells truncate and expose a tooltip via title", %{conn: conn} do