better alert & avatar a11y

Author: tylerbarker

lib/petal_components/alert.ex

@@ -1,5 +1,6 @@
 defmodule PetalComponents.Alert do
   use Phoenix.Component
+  alias PetalComponents.Helpers
 
   attr(:color, :string,
     default: "info",
@@ -23,10 +24,18 @@ defmodule PetalComponents.Alert do
     assigns =
       assigns
       |> assign(:classes, alert_classes(assigns))
+      |> assign(:heading_id, Helpers.uniq_id(assigns.heading || "alert-heading"))
+      |> assign(:label_id, Helpers.uniq_id(assigns.label || "alert-label"))
 
     ~H"""
     <%= unless label_blank?(@label, @inner_block) do %>
-      <div {@rest} class={@classes}>
+      <div
+        {@rest}
+        class={@classes}
+        role="dialog"
+        aria-labelledby={(@heading && @heading_id) || @label_id}
+        aria-describedby={@label_id}
+      >
         <%= if @with_icon do %>
           <div class="pc-alert__icon-container">
             <.get_icon color={@color} />
@@ -37,12 +46,12 @@ defmodule PetalComponents.Alert do
           <div class="pc-alert__inner">
             <div>
               <%= if @heading do %>
-                <div class="pc-alert__heading">
+                <h2 id={@heading_id} class="pc-alert__heading">
                   <%= @heading %>
-                </div>
+                </h2>
               <% end %>
 
-              <div class="pc-alert__label">
+              <div id={@label_id} class="pc-alert__label">
                 <%= render_slot(@inner_block) || @label %>
               </div>
             </div>

lib/petal_components/avatar.ex

@@ -19,6 +19,8 @@ defmodule PetalComponents.Avatar do
     <%= if src_blank?(@src) && !@name do %>
       <div
         {@rest}
+        role="img"
+        aria-label="user avatar"
         class={[
           "pc-avatar--with-placeholder-icon",
           "pc-avatar--#{@size}",
@@ -32,6 +34,8 @@ defmodule PetalComponents.Avatar do
         <div
           {@rest}
           style={maybe_generate_random_color(@random_color, @name)}
+          role="img"
+          aria-label="user avatar"
           class={[
             "pc-avatar--with-placeholder-initials",
             "pc-avatar--#{@size}",

lib/petal_components/helpers.ex

@@ -3,6 +3,34 @@ defmodule PetalComponents.Helpers do
   For any helper functions used across multiple components. Ideally we keep this empty - components should be copy-pastable.
   """
 
+  @doc """
+  Generates a unique HTML ID based on the given string.
+
+  ## Parameters
+
+    - string: The input string (e.g., heading or label)
+    - prefix: An optional prefix for the ID (default: "c")
+
+  ## Examples
+
+      iex> PetalComponents.Helpers.uniq_id("My Heading")
+      "c-my-heading-1234"
+
+      iex> PetalComponents.Helpers.uniq_id("My Label", "custom")
+      "custom-my-label-5678"
+  """
+  def uniq_id(string, prefix \\ "c") do
+    slug =
+      string
+      |> String.downcase()
+      |> String.replace(~r/[^\w-]+/, "-")
+      # Limit slug length
+      |> String.slice(0, 20)
+
+    unique = System.unique_integer([:positive]) |> Integer.to_string(36)
+    "#{prefix}-#{slug}-#{unique}"
+  end
+
   @doc """
   Builds a class string from a given input list by joining them together
 

lib/petal_components_web/a11y_live.ex

@@ -89,6 +89,8 @@ defmodule PetalComponentsWeb.A11yLive do
       </.accordion>
 
       <.alert with_icon color="info" label="Info alert" />
+      <.alert with_icon color="info" label="Info alert with heading" heading="Info" />
+      <.alert with_icon color="danger" label="Error alert" />
 
       <.avatar src={@avatar_src} />