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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user