feat: consistent and accessible modal on delete
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
carla 2026-02-26 11:17:21 +01:00
parent 2922a4d1ee
commit e422e5f4ef
10 changed files with 424 additions and 102 deletions

View file

@ -35,7 +35,8 @@ defmodule MvWeb.RoleLive.Show do
socket
|> assign(:page_title, gettext("Show Role"))
|> assign(:role, role)
|> assign(:user_count, user_count)}
|> assign(:user_count, user_count)
|> assign(:show_delete_modal, false)}
{:error, %Ash.Error.Invalid{errors: [%Ash.Error.Query.NotFound{} | _]}} ->
{:ok,
@ -84,35 +85,45 @@ defmodule MvWeb.RoleLive.Show do
error_message = format_error(error)
{:noreply,
put_flash(
socket,
socket
|> put_flash(
:error,
gettext("Failed to delete role: %{error}", error: error_message)
)}
)
|> assign(:show_delete_modal, false)}
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
defp handle_delete_role(role, socket) do
if role.is_system_role do
{:noreply,
put_flash(
socket,
:error,
gettext("System roles cannot be deleted.")
)}
socket
|> put_flash(:error, gettext("System roles cannot be deleted."))
|> assign(:show_delete_modal, false)}
else
user_count = recalculate_user_count(role, socket.assigns.current_user)
if user_count > 0 do
{:noreply,
put_flash(
socket,
socket
|> put_flash(
:error,
gettext(
"Cannot delete role. %{count} user(s) are still assigned to this role. Please assign them to another role first.",
count: user_count
)
)}
)
|> assign(:show_delete_modal, false)}
else
perform_role_deletion(role, socket)
end
@ -225,13 +236,7 @@ defmodule MvWeb.RoleLive.Show do
</p>
<.button
variant="danger"
phx-click={JS.push("delete", value: %{id: @role.id})}
data-confirm={
gettext(
"Are you sure you want to delete the role %{name}? This action cannot be undone.",
name: @role.name
)
}
phx-click="open_delete_modal"
data-testid="role-delete"
aria-label={gettext("Delete role %{name}", name: @role.name)}
>
@ -241,6 +246,46 @@ defmodule MvWeb.RoleLive.Show do
</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">
<.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 %>
</Layouts.app>
"""
end