From c71c7d6ed6d28517b90eeb9ef790c1a42ad050db Mon Sep 17 00:00:00 2001 From: carla Date: Thu, 26 Feb 2026 15:24:29 +0100 Subject: [PATCH] fix: color contrast dark mode and keyboard moadals --- CODE_GUIDELINES.md | 5 +- assets/css/app.css | 7 +- assets/js/app.js | 26 + lib/mv_web/components/core_components.ex | 2 +- .../live/custom_field_live/form_component.ex | 1 + .../live/custom_field_live/index_component.ex | 30 +- lib/mv_web/live/datafields_live.ex | 48 +- lib/mv_web/live/group_live/show.ex | 37 +- lib/mv_web/live/member_live/form.ex | 559 +++++++++-------- lib/mv_web/live/member_live/show.ex | 63 +- .../show/membership_fees_component.ex | 39 +- lib/mv_web/live/role_live/show.ex | 196 +++--- lib/mv_web/live/user_live/form.ex | 590 +++++++++--------- lib/mv_web/live/user_live/show.ex | 204 +++--- 14 files changed, 1067 insertions(+), 740 deletions(-) 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 `` 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 )}

<.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" >

@@ -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 - <%!-- Overview: both sections with form_section wrappers --%> -
+ <%!-- Overview: both sections with form_section wrappers; FocusRestore for custom field delete modal --%> +
<.form_section title={gettext("Personal Data")}> <.live_component module={MvWeb.MemberFieldLive.IndexComponent} @@ -63,7 +92,13 @@ defmodule MvWeb.DatafieldsLive do />
-
+
<.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 -
+
<%!-- Group Information --%>
@@ -353,6 +358,7 @@ defmodule MvWeb.GroupLive.Show do )}

<.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" >

