fix(overview): make filter-builder toggles keyboard-operable

This commit is contained in:
Simon 2026-07-10 16:27:15 +02:00
parent 8303a39041
commit ce877463d6
2 changed files with 37 additions and 3 deletions

View file

@ -82,6 +82,33 @@ defmodule MvWeb.MemberLive.IndexAddFilterFlowTest do
refute has_element?(view, "[data-testid='filter-chip']")
end
describe "§3.7 join-toggles are keyboard-operable (WCAG 2.1.1 / 2.4.7)" do
test "the shared toggle radios are focusable (not display:none) with a visible focus ring",
%{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/members")
pick_field(view, "group")
scope = "[data-testid='value-control-group']"
assert has_element?(view, "#{scope} input[type='radio']"),
"expected the join-toggle to render native radio inputs"
# A `hidden`/`display:none` (or negative-tabindex) input is skipped by Tab
# and cannot be reached with the keyboard — the WCAG 2.1.1 failure.
refute has_element?(view, "#{scope} input[type='radio'].hidden"),
"toggle radio must not be display:none-hidden (keyboard-unreachable)"
refute has_element?(view, "#{scope} input[type='radio'][tabindex='-1']"),
"toggle radio must stay in the natural tab order (no tabindex=-1)"
# WCAG 2.4.7: the styled label must surface a visible focus indicator when
# its (visually-hidden) input is keyboard-focused.
assert render(element(view, scope)) =~ "focus-visible",
"toggle label must carry a :focus-visible ring indicator"
end
end
defp refute_patched(view) do
assert_raise ArgumentError, fn -> assert_patch(view, 50) end
end