improve notification accessibility

- use role="status" for info messages, role="alert" for errors
- add aria-live attribute (polite for info, assertive for errors)
- move phx-click to close button for better keyboard navigation
- add close buttons to shop flash messages
- add aria-hidden to decorative icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-08 07:53:17 +00:00
parent 8af5cbf41e
commit 5e03dccb69
3 changed files with 62 additions and 19 deletions

View File

@@ -45,8 +45,8 @@ defmodule BerrypodWeb.CoreComponents do
<div
:if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
id={@id}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert"
role={if(@kind == :error, do: "alert", else: "status")}
aria-live={if(@kind == :error, do: "assertive", else: "polite")}
class="admin-banner"
{@rest}
>
@@ -62,7 +62,12 @@ defmodule BerrypodWeb.CoreComponents do
<p>{msg}</p>
</div>
<div class="admin-alert-spacer" />
<button type="button" class="admin-alert-close" aria-label={gettext("close")}>
<button
type="button"
class="admin-alert-close"
aria-label={gettext("close")}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
>
<.icon name="hero-x-mark" class="size-5" />
</button>
</div>