@@ -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""" <.form for={@form} id="member-form" phx-change="validate" phx-submit="save"> +
<.header> - <:leading> - <.button navigate={return_path(@return_to, @member)} variant="neutral"> - <.icon name="hero-arrow-left" class="size-4" /> - {gettext("Back")} - - - <%= 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")} - - - + <:leading> + <.button navigate={return_path(@return_to, @member)} variant="neutral"> + <.icon name="hero-arrow-left" class="size-4" /> + {gettext("Back")} + + + <%= 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")} + + + -
- <%!-- Tab navigation: same styling as member show; only Contact Data tab (no Membership Fees on edit) --%> -
- -
+ +
- <%!-- Contact Data Tab Content (same structure as member show) --%> -
- <%!-- Personal Data and Custom Fields Row --%> -
- <%!-- Personal Data Section --%> -
- <.form_section title={gettext("Personal Data")}> -
- <%!-- Name Row --%> -
-
- <.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) --%> +
+ <%!-- Personal Data and Custom Fields Row --%> +
+ <%!-- Personal Data Section --%> +
+ <.form_section title={gettext("Personal Data")}> +
+ <%!-- Name Row --%> +
+
+ <.input + field={@form[:first_name]} + label={gettext("First Name")} + required={@member_field_required_map[:first_name]} + /> +
+
+ <.input + field={@form[:last_name]} + label={gettext("Last Name")} + required={@member_field_required_map[:last_name]} + /> +
-
- <.input - field={@form[:last_name]} - label={gettext("Last Name")} - required={@member_field_required_map[:last_name]} - /> -
-
- <%!-- Address: Country, Postal Code, City in one row --%> -
-
- <.input field={@form[:country]} label={gettext("Country")} /> + <%!-- Address: Country, Postal Code, City in one row --%> +
+
+ <.input field={@form[:country]} label={gettext("Country")} /> +
+
+ <.input + field={@form[:postal_code]} + label={gettext("Postal Code")} + required={@member_field_required_map[:postal_code]} + /> +
+
+ <.input field={@form[:city]} label={gettext("City")} /> +
-
- <.input - field={@form[:postal_code]} - label={gettext("Postal Code")} - required={@member_field_required_map[:postal_code]} - /> -
-
- <.input field={@form[:city]} label={gettext("City")} /> -
-
- <%!-- Street and Nr. below --%> -
+ <%!-- Street and Nr. below --%> +
+
+ <.input field={@form[:street]} label={gettext("Street")} /> +
+
+ <.input field={@form[:house_number]} label={gettext("Nr.")} /> +
+
+ + <%!-- Email --%>
- <.input field={@form[:street]} label={gettext("Street")} /> + <.input field={@form[:email]} label={gettext("Email")} required type="email" />
-
- <.input field={@form[:house_number]} label={gettext("Nr.")} /> -
-
- <%!-- Email --%> -
- <.input field={@form[:email]} label={gettext("Email")} required type="email" /> -
- - <%!-- Membership Dates Row --%> -
-
- <.input - field={@form[:join_date]} - label={gettext("Join Date")} - type="date" - required={@member_field_required_map[:join_date]} - /> + <%!-- Membership Dates Row --%> +
+
+ <.input + field={@form[:join_date]} + label={gettext("Join Date")} + type="date" + required={@member_field_required_map[:join_date]} + /> +
+
+ <.input + field={@form[:exit_date]} + label={gettext("Exit Date")} + type="date" + required={@member_field_required_map[:exit_date]} + /> +
-
+ + <%!-- Notes --%> +
<.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]} />
+ +
- <%!-- Notes --%> + <%!-- Custom Fields Section --%> + <%= if Enum.any?(@custom_fields) do %> +
+ <.form_section title={gettext("Custom Fields")}> +
+ <%!-- 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 %> +
+ <.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} + /> + + +
+ <% end %> + + <% end %> +
+ +
+ <% end %> +
+ + <%!-- Membership Fee Section --%> +
+ <.form_section title={gettext("Membership Fee")}> +
- <.input - field={@form[:notes]} - label={gettext("Notes")} - type="textarea" - required={@member_field_required_map[:notes]} - /> + + + <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %> + <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %> +

{msg}

+ <% end %> + <%= if @interval_warning do %> +
+ <.icon name="hero-exclamation-triangle" class="size-5" /> + {@interval_warning} +
+ <% end %> +

+ {gettext( + "Select a membership fee type for this member. Members can only switch between types with the same interval." + )} +

- <%!-- Custom Fields Section --%> - <%= if Enum.any?(@custom_fields) do %> -
- <.form_section title={gettext("Custom Fields")}> -
- <%!-- 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 %> -
- <.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} - /> - - -
- <% end %> - - <% end %> -
- -
- <% end %> -
+ <%!-- Bottom Action Buttons --%> +
+ <.button navigate={return_path(@return_to, @member)} variant="neutral" type="button"> + {gettext("Cancel")} + + <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit"> + {gettext("Save Member")} + +
- <%!-- Membership Fee Section --%> -
- <.form_section title={gettext("Membership Fee")}> -
-
- - - <%= for error <- List.wrap(@form.errors[:membership_fee_type_id] || []) do %> - <% {msg, _opts} = if is_tuple(error), do: error, else: {error, []} %> -

{msg}

- <% end %> - <%= if @interval_warning do %> -
- <.icon name="hero-exclamation-triangle" class="size-5" /> - {@interval_warning} -
- <% end %> -

+ <%!-- Danger zone: same section pattern as MemberLive.Show (canonical) --%> + <%= if @member && can?(@current_user, :destroy, @member) do %> +

+

+ {gettext("Danger zone")} +

+
+

{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." )}

-
-
- -
- - <%!-- Bottom Action Buttons --%> -
- <.button navigate={return_path(@return_to, @member)} variant="neutral" type="button"> - {gettext("Cancel")} - - <.button phx-disable-with={gettext("Saving...")} variant="primary" type="submit"> - {gettext("Save Member")} - -
- - <%!-- Danger zone: same section pattern as MemberLive.Show (canonical) --%> - <%= if @member && can?(@current_user, :destroy, @member) do %> -
-

- {gettext("Danger zone")} -

-
-

- {gettext( - "Deleting this member cannot be undone. All related data (e.g. membership fee cycles) will be removed." - )} -

- <.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")} - -
-
- <% end %> - - <%!-- Delete Member Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%> - <%= if @member && assigns[:show_delete_modal] do %> - -
-

- {gettext("Delete Member")} -

-

- {gettext("Are you sure you want to delete %{name}? This action cannot be undone.", - name: MvWeb.Helpers.MemberHelpers.display_name(@member) - )} -

-
<.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 - 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")}
-
- - <% end %> + + <% end %> + + <%!-- Delete Member Confirmation Modal (WCAG: focus in modal, keyboard confirm/cancel) --%> + <%= if @member && assigns[:show_delete_modal] do %> + +
+

+ {gettext("Delete Member")} +

+

+ {gettext( + "Are you sure you want to delete %{name}? This action cannot be undone.", + name: MvWeb.Helpers.MemberHelpers.display_name(@member) + )} +

+
+ <.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 + type="button" + variant="danger" + phx-click={JS.push("delete", value: %{id: @member.id})} + aria-label={gettext("Delete member")} + > + {gettext("Delete")} + +
+
+ + <% end %> +
@@ -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 -
- <%!-- Tab Navigation: surface only behind buttons (inline); tabs-bordered; tabs-lg; both tabs keyboard-focusable --%> +
+ <%!-- Tab Navigation: roving tabindex (only active tab tabindex="0"), ArrowLeft/ArrowRight (WCAG tab pattern) --%>