feat: improve groups fillter

test/mv_web/member_live/index_groups_accessibility_test.exs

@@ -62,18 +62,21 @@ defmodule MvWeb.MemberLive.IndexGroupsAccessibilityTest do
   end
 
   @tag :ui
-  test "filter dropdown has aria-label", %{
+  test "filter dropdown has group presence section with legend", %{
     conn: conn
   } do
     conn = conn_with_oidc_user(conn)
-    {:ok, view, html} = live(conn, "/members")
+    {:ok, view, _html} = live(conn, "/members")
 
-    # Verify filter dropdown has aria-label
-    assert html =~ ~r/select.*name=["']group_filter["'].*aria-label=/ or
-             html =~ ~r/aria-label=.*[Gg]roup/
+    # Open filter dropdown
+    view
+    |> element("button[aria-label='Filter members']")
+    |> render_click()
 
-    # Verify dropdown is present
-    assert has_element?(view, "select[name='group_filter']")
+    html = render(view)
+    # Groups section: legend "Member has groups" and radios (Any / Yes / No)
+    assert html =~ ~r/[Gg]roups/
+    assert has_element?(view, "[data-testid='member-filter-form']")
   end
 
   @tag :ui
@@ -92,26 +95,22 @@ defmodule MvWeb.MemberLive.IndexGroupsAccessibilityTest do
   @tag :ui
   test "keyboard navigation works for filter dropdown", %{
     conn: conn,
+    member1: member1,
     group1: group1
   } do
     conn = conn_with_oidc_user(conn)
     {:ok, view, _html} = live(conn, "/members")
 
-    # Verify dropdown is keyboard accessible
-    # Tab should focus the dropdown
-    # Arrow keys should navigate options
-    # Enter should select option
-    assert has_element?(view, "select[name='group_filter']")
-
-    # Test that dropdown can be focused and changed via keyboard
-    # (This is a basic accessibility check - actual keyboard testing would require browser automation)
     view
-    |> element("#group-filter-form")
-    |> render_change(%{"group_filter" => group1.id})
+    |> element("button[aria-label='Filter members']")
+    |> render_click()
+
+    view
+    |> element("[data-testid='member-filter-form']")
+    |> render_change(%{"group_#{group1.id}" => "in", "payment_filter" => "all"})
 
-    # Verify change was applied
     html = render(view)
-    assert html
+    assert html =~ member1.first_name
   end
 
   @tag :ui
@@ -121,18 +120,14 @@ defmodule MvWeb.MemberLive.IndexGroupsAccessibilityTest do
     conn = conn_with_oidc_user(conn)
     {:ok, view, _html} = live(conn, "/members")
 
-    # Verify sort header is keyboard accessible
-    # Tab should focus the sort header
-    # Enter/Space should activate sorting
     assert has_element?(view, "[data-testid='groups']")
 
-    # Test that sort header can be activated via click (simulating keyboard)
     view
     |> element("[data-testid='groups']")
     |> render_click()
 
-    # Verify sort was applied
-    assert_patch(view, "/members?query=&sort_field=groups&sort_order=asc")
+    # Verify sort was applied (URL may include other params)
+    assert has_element?(view, "[data-testid='groups'][aria-label*='ascending']")
   end
 
   @tag :ui
@@ -144,19 +139,16 @@ defmodule MvWeb.MemberLive.IndexGroupsAccessibilityTest do
     conn = conn_with_oidc_user(conn)
     {:ok, view, _html} = live(conn, "/members")
 
-    # Apply filter
     view
-    |> element("#group-filter-form")
-    |> render_change(%{"group_filter" => group1.id})
+    |> element("button[aria-label='Filter members']")
+    |> render_click()
+
+    view
+    |> element("[data-testid='member-filter-form']")
+    |> render_change(%{"group_#{group1.id}" => "in", "payment_filter" => "all"})
 
-    # Verify filter change is announced (via aria-live region or similar)
     html = render(view)
-    # Should show filtered results
     assert html =~ member1.first_name
-
-    # Verify member count or filter status is announced
-    # (Implementation might use aria-live="polite" for announcements)
-    assert html
   end
 
   @tag :ui