fix(overview): make filter-builder toggles keyboard-operable
This commit is contained in:
parent
8303a39041
commit
ce877463d6
2 changed files with 37 additions and 3 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue