diff --git a/CODE_GUIDELINES.md b/CODE_GUIDELINES.md
index 48e2e8e..b3f1c3f 100644
--- a/CODE_GUIDELINES.md
+++ b/CODE_GUIDELINES.md
@@ -3016,6 +3016,8 @@ end
 - [ ] Tables have proper structure (th, scope, caption)
 - [ ] ARIA labels used for icon-only buttons
 - [ ] Modals/dialogs: focus moves into modal, aria-labelledby, keyboard dismiss (Escape)
+- [ ] ARIA state attributes use string values `"true"` / `"false"` (not boolean), e.g. `aria-selected`, `aria-pressed`, `aria-expanded`.
+- [ ] Tabs: when using `role="tablist"` / `role="tab"`, use roving tabindex (only active tab `tabindex="0"`) and ArrowLeft/ArrowRight to switch tabs.
 
 ### 8.11 Modals and Dialogs
 
@@ -3043,7 +3045,8 @@ Use a consistent, keyboard-accessible pattern for all confirmation and form moda
 **Closing:**
 
 - Cancel button closes the modal (e.g. `phx-click="cancel_delete_modal"`).
-- Optionally support Escape to close via `phx-window-keydown` on the LiveView/LiveComponent.
+- **MUST** support Escape to close (WCAG / WAI-ARIA dialog pattern): add `phx-keydown="dialog_keydown"` on the `<dialog>` and handle `dialog_keydown` with `key: "Escape"` to close (same effect as Cancel).
+- **MUST** return focus to the trigger element when the modal closes (WCAG 2.4.3): give the trigger button a stable `id`, use the `FocusRestore` hook on a parent element, and on close (Cancel or Escape) call `push_event(socket, "focus_restore", %{id: "trigger-id"})` so keyboard users land where they started (e.g. "Delete member" button).
 
 **Reference implementation:** Delete data field modal in `CustomFieldLive.IndexComponent` (input + `phx-mounted={JS.focus()}` on input; `aria-labelledby` on dialog). Delete role modal in `RoleLive.Show` (no input; `phx-mounted={JS.focus()}` on Cancel button).
 
diff --git a/assets/css/app.css b/assets/css/app.css
index 094c030..6f00298 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -538,9 +538,14 @@
 
 /* Dark theme: primary is purple; ensure content is light and meets 4.5:1. */
 [data-theme="dark"] {
-  --color-primary-content: oklch(0.97 0.02 277);
   --color-error: oklch(55% 0.253 17.585);
   --color-error-content: oklch(98% 0 0);
+
+  --color-primary: oklch(72% 0.17 45);
+  --color-primary-content: oklch(0.18 0.02 47);
+
+  --color-secondary: oklch(48% 0.233 277.117);
+  --color-secondary-content: oklch(98% 0 0);
 }
 
 /* This file is for your main application CSS */
diff --git a/assets/js/app.js b/assets/js/app.js
index c17e7b5..b7d1a45 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -94,6 +94,32 @@ Hooks.TableRowKeydown = {
   }
 }
 
+// FocusRestore hook: WCAG 2.4.3 — when a modal closes, focus returns to the trigger element (e.g. "Delete member" button)
+Hooks.FocusRestore = {
+  mounted() {
+    this.handleEvent("focus_restore", ({id}) => {
+      const el = document.getElementById(id)
+      if (el) el.focus()
+    })
+  }
+}
+
+// TabListKeydown hook: WCAG tab pattern — prevent default for ArrowLeft/ArrowRight so the server can handle tab switch (roving tabindex)
+Hooks.TabListKeydown = {
+  mounted() {
+    this.handleKeydown = (e) => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault()
+      }
+    }
+    this.el.addEventListener('keydown', this.handleKeydown)
+  },
+
+  destroyed() {
+    this.el.removeEventListener('keydown', this.handleKeydown)
+  }
+}
+
 // SidebarState hook: Manages sidebar expanded/collapsed state
 Hooks.SidebarState = {
   mounted() {
diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex
index 5f12f0a..78b8bfb 100644
--- a/lib/mv_web/components/core_components.ex
+++ b/lib/mv_web/components/core_components.ex
@@ -477,7 +477,7 @@ defmodule MvWeb.CoreComponents do
         tabindex="0"
         role="button"
         aria-haspopup="menu"
-        aria-expanded={@open}
+        aria-expanded={if @open, do: "true", else: "false"}
         aria-controls={@id}
         aria-label={@button_label}
         class={["btn"] ++ @button_focus_classes ++ [@button_class]}
diff --git a/lib/mv_web/live/custom_field_live/form_component.ex b/lib/mv_web/live/custom_field_live/form_component.ex
index aac67dc..3872e56 100644
--- a/lib/mv_web/live/custom_field_live/form_component.ex
+++ b/lib/mv_web/live/custom_field_live/form_component.ex
@@ -111,6 +111,7 @@ defmodule MvWeb.CustomFieldLive.FormComponent do
                   )}
                 </p>
                 <.button
+                  id="delete-custom-field-trigger"
                   type="button"
                   variant="danger"
                   phx-click="request_delete"
diff --git a/lib/mv_web/live/custom_field_live/index_component.ex b/lib/mv_web/live/custom_field_live/index_component.ex
index abb19df..f9dca11 100644
--- a/lib/mv_web/live/custom_field_live/index_component.ex
+++ b/lib/mv_web/live/custom_field_live/index_component.ex
@@ -106,6 +106,7 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
         class="modal modal-open"
         role="dialog"
         aria-labelledby="delete-custom-field-modal-title"
+        phx-keydown="dialog_keydown"
       >
         <div class="modal-box">
           <h3 id="delete-custom-field-modal-title" class="text-lg font-bold">
@@ -226,6 +227,8 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
           socket
 
         id ->
+          send(self(), {:custom_field_delete_modal_open, true})
+
           custom_field =
             Ash.get!(Mv.Membership.CustomField, id,
               load: [:assigned_members_count],
@@ -290,6 +293,8 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
         actor: actor
       )
 
+    send(self(), {:custom_field_delete_modal_open, true})
+
     {:noreply,
      socket
      |> assign(:custom_field_to_delete, custom_field)
@@ -310,6 +315,7 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
     if socket.assigns.slug_confirmation == custom_field.slug do
       case Ash.destroy(custom_field, actor: actor) do
         :ok ->
+          send(self(), {:custom_field_delete_modal_open, false})
           send(self(), {:custom_field_deleted, custom_field})
 
           {:noreply,
@@ -320,6 +326,7 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
            |> stream_delete(:custom_fields, custom_field)}
 
         {:error, error} ->
+          send(self(), {:custom_field_delete_modal_open, false})
           send(self(), {:custom_field_delete_error, error})
 
           {:noreply,
@@ -329,6 +336,7 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
            |> assign(:slug_confirmation, "")}
       end
     else
+      send(self(), {:custom_field_delete_modal_open, false})
       send(self(), :custom_field_slug_mismatch)
 
       {:noreply,
@@ -341,10 +349,22 @@ defmodule MvWeb.CustomFieldLive.IndexComponent do
 
   @impl true
   def handle_event("cancel_delete", _params, socket) do
-    {:noreply,
-     socket
-     |> assign(:show_delete_modal, false)
-     |> assign(:custom_field_to_delete, nil)
-     |> assign(:slug_confirmation, "")}
+    send(self(), {:custom_field_delete_modal_open, false})
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    send(self(), {:custom_field_delete_modal_open, false})
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> assign(:custom_field_to_delete, nil)
+    |> assign(:slug_confirmation, "")
+    |> push_event("focus_restore", %{id: "delete-custom-field-trigger"})
   end
 end
diff --git a/lib/mv_web/live/datafields_live.ex b/lib/mv_web/live/datafields_live.ex
index 11ec613..2c74499 100644
--- a/lib/mv_web/live/datafields_live.ex
+++ b/lib/mv_web/live/datafields_live.ex
@@ -19,9 +19,32 @@ defmodule MvWeb.DatafieldsLive do
      socket
      |> assign(:page_title, gettext("Datafields"))
      |> assign(:settings, settings)
-     |> assign(:active_editing_section, nil)}
+     |> assign(:active_editing_section, nil)
+     |> assign(:custom_field_delete_modal_open, false)}
   end
 
+  @impl true
+  def handle_event("window_keydown", %{"key" => key}, socket)
+      when key in ["Escape", "Esc"] do
+    if socket.assigns[:custom_field_delete_modal_open] do
+      send_update(MvWeb.CustomFieldLive.IndexComponent,
+        id: "custom-fields-component",
+        show_delete_modal: false,
+        custom_field_to_delete: nil,
+        slug_confirmation: ""
+      )
+
+      {:noreply,
+       socket
+       |> assign(:custom_field_delete_modal_open, false)
+       |> push_event("focus_restore", %{id: "delete-custom-field-trigger"})}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -35,8 +58,14 @@ defmodule MvWeb.DatafieldsLive do
         </:subtitle>
       </.header>
 
-      <%!-- Overview: both sections with form_section wrappers --%>
-      <div :if={@active_editing_section == nil} class="mt-6 space-y-6">
+      <%!-- Overview: both sections with form_section wrappers; FocusRestore for custom field delete modal --%>
+      <div
+        :if={@active_editing_section == nil}
+        id="datafields-focus-root"
+        class="mt-6 space-y-6"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @custom_field_delete_modal_open, do: "window_keydown", else: nil}
+      >
         <.form_section title={gettext("Personal Data")}>
           <.live_component
             module={MvWeb.MemberFieldLive.IndexComponent}
@@ -63,7 +92,13 @@ defmodule MvWeb.DatafieldsLive do
         />
       </div>
 
-      <div :if={@active_editing_section == :custom_fields} class="mt-6">
+      <div
+        :if={@active_editing_section == :custom_fields}
+        id="datafields-focus-root"
+        class="mt-6"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @custom_field_delete_modal_open, do: "window_keydown", else: nil}
+      >
         <.live_component
           module={MvWeb.CustomFieldLive.IndexComponent}
           id="custom-fields-component"
@@ -74,6 +109,11 @@ defmodule MvWeb.DatafieldsLive do
     """
   end
 
+  @impl true
+  def handle_info({:custom_field_delete_modal_open, open}, socket) do
+    {:noreply, assign(socket, :custom_field_delete_modal_open, open)}
+  end
+
   @impl true
   def handle_info({:custom_field_saved, _custom_field, action}, socket) do
     send_update(MvWeb.CustomFieldLive.IndexComponent,
diff --git a/lib/mv_web/live/group_live/show.ex b/lib/mv_web/live/group_live/show.ex
index a700cd5..80c0df5 100644
--- a/lib/mv_web/live/group_live/show.ex
+++ b/lib/mv_web/live/group_live/show.ex
@@ -116,7 +116,12 @@ defmodule MvWeb.GroupLive.Show do
         </:actions>
       </.header>
 
-      <div class="mt-6 space-y-6">
+      <div
+        id="group-show-focus-root"
+        class="mt-6 space-y-6"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+      >
         <%!-- Group Information --%>
         <div class="max-w-2xl space-y-6 mb-6">
           <div>
@@ -353,6 +358,7 @@ defmodule MvWeb.GroupLive.Show do
                 )}
               </p>
               <.button
+                id="delete-group-trigger"
                 variant="danger"
                 type="button"
                 phx-click="open_delete_modal"
@@ -373,6 +379,7 @@ defmodule MvWeb.GroupLive.Show do
             class="modal modal-open"
             role="dialog"
             aria-labelledby="delete-group-modal-title"
+            phx-keydown="dialog_keydown"
           >
             <div class="modal-box">
               <h3 id="delete-group-modal-title" class="text-lg font-bold mb-4">
@@ -453,12 +460,25 @@ defmodule MvWeb.GroupLive.Show do
 
   @impl true
   def handle_event("cancel_delete", _params, socket) do
-    {:noreply,
-     socket
-     |> assign(:show_delete_modal, false)
-     |> assign(:name_confirmation, "")}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("update_name_confirmation", %{"name" => name}, socket) do
     {:noreply, assign(socket, :name_confirmation, name)}
@@ -939,6 +959,13 @@ defmodule MvWeb.GroupLive.Show do
     end
   end
 
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> assign(:name_confirmation, "")
+    |> push_event("focus_restore", %{id: "delete-group-trigger"})
+  end
+
   defp perform_group_deletion(socket, group, actor) do
     case Membership.destroy_group(group, actor: actor) do
       :ok ->
diff --git a/lib/mv_web/live/member_live/form.ex b/lib/mv_web/live/member_live/form.ex
index db79906..cc32b6b 100644
--- a/lib/mv_web/live/member_live/form.ex
+++ b/lib/mv_web/live/member_live/form.ex
@@ -38,300 +38,311 @@ defmodule MvWeb.MemberLive.Form do
     ~H"""
     <Layouts.app flash={@flash} current_user={@current_user}>
       <.form for={@form} id="member-form" phx-change="validate" phx-submit="save">
+        <div
+          id="member-form-focus-root"
+          phx-hook="FocusRestore"
+          phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+        >
         <.header>
-          <:leading>
-            <.button navigate={return_path(@return_to, @member)} variant="neutral">
-              <.icon name="hero-arrow-left" class="size-4" />
-              {gettext("Back")}
-            </.button>
-          </:leading>
-          <%= if @member do %>
-            {MvWeb.Helpers.MemberHelpers.display_name(@member)}
-          <% else %>
-            {gettext("New Member")}
-          <% end %>
-          <:actions>
-            <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
-              {gettext("Save")}
-            </.button>
-          </:actions>
-        </.header>
+            <:leading>
+              <.button navigate={return_path(@return_to, @member)} variant="neutral">
+                <.icon name="hero-arrow-left" class="size-4" />
+                {gettext("Back")}
+              </.button>
+            </:leading>
+            <%= if @member do %>
+              {MvWeb.Helpers.MemberHelpers.display_name(@member)}
+            <% else %>
+              {gettext("New Member")}
+            <% end %>
+            <:actions>
+              <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+                {gettext("Save")}
+              </.button>
+            </:actions>
+          </.header>
 
-        <div class="mt-6 space-y-6">
-          <%!-- Tab navigation: same styling as member show; only Contact Data tab (no Membership Fees on edit) --%>
-          <div
-            role="tablist"
-            class="tabs tabs-bordered tabs-lg bg-base-200/60 rounded-box p-1 w-fit"
-          >
-            <button
-              id="member-tab-contact"
-              role="tab"
-              type="button"
-              tabindex="0"
-              aria-selected="true"
-              aria-controls="member-tabpanel-contact"
-              class="tab tab-active flex items-center gap-2"
+          <div class="mt-6 space-y-6">
+            <%!-- Tab navigation: same styling as member show; only Contact Data tab (no Membership Fees on edit) --%>
+            <div
+              role="tablist"
+              class="tabs tabs-bordered tabs-lg bg-base-200/60 rounded-box p-1 w-fit"
             >
-              <.icon name="hero-identification" class="size-4 shrink-0" />
-              {gettext("Contact Data")}
-            </button>
-          </div>
+              <button
+                id="member-tab-contact"
+                role="tab"
+                type="button"
+                tabindex="0"
+                aria-selected="true"
+                aria-controls="member-tabpanel-contact"
+                class="tab tab-active flex items-center gap-2"
+              >
+                <.icon name="hero-identification" class="size-4 shrink-0" />
+                {gettext("Contact Data")}
+              </button>
+            </div>
 
-          <%!-- Contact Data Tab Content (same structure as member show) --%>
-          <div
-            id="member-tabpanel-contact"
-            role="tabpanel"
-            aria-labelledby="member-tab-contact"
-          >
-            <%!-- Personal Data and Custom Fields Row --%>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-              <%!-- Personal Data Section --%>
-              <div>
-                <.form_section title={gettext("Personal Data")}>
-                  <div class="space-y-4">
-                    <%!-- Name Row --%>
-                    <div class="flex gap-4">
-                      <div class="w-48">
-                        <.input
-                          field={@form[:first_name]}
-                          label={gettext("First Name")}
-                          required={@member_field_required_map[:first_name]}
-                        />
+            <%!-- Contact Data Tab Content (same structure as member show) --%>
+            <div
+              id="member-tabpanel-contact"
+              role="tabpanel"
+              aria-labelledby="member-tab-contact"
+            >
+              <%!-- Personal Data and Custom Fields Row --%>
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                <%!-- Personal Data Section --%>
+                <div>
+                  <.form_section title={gettext("Personal Data")}>
+                    <div class="space-y-4">
+                      <%!-- Name Row --%>
+                      <div class="flex gap-4">
+                        <div class="w-48">
+                          <.input
+                            field={@form[:first_name]}
+                            label={gettext("First Name")}
+                            required={@member_field_required_map[:first_name]}
+                          />
+                        </div>
+                        <div class="w-48">
+                          <.input
+                            field={@form[:last_name]}
+                            label={gettext("Last Name")}
+                            required={@member_field_required_map[:last_name]}
+                          />
+                        </div>
                       </div>
-                      <div class="w-48">
-                        <.input
-                          field={@form[:last_name]}
-                          label={gettext("Last Name")}
-                          required={@member_field_required_map[:last_name]}
-                        />
-                      </div>
-                    </div>
 
-                    <%!-- Address: Country, Postal Code, City in one row --%>
-                    <div class="flex gap-4">
-                      <div class="w-48">
-                        <.input field={@form[:country]} label={gettext("Country")} />
+                      <%!-- Address: Country, Postal Code, City in one row --%>
+                      <div class="flex gap-4">
+                        <div class="w-48">
+                          <.input field={@form[:country]} label={gettext("Country")} />
+                        </div>
+                        <div class="w-24">
+                          <.input
+                            field={@form[:postal_code]}
+                            label={gettext("Postal Code")}
+                            required={@member_field_required_map[:postal_code]}
+                          />
+                        </div>
+                        <div class="w-48">
+                          <.input field={@form[:city]} label={gettext("City")} />
+                        </div>
                       </div>
-                      <div class="w-24">
-                        <.input
-                          field={@form[:postal_code]}
-                          label={gettext("Postal Code")}
-                          required={@member_field_required_map[:postal_code]}
-                        />
-                      </div>
-                      <div class="w-48">
-                        <.input field={@form[:city]} label={gettext("City")} />
-                      </div>
-                    </div>
 
-                    <%!-- Street and Nr. below --%>
-                    <div class="flex gap-4">
+                      <%!-- Street and Nr. below --%>
+                      <div class="flex gap-4">
+                        <div class="w-64">
+                          <.input field={@form[:street]} label={gettext("Street")} />
+                        </div>
+                        <div class="w-24">
+                          <.input field={@form[:house_number]} label={gettext("Nr.")} />
+                        </div>
+                      </div>
+
+                      <%!-- Email --%>
                       <div class="w-64">
-                        <.input field={@form[:street]} label={gettext("Street")} />
+                        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
                       </div>
-                      <div class="w-24">
-                        <.input field={@form[:house_number]} label={gettext("Nr.")} />
-                      </div>
-                    </div>
 
