diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css index 3b75fea..f68b0d2 100644 --- a/assets/css/shop/components.css +++ b/assets/css/shop/components.css @@ -2491,6 +2491,22 @@ color: hsl(0 70% 50%); } + .shop-flash-close { + margin-left: auto; + padding: 0.25rem; + cursor: pointer; + opacity: 0.5; + transition: opacity 150ms ease; + border-radius: 0.25rem; + + &:hover { opacity: 0.8; } + &:focus-visible { + opacity: 1; + outline: 2px solid var(--t-accent); + outline-offset: 2px; + } + } + /* Transition classes for JS.hide flash dismiss */ .fade-out { transition: opacity 200ms ease-out; } .fade-out-from { opacity: 1; } diff --git a/lib/berrypod_web/components/core_components.ex b/lib/berrypod_web/components/core_components.ex index b8ae21b..af73dde 100644 --- a/lib/berrypod_web/components/core_components.ex +++ b/lib/berrypod_web/components/core_components.ex @@ -45,8 +45,8 @@ defmodule BerrypodWeb.CoreComponents do
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

{msg}

-
diff --git a/lib/berrypod_web/components/shop_components/content.ex b/lib/berrypod_web/components/shop_components/content.ex index 20453b5..4728a1a 100644 --- a/lib/berrypod_web/components/shop_components/content.ex +++ b/lib/berrypod_web/components/shop_components/content.ex @@ -1132,19 +1132,13 @@ defmodule BerrypodWeb.ShopComponents.Content do def shop_flash_group(assigns) do ~H""" -
+
<%= if msg = Phoenix.Flash.get(@flash, :info) do %> <% end %> <%= if msg = Phoenix.Flash.get(@flash, :error) do %> @@ -1165,13 +1176,7 @@ defmodule BerrypodWeb.ShopComponents.Content do id="shop-flash-error" class="shop-flash shop-flash--error" role="alert" - phx-click={ - Phoenix.LiveView.JS.push("lv:clear-flash", value: %{key: :error}) - |> Phoenix.LiveView.JS.hide( - to: "#shop-flash-error", - transition: {"fade-out", "fade-out-from", "fade-out-to"} - ) - } + aria-live="assertive" >

{msg}

+
<% end %>