feat: consistent and accessible modal on delete

lib/mv_web/live/member_live/form.ex

@@ -277,14 +277,7 @@ defmodule MvWeb.MemberLive.Form do
                   <.button
                     variant="danger"
                     type="button"
-                    phx-click="delete"
-                    phx-value-id={@member.id}
-                    data-confirm={
-                      gettext(
-                        "Are you sure you want to delete %{name}? This action cannot be undone.",
-                        name: MvWeb.Helpers.MemberHelpers.display_name(@member)
-                      )
-                    }
+                    phx-click="open_delete_modal"
                     data-testid="member-delete"
                     aria-label={
                       gettext("Delete member %{name}",
@@ -298,6 +291,40 @@ defmodule MvWeb.MemberLive.Form do
                 </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"
+                      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>
       </.form>
@@ -348,6 +375,7 @@ defmodule MvWeb.MemberLive.Form do
      |> assign(:available_fee_types, available_fee_types)
      |> assign(:interval_warning, nil)
      |> assign(:member_field_required_map, member_field_required_map)
+     |> assign_new(:show_delete_modal, fn -> false end)
      |> assign_form()}
   end
 
@@ -419,6 +447,16 @@ defmodule MvWeb.MemberLive.Form do
     end
   end
 
+  @impl true
+  def handle_event("open_delete_modal", _params, socket) do
+    {:noreply, assign(socket, :show_delete_modal, true)}
+  end
+
+  @impl true
+  def handle_event("cancel_delete_modal", _params, socket) do
+    {:noreply, assign(socket, :show_delete_modal, false)}
+  end
+
   @impl true
   def handle_event("delete", %{"id" => id}, socket) do
     member = socket.assigns.member
@@ -426,10 +464,16 @@ defmodule MvWeb.MemberLive.Form do
 
     cond do
       is_nil(member) ->
-        {:noreply, put_flash(socket, :error, gettext("Member not found"))}
+        {:noreply,
+         socket
+         |> put_flash(:error, gettext("Member not found"))
+         |> assign(:show_delete_modal, false)}
 
       to_string(id) != to_string(member.id) ->
-        {:noreply, put_flash(socket, :error, gettext("Member not found"))}
+        {:noreply,
+         socket
+         |> put_flash(:error, gettext("Member not found"))
+         |> assign(:show_delete_modal, false)}
 
       true ->
         handle_member_delete_destroy(socket, member, actor)
@@ -446,11 +490,16 @@ defmodule MvWeb.MemberLive.Form do
 
       {:error, %Ash.Error.Forbidden{}} ->
         {:noreply,
-         put_flash(socket, :error, gettext("You do not have permission to delete this member"))}
+         socket
+         |> put_flash(:error, gettext("You do not have permission to delete this member"))
+         |> assign(:show_delete_modal, false)}
 
       {:error, error} ->
         Logger.warning("Member delete failed: member_id=#{member.id} error=#{inspect(error)}")
-        {:noreply, put_flash(socket, :error, format_destroy_error(error))}
+        {:noreply,
+         socket
+         |> put_flash(:error, format_destroy_error(error))
+         |> assign(:show_delete_modal, false)}
     end
   end