-                    <%!-- Email --%>
-                    <div class="w-64">
-                      <.input field={@form[:email]} label={gettext("Email")} required type="email" />
-                    </div>
-
-                    <%!-- Membership Dates Row --%>
-                    <div class="flex gap-4">
-                      <div class="w-36">
-                        <.input
-                          field={@form[:join_date]}
-                          label={gettext("Join Date")}
-                          type="date"
-                          required={@member_field_required_map[:join_date]}
-                        />
+                      <%!-- Membership Dates Row --%>
+                      <div class="flex gap-4">
+                        <div class="w-36">
+                          <.input
+                            field={@form[:join_date]}
+                            label={gettext("Join Date")}
+                            type="date"
+                            required={@member_field_required_map[:join_date]}
+                          />
+                        </div>
+                        <div class="w-36">
+                          <.input
+                            field={@form[:exit_date]}
+                            label={gettext("Exit Date")}
+                            type="date"
+                            required={@member_field_required_map[:exit_date]}
+                          />
+                        </div>
                       </div>
-                      <div class="w-36">
+
+                      <%!-- Notes --%>
+                      <div>
                         <.input
-                          field={@form[:exit_date]}
-                          label={gettext("Exit Date")}
-                          type="date"
-                          required={@member_field_required_map[:exit_date]}
+                          field={@form[:notes]}
+                          label={gettext("Notes")}
+                          type="textarea"
+                          required={@member_field_required_map[:notes]}
                         />
                       </div>
                     </div>
+                  </.form_section>
+                </div>
 
-                    <%!-- Notes --%>
+                <%!-- Custom Fields Section --%>
+                <%= if Enum.any?(@custom_fields) do %>
+                  <div>
+                    <.form_section title={gettext("Custom Fields")}>
+                      <div class="grid grid-cols-2 gap-4">
+                        <%!-- Render in sorted order by finding the form for each sorted custom field --%>
+                        <%= for cf <- @sorted_custom_fields do %>
+                          <.inputs_for :let={f_cfv} field={@form[:custom_field_values]}>
+                            <%= if f_cfv[:custom_field_id].value == cf.id do %>
+                              <div class={
+                                if cf.value_type == :boolean, do: "flex items-end", else: ""
+                              }>
+                                <.inputs_for :let={value_form} field={f_cfv[:value]}>
+                                  <.input
+                                    field={value_form[:value]}
+                                    label={cf.name}
+                                    type={custom_field_input_type(cf.value_type)}
+                                    required={cf.required}
+                                  />
+                                </.inputs_for>
+                                <input
+                                  type="hidden"
+                                  name={f_cfv[:custom_field_id].name}
+                                  value={f_cfv[:custom_field_id].value}
+                                />
+                              </div>
+                            <% end %>
+                          </.inputs_for>
+                        <% end %>
+                      </div>
+                    </.form_section>
+                  </div>
+                <% end %>
+              </div>
+
+              <%!-- Membership Fee Section --%>
+              <div class="max-w-xl">
+                <.form_section title={gettext("Membership Fee")}>
+                  <div class="space-y-4">
                     <div>
-                      <.input
-                        field={@form[:notes]}
-                        label={gettext("Notes")}
-                        type="textarea"
-                        required={@member_field_required_map[:notes]}
-                      />
+                      <label class="label">
+                        <span class="label-text font-semibold">{gettext("Membership Fee Type")}</span>
+                      </label>
+                      <select
+                        class="select select-bordered w-full"
+                        name={@form[:membership_fee_type_id].name}
+                        phx-change="validate"
+                        value={@form[:membership_fee_type_id].value || ""}
+                      >
+                        <%!-- No "None" option: a membership fee type is required (validated in Member resource). --%>
+                        <option value="">{gettext("Select a membership fee type")}</option>
+                        <%= for fee_type <- @available_fee_types do %>
+                          <option
+                            value={fee_type.id}
+                            selected={fee_type.id == @form[:membership_fee_type_id].value}
+                          >
+                            {fee_type.name} ({MembershipFeeHelpers.format_currency(fee_type.amount)}, {MembershipFeeHelpers.format_interval(
+                              fee_type.interval
+                            )})
+                          </option>
+                        <% end %>
+                      </select>
+                      <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %>
+                        <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %>
+                        <p class="text-error text-sm mt-1">{msg}</p>
+                      <% end %>
+                      <%= if @interval_warning do %>
+                        <div class="alert alert-warning mt-2">
+                          <.icon name="hero-exclamation-triangle" class="size-5" />
+                          <span>{@interval_warning}</span>
+                        </div>
+                      <% end %>
+                      <p class="text-sm text-base-content/60 mt-2">
+                        {gettext(
+                          "Select a membership fee type for this member. Members can only switch between types with the same interval."
+                        )}
+                      </p>
                     </div>
                   </div>
                 </.form_section>
               </div>
 
-              <%!-- Custom Fields Section --%>
-              <%= if Enum.any?(@custom_fields) do %>
-                <div>
-                  <.form_section title={gettext("Custom Fields")}>
-                    <div class="grid grid-cols-2 gap-4">
-                      <%!-- Render in sorted order by finding the form for each sorted custom field --%>
-                      <%= for cf <- @sorted_custom_fields do %>
-                        <.inputs_for :let={f_cfv} field={@form[:custom_field_values]}>
-                          <%= if f_cfv[:custom_field_id].value == cf.id do %>
-                            <div class={if cf.value_type == :boolean, do: "flex items-end", else: ""}>
-                              <.inputs_for :let={value_form} field={f_cfv[:value]}>
-                                <.input
-                                  field={value_form[:value]}
-                                  label={cf.name}
-                                  type={custom_field_input_type(cf.value_type)}
-                                  required={cf.required}
-                                />
-                              </.inputs_for>
-                              <input
-                                type="hidden"
-                                name={f_cfv[:custom_field_id].name}
-                                value={f_cfv[:custom_field_id].value}
-                              />
-                            </div>
-                          <% end %>
-                        </.inputs_for>
-                      <% end %>
-                    </div>
-                  </.form_section>
-                </div>
-              <% end %>
-            </div>
+              <%!-- Bottom Action Buttons --%>
+              <div class="flex justify-end gap-4 mt-6">
+                <.button navigate={return_path(@return_to, @member)} variant="neutral" type="button">
+                  {gettext("Cancel")}
+                </.button>
+                <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
+                  {gettext("Save Member")}
+                </.button>
+              </div>
 
-            <%!-- Membership Fee Section --%>
-            <div class="max-w-xl">
-              <.form_section title={gettext("Membership Fee")}>
-                <div class="space-y-4">
-                  <div>
-                    <label class="label">
-                      <span class="label-text font-semibold">{gettext("Membership Fee Type")}</span>
-                    </label>
-                    <select
-                      class="select select-bordered w-full"
-                      name={@form[:membership_fee_type_id].name}
-                      phx-change="validate"
-                      value={@form[:membership_fee_type_id].value || ""}
-                    >
-                      <%!-- No "None" option: a membership fee type is required (validated in Member resource). --%>
-                      <option value="">{gettext("Select a membership fee type")}</option>
-                      <%= for fee_type <- @available_fee_types do %>
-                        <option
-                          value={fee_type.id}
-                          selected={fee_type.id == @form[:membership_fee_type_id].value}
-                        >
-                          {fee_type.name} ({MembershipFeeHelpers.format_currency(fee_type.amount)}, {MembershipFeeHelpers.format_interval(
-                            fee_type.interval
-                          )})
-                        </option>
-                      <% end %>
-                    </select>
-                    <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %>
-                      <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %>
-                      <p class="text-error text-sm mt-1">{msg}</p>
-                    <% end %>
-                    <%= if @interval_warning do %>
-                      <div class="alert alert-warning mt-2">
-                        <.icon name="hero-exclamation-triangle" class="size-5" />
-                        <span>{@interval_warning}</span>
-                      </div>
-                    <% end %>
-                    <p class="text-sm text-base-content/60 mt-2">
+              <%!-- Danger zone: same section pattern as MemberLive.Show (canonical) --%>
+              <%= if @member && can?(@current_user, :destroy, @member) do %>
+                <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
+                  <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
+                    {gettext("Danger zone")}
+                  </h2>
+                  <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+                    <p class="text-base-content/70 mb-4">
                       {gettext(
-                        "Select a membership fee type for this member. Members can only switch between types with the same interval."
+                        "Deleting this member cannot be undone. All related data (e.g. membership fee cycles) will be removed."
                       )}
                     </p>
-                  </div>
-                </div>
-              </.form_section>
-            </div>
-
-            <%!-- Bottom Action Buttons --%>
-            <div class="flex justify-end gap-4 mt-6">
-              <.button navigate={return_path(@return_to, @member)} variant="neutral" type="button">
-                {gettext("Cancel")}
-              </.button>
-              <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit">
-                {gettext("Save Member")}
-              </.button>
-            </div>
-
-            <%!-- Danger zone: same section pattern as MemberLive.Show (canonical) --%>
-            <%= if @member && can?(@current_user, :destroy, @member) do %>
-              <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
-                <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
-                  {gettext("Danger zone")}
-                </h2>
-                <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-                  <p class="text-base-content/70 mb-4">
-                    {gettext(
-                      "Deleting this member cannot be undone. All related data (e.g. membership fee cycles) will be removed."
-                    )}
-                  </p>
-                  <.button
-                    variant="danger"
-                    type="button"
-                    phx-click="open_delete_modal"
-                    data-testid="member-delete"
-                    aria-label={
-                      gettext("Delete member %{name}",
-                        name: MvWeb.Helpers.MemberHelpers.display_name(@member)
-                      )
-                    }
-                  >
-                    <.icon name="hero-trash" class="size-4" />
-                    {gettext("Delete member")}
-                  </.button>
-                </div>
-              </section>
-            <% end %>
-
-            <%!-- Delete Member Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
-            <%= if @member && assigns[:show_delete_modal] do %>
-              <dialog
-                id="delete-member-form-modal"
-                class="modal modal-open"
-                role="dialog"
-                aria-labelledby="delete-member-form-modal-title"
-              >
-                <div class="modal-box">
-                  <h3 id="delete-member-form-modal-title" class="text-lg font-bold">
-                    {gettext("Delete Member")}
-                  </h3>
-                  <p class="py-4">
-                    {gettext("Are you sure you want to delete %{name}? This action cannot be undone.",
-                      name: MvWeb.Helpers.MemberHelpers.display_name(@member)
-                    )}
-                  </p>
-                  <div class="modal-action">
                     <.button
