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

lib/mv_web/live/components/add_filter_builder_component.ex

@@ -1190,13 +1190,20 @@ defmodule MvWeb.Components.AddFilterBuilderComponent do
   slot :inner_block, required: true
 
   # Shared two-state join toggle used by the boolean and is/is-not controls
-  # (Task 5): a `join-item` button label wrapping a hidden radio, with a visible
+  # (Task 5): a `join-item` button label wrapping a native radio, with a visible
   # selected state (`btn-primary` when the radio is checked) and an optional
   # leading icon. Consistent look across every two-state selector.
+  #
+  # The radio is `sr-only` (visually hidden) rather than `hidden`/`display:none`
+  # so it stays keyboard-focusable and in the tab order: Tab reaches the group,
+  # native same-`name` radio semantics move the selection with the arrow keys
+  # (WCAG 2.1.1). `has-[:focus-visible]:*` surfaces a visible ring on the styled
+  # label while its input has keyboard focus (WCAG 2.4.7); `z-10` lifts the
+  # focused item so the ring is not clipped by adjacent join-items.
   defp toggle_option(assigns) do
     ~H"""
-    <label class="join-item btn btn-sm gap-1 has-[:checked]:btn-primary">
-      <input type="radio" name={@name} value={@value} class="hidden" checked={@checked} />
+    <label class="join-item btn btn-sm gap-1 has-[:checked]:btn-primary has-[:focus-visible]:z-10 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-base-100 has-[:focus-visible]:ring-base-content/60">
+      <input type="radio" name={@name} value={@value} class="sr-only" checked={@checked} />
       <.icon :if={@icon} name={@icon} class="size-3.5" />
       {render_slot(@inner_block)}
     </label>