-                      type="button"
-                      variant="neutral"
-                      phx-click="cancel_delete_modal"
-                      phx-mounted={JS.focus()}
-                      id="delete-member-form-modal-cancel"
-                      aria-label={gettext("Cancel")}
-                    >
-                      {gettext("Cancel")}
-                    </.button>
-                    <.button
-                      type="button"
+                      id="delete-member-form-trigger"
                       variant="danger"
-                      phx-click={JS.push("delete", value: %{id: @member.id})}
-                      aria-label={gettext("Delete member")}
+                      type="button"
+                      phx-click="open_delete_modal"
+                      data-testid="member-delete"
+                      aria-label={
+                        gettext("Delete member %{name}",
+                          name: MvWeb.Helpers.MemberHelpers.display_name(@member)
+                        )
+                      }
                     >
-                      {gettext("Delete")}
+                      <.icon name="hero-trash" class="size-4" />
+                      {gettext("Delete member")}
                     </.button>
                   </div>
-                </div>
-              </dialog>
-            <% end %>
+                </section>
+              <% end %>
+
+              <%!-- Delete Member Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
+              <%= if @member && assigns[:show_delete_modal] do %>
+                <dialog
+                  id="delete-member-form-modal"
+                  class="modal modal-open"
+                  role="dialog"
+                  aria-labelledby="delete-member-form-modal-title"
+                  phx-keydown="dialog_keydown"
+                >
+                  <div class="modal-box">
+                    <h3 id="delete-member-form-modal-title" class="text-lg font-bold">
+                      {gettext("Delete Member")}
+                    </h3>
+                    <p class="py-4">
+                      {gettext(
+                        "Are you sure you want to delete %{name}? This action cannot be undone.",
+                        name: MvWeb.Helpers.MemberHelpers.display_name(@member)
+                      )}
+                    </p>
+                    <div class="modal-action">
+                      <.button
+                        type="button"
+                        variant="neutral"
+                        phx-click="cancel_delete_modal"
+                        phx-mounted={JS.focus()}
+                        id="delete-member-form-modal-cancel"
+                        aria-label={gettext("Cancel")}
+                      >
+                        {gettext("Cancel")}
+                      </.button>
+                      <.button
+                        type="button"
+                        variant="danger"
+                        phx-click={JS.push("delete", value: %{id: @member.id})}
+                        aria-label={gettext("Delete member")}
+                      >
+                        {gettext("Delete")}
+                      </.button>
+                    </div>
+                  </div>
+                </dialog>
+              <% end %>
+            </div>
           </div>
         </div>
       </.form>
@@ -461,9 +472,25 @@ defmodule MvWeb.MemberLive.Form do
 
   @impl true
   def handle_event("cancel_delete_modal", _params, socket) do
-    {:noreply, assign(socket, :show_delete_modal, false)}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     member = socket.assigns.member
@@ -511,6 +538,12 @@ defmodule MvWeb.MemberLive.Form do
     end
   end
 
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> push_event("focus_restore", %{id: "delete-member-form-trigger"})
+  end
+
   defp handle_save_success(socket, member) do
     notify_parent({:saved, member})
 
diff --git a/lib/mv_web/live/member_live/show.ex b/lib/mv_web/live/member_live/show.ex
index deb6cf0..cc929cd 100644
--- a/lib/mv_web/live/member_live/show.ex
+++ b/lib/mv_web/live/member_live/show.ex
@@ -55,18 +55,26 @@ defmodule MvWeb.MemberLive.Show do
         </:actions>
       </.header>
 
-      <div class="mt-6 space-y-6">
-        <%!-- Tab Navigation: surface only behind buttons (inline); tabs-bordered; tabs-lg; both tabs keyboard-focusable --%>
+      <div
+        id="member-show-focus-root"
+        class="mt-6 space-y-6"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+      >
+        <%!-- Tab Navigation: roving tabindex (only active tab tabindex="0"), ArrowLeft/ArrowRight (WCAG tab pattern) --%>
         <div
+          id="member-tablist"
           role="tablist"
           class="tabs tabs-bordered tabs-lg bg-base-200/60 rounded-box p-1 w-fit"
+          phx-hook="TabListKeydown"
+          phx-keydown="tab_keydown"
         >
           <button
             id="member-tab-contact"
             role="tab"
             type="button"
-            tabindex="0"
-            aria-selected={@active_tab == :contact}
+            tabindex={if @active_tab == :contact, do: "0", else: "-1"}
+            aria-selected={if @active_tab == :contact, do: "true", else: "false"}
             aria-controls="member-tabpanel-contact"
             class={[
               "tab flex items-center gap-2",
@@ -82,8 +90,8 @@ defmodule MvWeb.MemberLive.Show do
             id="member-tab-membership_fees"
             role="tab"
             type="button"
-            tabindex="0"
-            aria-selected={@active_tab == :membership_fees}
+            tabindex={if @active_tab == :membership_fees, do: "0", else: "-1"}
+            aria-selected={if @active_tab == :membership_fees, do: "true", else: "false"}
             aria-controls="member-tabpanel-membership_fees"
             class={[
               "tab flex items-center gap-2",
@@ -315,6 +323,7 @@ defmodule MvWeb.MemberLive.Show do
                 )}
               </p>
               <.button
+                id="delete-member-trigger"
                 variant="danger"
                 phx-click="open_delete_modal"
                 data-testid="member-delete"
@@ -338,6 +347,7 @@ defmodule MvWeb.MemberLive.Show do
             class="modal modal-open"
             role="dialog"
             aria-labelledby="delete-member-modal-title"
+            phx-keydown="dialog_keydown"
           >
             <div class="modal-box">
               <h3 id="delete-member-modal-title" class="text-lg font-bold">
@@ -434,6 +444,21 @@ defmodule MvWeb.MemberLive.Show do
     {:noreply, assign(socket, :active_tab, :membership_fees)}
   end
 
+  @impl true
+  def handle_event("tab_keydown", %{"key" => key}, socket)
+      when key in ["ArrowLeft", "ArrowRight"] do
+    new_tab =
+      case {key, socket.assigns.active_tab} do
+        {"ArrowRight", :contact} -> :membership_fees
+        {"ArrowLeft", :membership_fees} -> :contact
+        _ -> socket.assigns.active_tab
+      end
+
+    {:noreply, assign(socket, :active_tab, new_tab)}
+  end
+
+  def handle_event("tab_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("open_delete_modal", _params, socket) do
     {:noreply, assign(socket, :show_delete_modal, true)}
@@ -441,9 +466,26 @@ defmodule MvWeb.MemberLive.Show do
 
   @impl true
   def handle_event("cancel_delete_modal", _params, socket) do
-    {:noreply, assign(socket, :show_delete_modal, false)}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  # Escape closes modal (WCAG). phx-window-keydown ensures Escape is captured regardless of focus.
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     member = socket.assigns.member
@@ -493,6 +535,13 @@ defmodule MvWeb.MemberLive.Show do
     {:noreply, assign(socket, :vereinfacht_receipts, response)}
   end
 
+  # WCAG 2.4.3: when modal closes, return focus to the trigger (Delete member button)
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> push_event("focus_restore", %{id: "delete-member-trigger"})
+  end
+
   # Flash set in LiveComponent is not shown in parent layout; child sends this to display flash
   @impl true
   def handle_info({:put_flash, type, message}, socket) do
diff --git a/lib/mv_web/live/member_live/show/membership_fees_component.ex b/lib/mv_web/live/member_live/show/membership_fees_component.ex
index 7ed5fbe..be72392 100644
--- a/lib/mv_web/live/member_live/show/membership_fees_component.ex
+++ b/lib/mv_web/live/member_live/show/membership_fees_component.ex
@@ -231,7 +231,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="paid"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :paid)}
-                      aria-pressed={cycle.status == :paid}
+                      aria-pressed={if cycle.status == :paid, do: "true", else: "false"}
                       title={gettext("Mark as paid")}
                     >
                       <.icon name="hero-check-circle" class="size-4" />
@@ -244,7 +244,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="suspended"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :suspended)}
-                      aria-pressed={cycle.status == :suspended}
+                      aria-pressed={if cycle.status == :suspended, do: "true", else: "false"}
                       title={gettext("Mark as suspended")}
                     >
                       <.icon name="hero-pause-circle" class="size-4" />
@@ -257,7 +257,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="unpaid"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :unpaid)}
-                      aria-pressed={cycle.status == :unpaid}
+                      aria-pressed={if cycle.status == :unpaid, do: "true", else: "false"}
                       title={gettext("Mark as unpaid")}
                     >
                       <.icon name="hero-x-circle" class="size-4" />
@@ -301,6 +301,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           class="modal modal-open"
           role="dialog"
           aria-labelledby="edit-cycle-amount-modal-title"
+          phx-keydown="dialog_keydown"
         >
           <div class="modal-box">
             <h3 id="edit-cycle-amount-modal-title" class="text-lg font-bold">
@@ -347,6 +348,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           class="modal modal-open"
           role="dialog"
           aria-labelledby="delete-cycle-modal-title"
+          phx-keydown="dialog_keydown"
         >
           <div class="modal-box">
             <h3 id="delete-cycle-modal-title" class="text-lg font-bold">{gettext("Delete Cycle")}</h3>
@@ -388,6 +390,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           class="modal modal-open"
           role="dialog"
           aria-labelledby="delete-all-cycles-modal-title"
+          phx-keydown="dialog_keydown"
         >
           <div class="modal-box">
             <h3 id="delete-all-cycles-modal-title" class="text-lg font-bold text-error">
@@ -450,6 +453,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
           class="modal modal-open"
           role="dialog"
           aria-labelledby="create-cycle-modal-title"
+          phx-keydown="dialog_keydown"
         >
           <div class="modal-box">
             <h3 id="create-cycle-modal-title" class="text-lg font-bold">{gettext("Create Cycle")}</h3>
@@ -917,6 +921,35 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
      |> assign(:create_cycle_error, nil)}
   end
 
+  def handle_event("dialog_keydown", %{"key" => "Escape"}, socket) do
+    socket =
+      cond do
+        socket.assigns[:editing_cycle] ->
+          assign(socket, :editing_cycle, nil)
+
+        socket.assigns[:deleting_cycle] ->
+          assign(socket, :deleting_cycle, nil)
+
+        socket.assigns[:deleting_all_cycles] ->
+          socket
+          |> assign(:deleting_all_cycles, false)
+          |> assign(:delete_all_confirmation, "")
+
+        socket.assigns[:creating_cycle] ->
+          socket
+          |> assign(:creating_cycle, false)
+          |> assign(:create_cycle_date, nil)
+          |> assign(:create_cycle_error, nil)
+
+        true ->
+          socket
+      end
+
+    {:noreply, socket}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
   def handle_event("update_create_cycle_date", %{"date" => date_str}, socket) do
     date =
       case Date.from_iso8601(date_str) do
diff --git a/lib/mv_web/live/role_live/show.ex b/lib/mv_web/live/role_live/show.ex
index 6f6d394..7455a1a 100644
--- a/lib/mv_web/live/role_live/show.ex
+++ b/lib/mv_web/live/role_live/show.ex
@@ -101,9 +101,25 @@ defmodule MvWeb.RoleLive.Show do
 
   @impl true
   def handle_event("cancel_delete_modal", _params, socket) do
-    {:noreply, assign(socket, :show_delete_modal, false)}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
   defp handle_delete_role(role, socket) do
     if role.is_system_role do
       {:noreply,
@@ -167,6 +183,12 @@ defmodule MvWeb.RoleLive.Show do
     recalculate_user_count(role, actor)
   end
 
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> push_event("focus_restore", %{id: "delete-role-trigger"})
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -198,94 +220,102 @@ defmodule MvWeb.RoleLive.Show do
         </:actions>
       </.header>
 
-      <.list>
-        <:item title={gettext("Name")}>{@role.name}</:item>
-        <:item title={gettext("Description")}>
-          <%= if @role.description do %>
-            {@role.description}
-          <% else %>
-            <span class="text-base-content/70 italic">{gettext("No description")}</span>
-          <% end %>
-        </:item>
-        <:item title={gettext("Permission Set")}>
-          <.badge variant={permission_set_badge_variant(@role.permission_set_name)}>
-            {@role.permission_set_name}
-          </.badge>
-        </:item>
-        <:item title={gettext("System Role")}>
-          <.badge :if={@role.is_system_role} variant="warning">
-            {gettext("Yes")}
-          </.badge>
-          <.badge :if={!@role.is_system_role} variant="neutral">
-            {gettext("No")}
-          </.badge>
-        </:item>
-      </.list>
+      <div
+        id="role-show-focus-root"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+      >
+        <.list>
+          <:item title={gettext("Name")}>{@role.name}</:item>
+          <:item title={gettext("Description")}>
+            <%= if @role.description do %>
+              {@role.description}
+            <% else %>
+              <span class="text-base-content/70 italic">{gettext("No description")}</span>
+            <% end %>
+          </:item>
+          <:item title={gettext("Permission Set")}>
+            <.badge variant={permission_set_badge_variant(@role.permission_set_name)}>
+              {@role.permission_set_name}
+            </.badge>
+          </:item>
+          <:item title={gettext("System Role")}>
+            <.badge :if={@role.is_system_role} variant="warning">
+              {gettext("Yes")}
+            </.badge>
+            <.badge :if={!@role.is_system_role} variant="neutral">
+              {gettext("No")}
+            </.badge>
+          </:item>
+        </.list>
 
-      <%!-- Danger zone: canonical pattern (same as member show) --%>
-      <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
-        <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
-          <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
-            {gettext("Danger zone")}
-          </h2>
-          <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-            <p class="text-base-content/70 mb-4">
-              {gettext(
-                "Deleting this role cannot be undone. Users assigned to this role must be reassigned first."
-              )}
-            </p>
-            <.button
-              variant="danger"
-              phx-click="open_delete_modal"
-              data-testid="role-delete"
-              aria-label={gettext("Delete role %{name}", name: @role.name)}
-            >
-              <.icon name="hero-trash" class="size-4" />
-              {gettext("Delete role")}
-            </.button>
-          </div>
-        </section>
-      <% end %>
-
-      <%!-- Delete Role Confirmation Modal (WCAG: focus moves into modal, keyboard confirm/cancel) --%>
-      <%= if assigns[:show_delete_modal] do %>
-        <dialog
-          id="delete-role-modal"
-          class="modal modal-open"
-          role="dialog"
-          aria-labelledby="delete-role-modal-title"
-        >
-          <div class="modal-box">
-            <h3 id="delete-role-modal-title" class="text-lg font-bold">{gettext("Delete Role")}</h3>
-            <p class="py-4">
-              {gettext(
-                "Are you sure you want to delete the role %{name}? This action cannot be undone.",
-                name: @role.name
-              )}
-            </p>
-            <div class="modal-action">
+        <%!-- Danger zone: canonical pattern (same as member show) --%>
+        <%= if can?(@current_user, :destroy, Mv.Authorization.Role) and not @role.is_system_role do %>
+          <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
+            <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
+              {gettext("Danger zone")}
+            </h2>
+            <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+              <p class="text-base-content/70 mb-4">
+                {gettext(
+                  "Deleting this role cannot be undone. Users assigned to this role must be reassigned first."
+                )}
+              </p>
               <.button
-                type="button"
-                variant="neutral"
-                phx-click="cancel_delete_modal"
-                phx-mounted={JS.focus()}
-                id="delete-role-modal-cancel"
-                aria-label={gettext("Cancel")}
-              >
-                {gettext("Cancel")}
-              </.button>
-              <.button
-                type="button"
+                id="delete-role-trigger"
                 variant="danger"
-                phx-click={JS.push("delete", value: %{id: @role.id})}
-                aria-label={gettext("Delete role")}
+                phx-click="open_delete_modal"
+                data-testid="role-delete"
+                aria-label={gettext("Delete role %{name}", name: @role.name)}
               >
-                {gettext("Delete")}
+                <.icon name="hero-trash" class="size-4" />
+                {gettext("Delete role")}
               </.button>
             </div>
-          </div>
-        </dialog>
-      <% end %>
+          </section>
+        <% end %>
+
+        <%!-- Delete Role Confirmation Modal (WCAG: focus moves into modal, keyboard confirm/cancel) --%>
+        <%= if assigns[:show_delete_modal] do %>
+          <dialog
+            id="delete-role-modal"
+            class="modal modal-open"
+            role="dialog"
+            aria-labelledby="delete-role-modal-title"
+            phx-keydown="dialog_keydown"
+          >
+            <div class="modal-box">
+              <h3 id="delete-role-modal-title" class="text-lg font-bold">{gettext("Delete Role")}</h3>
+              <p class="py-4">
+                {gettext(
+                  "Are you sure you want to delete the role %{name}? This action cannot be undone.",
+                  name: @role.name
+                )}
+              </p>
+              <div class="modal-action">
+                <.button
+                  type="button"
+                  variant="neutral"
+                  phx-click="cancel_delete_modal"
+                  phx-mounted={JS.focus()}
+                  id="delete-role-modal-cancel"
+                  aria-label={gettext("Cancel")}
+                >
+                  {gettext("Cancel")}
+                </.button>
+                <.button
+                  type="button"
+                  variant="danger"
+                  phx-click={JS.push("delete", value: %{id: @role.id})}
+                  aria-label={gettext("Delete role")}
+                >
+                  {gettext("Delete")}
+                </.button>
+              </div>
+            </div>
+          </dialog>
+        <% end %>
+      </div>
     </Layouts.app>
     """
   end
diff --git a/lib/mv_web/live/user_live/form.ex b/lib/mv_web/live/user_live/form.ex
index 0cd898f..f18ad4a 100644
--- a/lib/mv_web/live/user_live/form.ex
+++ b/lib/mv_web/live/user_live/form.ex
@@ -65,315 +65,323 @@ defmodule MvWeb.UserLive.Form do
         </:actions>
       </.header>
 
+      <div
+        id="user-form-focus-root"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+      >
       <.form class="max-w-xl" for={@form} id="user-form" phx-change="validate" phx-submit="save">
-        <.input field={@form[:email]} label={gettext("Email")} required type="email" />
+          <.input field={@form[:email]} label={gettext("Email")} required type="email" />
 
-        <%= if @user && @can_assign_role do %>
-          <div class="mt-4">
-            <.input
-              field={@form[:role_id]}
-              type="select"
-              label={gettext("Role")}
-              options={Enum.map(@roles, &{&1.name, &1.id})}
-              prompt={gettext("Select role...")}
-            />
-          </div>
-        <% end %>
-        
-    <!-- Password Section -->
-        <div class="mt-6">
-          <label class="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              name="set_password"
-              phx-click="toggle_password_section"
-              checked={@show_password_fields}
-              class="checkbox checkbox-sm"
-            />
-            <span class="text-sm font-medium">
-              {if @user, do: gettext("Change Password"), else: gettext("Set Password")}
-            </span>
-          </label>
-
-          <%= if @show_password_fields do %>
-            <div class="p-4 mt-4 space-y-4 rounded-lg bg-gray-50">
-              <%= if @user && MvWeb.Helpers.UserHelpers.has_oidc?(@user) do %>
-                <div class="p-3 mb-4 border border-red-300 rounded-lg bg-red-50" role="alert">
-                  <p class="text-sm font-semibold text-red-800">
-                    {gettext("SSO / OIDC user")}
-                  </p>
-                  <p class="mt-1 text-sm text-red-700">
-                    {gettext(
-                      "This user is linked via SSO (Single Sign-On). A password set or changed here only affects login with email and password in this application. It does not change the password in your identity provider (e.g. Authentik). To change the SSO password, use the identity provider or your organization's IT."
-                    )}
-                  </p>
-                </div>
-              <% end %>
+          <%= if @user && @can_assign_role do %>
+            <div class="mt-4">
               <.input
-                field={@form[:password]}
-                label={gettext("Password")}
-                type="password"
-                required
-                autocomplete="new-password"
+                field={@form[:role_id]}
+                type="select"
+                label={gettext("Role")}
+                options={Enum.map(@roles, &{&1.name, &1.id})}
+                prompt={gettext("Select role...")}
               />
-              
-    <!-- Only show password confirmation for new users (register_with_password) -->
-              <%= if !@user do %>
-                <.input
-                  field={@form[:password_confirmation]}
-                  label={gettext("Confirm Password")}
-                  type="password"
-                  required
-                  autocomplete="new-password"
-                />
-              <% end %>
-
-              <div class="text-sm text-gray-600">
-                <p><strong>{gettext("Password requirements")}:</strong></p>
-                <ul class="mt-1 space-y-1 text-xs list-disc list-inside">
-                  <li>{gettext("At least 8 characters")}</li>
-                  <li>{gettext("Include both letters and numbers")}</li>
-                  <li>{gettext("Consider using special characters")}</li>
-                </ul>
-              </div>
-
-              <%= if @user && @can_manage_member_linking do %>
-                <div class="p-3 mt-3 border border-orange-200 rounded bg-orange-50">
-                  <p class="text-sm text-orange-800">
-                    <strong>{gettext("Admin Note")}:</strong> {gettext(
-                      "As an administrator, you can directly set a new password for this user using the same secure Ash Authentication system."
-                    )}
-                  </p>
-                </div>
-              <% end %>
             </div>
-          <% else %>
-            <%= if @user do %>
-              <div class="p-4 mt-4 rounded-lg bg-blue-50">
-                <p class="text-sm text-blue-800">
-                  <strong>{gettext("Note")}:</strong> {gettext(
-                    "Check 'Change Password' above to set a new password for this user."
-                  )}
-                </p>
-              </div>
-            <% else %>
-              <div class="p-4 mt-4 rounded-lg bg-yellow-50">
-                <p class="text-sm text-yellow-800">
-                  <strong>{gettext("Note")}:</strong> {gettext(
-                    "User will be created without a password. Check 'Set Password' to add one."
-                  )}
-                </p>
-              </div>
-            <% end %>
           <% end %>
-        </div>
-        
-    <!-- Member Linking Section (admin only: only admins can link/unlink users to members) -->
-        <%= if @can_manage_member_linking do %>
+          
+    <!-- Password Section -->
           <div class="mt-6">
-            <h2 class="mb-3 text-base font-semibold">{gettext("Linked Member")}</h2>
+            <label class="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                name="set_password"
+                phx-click="toggle_password_section"
+                checked={@show_password_fields}
+                class="checkbox checkbox-sm"
+              />
+              <span class="text-sm font-medium">
+                {if @user, do: gettext("Change Password"), else: gettext("Set Password")}
+              </span>
+            </label>
 
-            <%= if @user && @user.member && !@unlink_member do %>
-              <!-- Show linked member with unlink button -->
-              <div class="p-4 border border-green-200 rounded-lg bg-green-50">
-                <div class="flex items-center justify-between">
-                  <div>
-                    <p class="font-medium text-green-900">
-                      {MvWeb.Helpers.MemberHelpers.display_name(@user.member)}
+            <%= if @show_password_fields do %>
+              <div class="p-4 mt-4 space-y-4 rounded-lg bg-gray-50">
+                <%= if @user && MvWeb.Helpers.UserHelpers.has_oidc?(@user) do %>
+                  <div class="p-3 mb-4 border border-red-300 rounded-lg bg-red-50" role="alert">
+                    <p class="text-sm font-semibold text-red-800">
+                      {gettext("SSO / OIDC user")}
                     </p>
-                    <p class="text-sm text-green-700">{@user.member.email}</p>
-                  </div>
-                  <.button
-                    type="button"
-                    variant="danger"
-                    size="sm"
-                    phx-click="unlink_member"
-                  >
-                    {gettext("Unlink Member")}
-                  </.button>
-                </div>
-              </div>
-            <% else %>
-              <%= if @unlink_member do %>
-                <!-- Show unlink pending message -->
-                <div class="p-4 border border-yellow-200 rounded-lg bg-yellow-50">
-                  <p class="text-sm text-yellow-800">
-                    <strong>{gettext("Unlinking scheduled")}:</strong> {gettext(
-                      "Member will be unlinked when you save. Cannot select new member until saved."
-                    )}
-                  </p>
-                </div>
-              <% end %>
-              <!-- Show member search/selection for unlinked users -->
-              <div class="space-y-3">
-                <div class="relative">
-                  <input
-                    type="text"
-                    id="member-search-input"
-                    role="combobox"
-                    phx-hook="ComboBox"
-                    phx-focus="show_member_dropdown"
-                    phx-change="search_members"
-                    phx-debounce="300"
-                    phx-window-keydown="member_dropdown_keydown"
-                    value={@member_search_query}
-                    placeholder={gettext("Search for a member to link...")}
-                    class="w-full input"
-                    name="member_search"
-                    disabled={@unlink_member}
-                    aria-label={gettext("Search for member to link")}
-                    aria-describedby={if @selected_member_name, do: "member-selected", else: nil}
-                    aria-autocomplete="list"
-                    aria-controls="member-dropdown"
-                    aria-expanded={to_string(@show_member_dropdown)}
-                    aria-activedescendant={
-                      if @focused_member_index,
-                        do: "member-option-#{@focused_member_index}",
-                        else: nil
-                    }
-                    autocomplete="off"
-                  />
-
-                  <%= if length(@available_members) > 0 do %>
-                    <div
-                      id="member-dropdown"
-                      role="listbox"
-                      aria-label={gettext("Available members")}
-                      class={"absolute z-10 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto #{if !@show_member_dropdown, do: "hidden"}"}
-                      phx-click-away="hide_member_dropdown"
-                    >
-                      <%= for {member, index} <- Enum.with_index(@available_members) do %>
-                        <div
-                          id={"member-option-#{index}"}
-                          role="option"
-                          tabindex="0"
-                          aria-selected={to_string(@focused_member_index == index)}
-                          phx-click="select_member"
-                          phx-value-id={member.id}
-                          data-member-id={member.id}
-                          class={[
-                            "px-4 py-3 cursor-pointer border-b border-base-300 last:border-b-0",
-                            if(@focused_member_index == index,
-                              do: "bg-base-300",
-                              else: "hover:bg-base-200"
-                            )
-                          ]}
-                        >
-                          <p class="font-medium">
-                            {MvWeb.Helpers.MemberHelpers.display_name(member)}
-                          </p>
-                          <p class="text-sm text-base-content/70">{member.email}</p>
-                        </div>
-                      <% end %>
-                    </div>
-                  <% end %>
-                </div>
-
-                <%= if @user && @user.email && @available_members != [] && Enum.all?(@available_members, &(&1.email == to_string(@user.email))) do %>
-                  <div class="p-3 border border-yellow-200 rounded bg-yellow-50">
-                    <p class="text-sm text-yellow-800">
-                      <strong>{gettext("Note")}:</strong> {gettext(
-                        "A member with this email already exists. To link with a different member, please change one of the email addresses first."
+                    <p class="mt-1 text-sm text-red-700">
+                      {gettext(
+                        "This user is linked via SSO (Single Sign-On). A password set or changed here only affects login with email and password in this application. It does not change the password in your identity provider (e.g. Authentik). To change the SSO password, use the identity provider or your organization's IT."
                       )}
                     </p>
                   </div>
                 <% end %>
+                <.input
+                  field={@form[:password]}
+                  label={gettext("Password")}
+                  type="password"
+                  required
+                  autocomplete="new-password"
+                />
+                
+    <!-- Only show password confirmation for new users (register_with_password) -->
+                <%= if !@user do %>
+                  <.input
+                    field={@form[:password_confirmation]}
+                    label={gettext("Confirm Password")}
+                    type="password"
+                    required
+                    autocomplete="new-password"
+                  />
+                <% end %>
 
-                <%= if @selected_member_id && @selected_member_name do %>
-                  <div
-                    id="member-selected"
-                    class="p-3 mt-2 border border-blue-200 rounded-lg bg-blue-50"
-                  >
-                    <p class="text-sm text-blue-800">
-                      <strong>{gettext("Selected")}:</strong> {@selected_member_name}
-                    </p>
-                    <p class="mt-1 text-xs text-blue-600">
-                      {gettext("Save to confirm linking.")}
+                <div class="text-sm text-gray-600">
+                  <p><strong>{gettext("Password requirements")}:</strong></p>
+                  <ul class="mt-1 space-y-1 text-xs list-disc list-inside">
+                    <li>{gettext("At least 8 characters")}</li>
+                    <li>{gettext("Include both letters and numbers")}</li>
+                    <li>{gettext("Consider using special characters")}</li>
+                  </ul>
+                </div>
+
+                <%= if @user && @can_manage_member_linking do %>
+                  <div class="p-3 mt-3 border border-orange-200 rounded bg-orange-50">
+                    <p class="text-sm text-orange-800">
+                      <strong>{gettext("Admin Note")}:</strong> {gettext(
+                        "As an administrator, you can directly set a new password for this user using the same secure Ash Authentication system."
+                      )}
                     </p>
                   </div>
                 <% end %>
               </div>
+            <% else %>
+              <%= if @user do %>
+                <div class="p-4 mt-4 rounded-lg bg-blue-50">
+                  <p class="text-sm text-blue-800">
+                    <strong>{gettext("Note")}:</strong> {gettext(
+                      "Check 'Change Password' above to set a new password for this user."
+                    )}
+                  </p>
+                </div>
+              <% else %>
+                <div class="p-4 mt-4 rounded-lg bg-yellow-50">
+                  <p class="text-sm text-yellow-800">
+                    <strong>{gettext("Note")}:</strong> {gettext(
+                      "User will be created without a password. Check 'Set Password' to add one."
+                    )}
+                  </p>
+                </div>
+              <% end %>
             <% end %>
           </div>
-        <% end %>
+          
+    <!-- Member Linking Section (admin only: only admins can link/unlink users to members) -->
+          <%= if @can_manage_member_linking do %>
+            <div class="mt-6">
+              <h2 class="mb-3 text-base font-semibold">{gettext("Linked Member")}</h2>
 
-        <%!-- Danger zone: canonical pattern (same as member form) --%>
-        <%= if @user && can?(@current_user, :destroy, @user) && !Mv.Helpers.SystemActor.system_user?(@user) do %>
-          <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
-            <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
-              {gettext("Danger zone")}
-            </h2>
-            <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-              <p class="text-base-content/70 mb-4">
-                {gettext(
-                  "Deleting this user cannot be undone. The user account and any linked member association will be affected."
-                )}
-              </p>
-              <.button
-                type="button"
-                variant="danger"
-                phx-click="open_delete_modal"
-                data-testid="user-delete"
-                aria-label={gettext("Delete user %{email}", email: @user.email)}
-              >
-                <.icon name="hero-trash" class="size-4" />
-                {gettext("Delete user")}
-              </.button>
+              <%= if @user && @user.member && !@unlink_member do %>
+                <!-- Show linked member with unlink button -->
+                <div class="p-4 border border-green-200 rounded-lg bg-green-50">
+                  <div class="flex items-center justify-between">
+                    <div>
+                      <p class="font-medium text-green-900">
+                        {MvWeb.Helpers.MemberHelpers.display_name(@user.member)}
+                      </p>
+                      <p class="text-sm text-green-700">{@user.member.email}</p>
+                    </div>
+                    <.button
+                      type="button"
+                      variant="danger"
+                      size="sm"
+                      phx-click="unlink_member"
+                    >
+                      {gettext("Unlink Member")}
+                    </.button>
+                  </div>
+                </div>
+              <% else %>
+                <%= if @unlink_member do %>
+                  <!-- Show unlink pending message -->
+                  <div class="p-4 border border-yellow-200 rounded-lg bg-yellow-50">
+                    <p class="text-sm text-yellow-800">
+                      <strong>{gettext("Unlinking scheduled")}:</strong> {gettext(
+                        "Member will be unlinked when you save. Cannot select new member until saved."
+                      )}
+                    </p>
+                  </div>
+                <% end %>
+                <!-- Show member search/selection for unlinked users -->
+                <div class="space-y-3">
+                  <div class="relative">
+                    <input
+                      type="text"
+                      id="member-search-input"
+                      role="combobox"
+                      phx-hook="ComboBox"
+                      phx-focus="show_member_dropdown"
+                      phx-change="search_members"
+                      phx-debounce="300"
+                      phx-window-keydown="member_dropdown_keydown"
+                      value={@member_search_query}
+                      placeholder={gettext("Search for a member to link...")}
+                      class="w-full input"
+                      name="member_search"
+                      disabled={@unlink_member}
+                      aria-label={gettext("Search for member to link")}
+                      aria-describedby={if @selected_member_name, do: "member-selected", else: nil}
+                      aria-autocomplete="list"
+                      aria-controls="member-dropdown"
+                      aria-expanded={to_string(@show_member_dropdown)}
+                      aria-activedescendant={
+                        if @focused_member_index,
+                          do: "member-option-#{@focused_member_index}",
+                          else: nil
+                      }
+                      autocomplete="off"
+                    />
+
+                    <%= if length(@available_members) > 0 do %>
+                      <div
+                        id="member-dropdown"
+                        role="listbox"
+                        aria-label={gettext("Available members")}
+                        class={"absolute z-10 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto #{if !@show_member_dropdown, do: "hidden"}"}
+                        phx-click-away="hide_member_dropdown"
+                      >
+                        <%= for {member, index} <- Enum.with_index(@available_members) do %>
+                          <div
+                            id={"member-option-#{index}"}
+                            role="option"
+                            tabindex="0"
+                            aria-selected={to_string(@focused_member_index == index)}
+                            phx-click="select_member"
+                            phx-value-id={member.id}
+                            data-member-id={member.id}
+                            class={[
+                              "px-4 py-3 cursor-pointer border-b border-base-300 last:border-b-0",
+                              if(@focused_member_index == index,
+                                do: "bg-base-300",
+                                else: "hover:bg-base-200"
+                              )
+                            ]}
+                          >
+                            <p class="font-medium">
+                              {MvWeb.Helpers.MemberHelpers.display_name(member)}
+                            </p>
+                            <p class="text-sm text-base-content/70">{member.email}</p>
+                          </div>
+                        <% end %>
+                      </div>
+                    <% end %>
+                  </div>
+
+                  <%= if @user && @user.email && @available_members != [] && Enum.all?(@available_members, &(&1.email == to_string(@user.email))) do %>
+                    <div class="p-3 border border-yellow-200 rounded bg-yellow-50">
+                      <p class="text-sm text-yellow-800">
+                        <strong>{gettext("Note")}:</strong> {gettext(
+                          "A member with this email already exists. To link with a different member, please change one of the email addresses first."
+                        )}
+                      </p>
+                    </div>
+                  <% end %>
+
+                  <%= if @selected_member_id && @selected_member_name do %>
+                    <div
+                      id="member-selected"
+                      class="p-3 mt-2 border border-blue-200 rounded-lg bg-blue-50"
+                    >
+                      <p class="text-sm text-blue-800">
+                        <strong>{gettext("Selected")}:</strong> {@selected_member_name}
+                      </p>
+                      <p class="mt-1 text-xs text-blue-600">
+                        {gettext("Save to confirm linking.")}
+                      </p>
+                    </div>
+                  <% end %>
+                </div>
+              <% end %>
             </div>
-          </section>
-        <% end %>
+          <% end %>
 
-        <%!-- Delete User Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
-        <%= if @user && assigns[:show_delete_modal] do %>
-          <dialog
-            id="delete-user-form-modal"
-            class="modal modal-open"
-            role="dialog"
-            aria-labelledby="delete-user-form-modal-title"
-          >
-            <div class="modal-box">
-              <h3 id="delete-user-form-modal-title" class="text-lg font-bold">
-                {gettext("Delete User")}
-              </h3>
-              <p class="py-4">
-                {gettext(
-                  "Are you sure you want to delete the user %{email}? This action cannot be undone.",
-                  email: @user.email
-                )}
-              </p>
-              <div class="modal-action">
-                <.button
-                  type="button"
-                  variant="neutral"
-                  phx-click="cancel_delete_modal"
-                  phx-mounted={JS.focus()}
-                  id="delete-user-form-modal-cancel"
-                  aria-label={gettext("Cancel")}
-                >
-                  {gettext("Cancel")}
-                </.button>
+          <%!-- Danger zone: canonical pattern (same as member form) --%>
+          <%= if @user && can?(@current_user, :destroy, @user) && !Mv.Helpers.SystemActor.system_user?(@user) do %>
+            <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
+              <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
+                {gettext("Danger zone")}
+              </h2>
+              <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+                <p class="text-base-content/70 mb-4">
+                  {gettext(
+                    "Deleting this user cannot be undone. The user account and any linked member association will be affected."
+                  )}
+                </p>
                 <.button
+                  id="delete-user-form-trigger"
                   type="button"
                   variant="danger"
-                  phx-click={JS.push("delete", value: %{id: @user.id})}
-                  aria-label={gettext("Delete user")}
+                  phx-click="open_delete_modal"
+                  data-testid="user-delete"
+                  aria-label={gettext("Delete user %{email}", email: @user.email)}
                 >
-                  {gettext("Delete")}
+                  <.icon name="hero-trash" class="size-4" />
+                  {gettext("Delete user")}
                 </.button>
               </div>
-            </div>
-          </dialog>
-        <% end %>
+            </section>
+          <% end %>
 
-        <div class="mt-4">
-          <.button navigate={return_path(@return_to, @user)} variant="neutral">
-            {gettext("Cancel")}
-          </.button>
-          <.button phx-disable-with={gettext("Saving...")} variant="primary">
-            {gettext("Save User")}
-          </.button>
-        </div>
-      </.form>
+          <%!-- Delete User Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
+          <%= if @user && assigns[:show_delete_modal] do %>
+            <dialog
+              id="delete-user-form-modal"
+              class="modal modal-open"
+              role="dialog"
+              aria-labelledby="delete-user-form-modal-title"
+              phx-keydown="dialog_keydown"
+            >
+              <div class="modal-box">
+                <h3 id="delete-user-form-modal-title" class="text-lg font-bold">
+                  {gettext("Delete User")}
+                </h3>
+                <p class="py-4">
+                  {gettext(
+                    "Are you sure you want to delete the user %{email}? This action cannot be undone.",
+                    email: @user.email
+                  )}
+                </p>
+                <div class="modal-action">
+                  <.button
+                    type="button"
+                    variant="neutral"
+                    phx-click="cancel_delete_modal"
+                    phx-mounted={JS.focus()}
+                    id="delete-user-form-modal-cancel"
+                    aria-label={gettext("Cancel")}
+                  >
+                    {gettext("Cancel")}
+                  </.button>
+                  <.button
+                    type="button"
+                    variant="danger"
+                    phx-click={JS.push("delete", value: %{id: @user.id})}
+                    aria-label={gettext("Delete user")}
+                  >
+                    {gettext("Delete")}
+                  </.button>
+                </div>
+              </div>
+            </dialog>
+          <% end %>
+
+          <div class="mt-4">
+            <.button navigate={return_path(@return_to, @user)} variant="neutral">
+              {gettext("Cancel")}
+            </.button>
+            <.button phx-disable-with={gettext("Saving...")} variant="primary">
+              {gettext("Save User")}
+            </.button>
+          </div>
+        </.form>
+      </div>
     </Layouts.app>
     """
   end
@@ -496,9 +504,25 @@ defmodule MvWeb.UserLive.Form do
 
   @impl true
   def handle_event("cancel_delete_modal", _params, socket) do
-    {:noreply, assign(socket, :show_delete_modal, false)}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     user = socket.assigns.user
@@ -660,6 +684,12 @@ defmodule MvWeb.UserLive.Form do
     end
   end
 
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> push_event("focus_restore", %{id: "delete-user-form-trigger"})
+  end
+
   defp handle_member_linking(socket, user, actor) do
     result = perform_member_link_action(socket, user, actor)
 
diff --git a/lib/mv_web/live/user_live/show.ex b/lib/mv_web/live/user_live/show.ex
index 6801c2e..770be82 100644
--- a/lib/mv_web/live/user_live/show.ex
+++ b/lib/mv_web/live/user_live/show.ex
@@ -58,98 +58,106 @@ defmodule MvWeb.UserLive.Show do
         </:actions>
       </.header>
 
-      <.list>
-        <:item title={gettext("Email")}>{@user.email}</:item>
-        <:item title={gettext("Role")}>{@user.role.name}</:item>
-        <:item title={gettext("Password Authentication")}>
-          {if MvWeb.Helpers.UserHelpers.has_password?(@user),
-            do: gettext("Enabled"),
-            else: gettext("Not enabled")}
-        </:item>
-        <:item title={gettext("OIDC")}>
-          {if MvWeb.Helpers.UserHelpers.has_oidc?(@user),
-            do: gettext("Linked"),
-            else: gettext("Not linked")}
-        </:item>
-        <:item title={gettext("Linked Member")}>
-          <%= if @user.member do %>
-            <.link
-              navigate={~p"/members/#{@user.member}"}
-              class="text-blue-600 underline hover:text-blue-800"
-            >
-              <.icon name="hero-users" class="inline w-4 h-4 mr-1" />
-              {MvWeb.Helpers.MemberHelpers.display_name(@user.member)}
-            </.link>
-          <% else %>
-            <span class="italic text-gray-500">{gettext("No member linked")}</span>
-          <% end %>
-        </:item>
-      </.list>
-
-      <%!-- Danger zone: canonical pattern (same as member show) --%>
-      <%= if can?(@current_user, :destroy, @user) and not Mv.Helpers.SystemActor.system_user?(@user) do %>
-        <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
-          <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
-            {gettext("Danger zone")}
-          </h2>
-          <div class="border border-base-300 rounded-lg p-4 bg-base-100">
-            <p class="text-base-content/70 mb-4">
-              {gettext(
-                "Deleting this user cannot be undone. The user account and any linked member association will be affected."
-              )}
-            </p>
-            <.button
-              variant="danger"
-              phx-click="open_delete_modal"
-              data-testid="user-delete"
-              aria-label={gettext("Delete user %{email}", email: @user.email)}
-            >
-              <.icon name="hero-trash" class="size-4" />
-              {gettext("Delete user")}
-            </.button>
-          </div>
-        </section>
-      <% end %>
-
-      <%!-- Delete User Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
-      <%= if assigns[:show_delete_modal] do %>
-        <dialog
-          id="delete-user-modal"
-          class="modal modal-open"
-          role="dialog"
-          aria-labelledby="delete-user-modal-title"
-        >
-          <div class="modal-box">
-            <h3 id="delete-user-modal-title" class="text-lg font-bold">{gettext("Delete User")}</h3>
-            <p class="py-4">
-              {gettext(
-                "Are you sure you want to delete the user %{email}? This action cannot be undone.",
-                email: @user.email
-              )}
-            </p>
-            <div class="modal-action">
-              <.button
-                type="button"
-                variant="neutral"
-                phx-click="cancel_delete_modal"
-                phx-mounted={JS.focus()}
-                id="delete-user-modal-cancel"
-                aria-label={gettext("Cancel")}
+      <div
+        id="user-show-focus-root"
+        phx-hook="FocusRestore"
+        phx-window-keydown={if @show_delete_modal, do: "window_keydown", else: nil}
+      >
+        <.list>
+          <:item title={gettext("Email")}>{@user.email}</:item>
+          <:item title={gettext("Role")}>{@user.role.name}</:item>
+          <:item title={gettext("Password Authentication")}>
+            {if MvWeb.Helpers.UserHelpers.has_password?(@user),
+              do: gettext("Enabled"),
+              else: gettext("Not enabled")}
+          </:item>
+          <:item title={gettext("OIDC")}>
+            {if MvWeb.Helpers.UserHelpers.has_oidc?(@user),
+              do: gettext("Linked"),
+              else: gettext("Not linked")}
+          </:item>
+          <:item title={gettext("Linked Member")}>
+            <%= if @user.member do %>
+              <.link
+                navigate={~p"/members/#{@user.member}"}
+                class="text-blue-600 underline hover:text-blue-800"
               >
-                {gettext("Cancel")}
-              </.button>
+                <.icon name="hero-users" class="inline w-4 h-4 mr-1" />
+                {MvWeb.Helpers.MemberHelpers.display_name(@user.member)}
+              </.link>
+            <% else %>
+              <span class="italic text-gray-500">{gettext("No member linked")}</span>
+            <% end %>
+          </:item>
+        </.list>
+
+        <%!-- Danger zone: canonical pattern (same as member show) --%>
+        <%= if can?(@current_user, :destroy, @user) and not Mv.Helpers.SystemActor.system_user?(@user) do %>
+          <section class="mt-8 mb-6" aria-labelledby="danger-zone-heading">
+            <h2 id="danger-zone-heading" class="text-lg font-semibold mb-3 text-error">
+              {gettext("Danger zone")}
+            </h2>
+            <div class="border border-base-300 rounded-lg p-4 bg-base-100">
+              <p class="text-base-content/70 mb-4">
+                {gettext(
+                  "Deleting this user cannot be undone. The user account and any linked member association will be affected."
+                )}
+              </p>
               <.button
-                type="button"
+                id="delete-user-trigger"
                 variant="danger"
-                phx-click={JS.push("delete", value: %{id: @user.id})}
-                aria-label={gettext("Delete user")}
+                phx-click="open_delete_modal"
+                data-testid="user-delete"
+                aria-label={gettext("Delete user %{email}", email: @user.email)}
               >
-                {gettext("Delete")}
+                <.icon name="hero-trash" class="size-4" />
+                {gettext("Delete user")}
               </.button>
             </div>
-          </div>
-        </dialog>
-      <% end %>
+          </section>
+        <% end %>
+
+        <%!-- Delete User Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%>
+        <%= if assigns[:show_delete_modal] do %>
+          <dialog
+            id="delete-user-modal"
+            class="modal modal-open"
+            role="dialog"
+            aria-labelledby="delete-user-modal-title"
+            phx-keydown="dialog_keydown"
+          >
+            <div class="modal-box">
+              <h3 id="delete-user-modal-title" class="text-lg font-bold">{gettext("Delete User")}</h3>
+              <p class="py-4">
+                {gettext(
+                  "Are you sure you want to delete the user %{email}? This action cannot be undone.",
+                  email: @user.email
+                )}
+              </p>
+              <div class="modal-action">
+                <.button
+                  type="button"
+                  variant="neutral"
+                  phx-click="cancel_delete_modal"
+                  phx-mounted={JS.focus()}
+                  id="delete-user-modal-cancel"
+                  aria-label={gettext("Cancel")}
+                >
+                  {gettext("Cancel")}
+                </.button>
+                <.button
+                  type="button"
+                  variant="danger"
+                  phx-click={JS.push("delete", value: %{id: @user.id})}
+                  aria-label={gettext("Delete user")}
+                >
+                  {gettext("Delete")}
+                </.button>
+              </div>
+            </div>
+          </dialog>
+        <% end %>
+      </div>
     </Layouts.app>
     """
   end
@@ -182,9 +190,25 @@ defmodule MvWeb.UserLive.Show do
 
   @impl true
   def handle_event("cancel_delete_modal", _params, socket) do
-    {:noreply, assign(socket, :show_delete_modal, false)}
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
   end
 
+  def handle_event("window_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    if socket.assigns[:show_delete_modal] do
+      {:noreply, close_delete_modal_and_restore_focus(socket)}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  def handle_event("window_keydown", _params, socket), do: {:noreply, socket}
+
+  def handle_event("dialog_keydown", %{"key" => key}, socket) when key in ["Escape", "Esc"] do
+    {:noreply, close_delete_modal_and_restore_focus(socket)}
+  end
+
+  def handle_event("dialog_keydown", _params, socket), do: {:noreply, socket}
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     user = socket.assigns.user
@@ -229,4 +253,10 @@ defmodule MvWeb.UserLive.Show do
          |> assign(:show_delete_modal, false)}
     end
   end
+
+  defp close_delete_modal_and_restore_focus(socket) do
+    socket
+    |> assign(:show_delete_modal, false)
+    |> push_event("focus_restore", %{id: "delete-user-trigger"})
+  end
 end