Merge branch 'main' into feat/savings-goals

Signed-off-by: Guillem Arias Fauste <accounts@gariasf.com>

app/components/DS/alert.html.erb

@@ -1,15 +1,37 @@
-<div class="<%= container_classes %>">
-  <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0 mt-0.5" %>
+<%= tag.div(class: container_classes, role: aria_role, "aria-labelledby": (aria_role && title.present?) ? title_id : nil) do %>
+  <% if title.present? %>
+    <div class="flex items-center gap-3">
+      <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0 -mt-0.5" %>
+      <p id="<%= title_id %>" class="text-sm font-semibold text-primary flex-1 leading-5">
+        <span class="sr-only"><%= variant_label %>:</span>
+        <%= title %>
+      </p>
+    </div>
 
-  <div class="flex-1 text-sm text-primary space-y-1">
-    <% if title.present? %>
-      <p class="font-medium text-primary"><%= title %></p>
+    <% if content.present? || message.present? %>
+      <div class="text-sm text-primary mt-2 pl-7 space-y-1">
+        <% if content.present? %>
+          <%= content %>
+        <% else %>
+          <%= message %>
+        <% end %>
+      </div>
     <% end %>
-
-    <% if content.present? %>
-      <%= content %>
-    <% elsif message.present? %>
-      <%= message %>
-    <% end %>
-  </div>
-</div>
+  <% elsif content.present? %>
+    <div class="flex items-start gap-3">
+      <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0" %>
+      <div class="flex-1 text-sm text-primary space-y-1">
+        <span class="sr-only"><%= variant_label %>:</span>
+        <%= content %>
+      </div>
+    </div>
+  <% elsif message.present? %>
+    <div class="flex items-center gap-3">
+      <%= helpers.icon icon_name, size: "sm", color: icon_color, class: "shrink-0 -mt-0.5" %>
+      <p class="text-sm text-primary flex-1 leading-5">
+        <span class="sr-only"><%= variant_label %>:</span>
+        <%= message %>
+      </p>
+    </div>
+  <% end %>
+<% end %>

app/components/DS/alert.rb

@@ -1,22 +1,34 @@
 class DS::Alert < DesignSystemComponent
   VARIANTS = %i[info success warning error destructive].freeze
+  LIVE_MODES = %i[none status alert].freeze
 
-  def initialize(message: nil, title: nil, variant: :info)
+  def initialize(message: nil, title: nil, variant: :info, live: :none)
     @message = message
     @title = title
     @variant = normalize_variant(variant)
+    @live = normalize_live(live)
   end
 
   private
-    attr_reader :message, :title, :variant
+    attr_reader :message, :title, :variant, :live
 
     def normalize_variant(raw)
       sym = raw.respond_to?(:to_sym) ? raw.to_sym : nil
       VARIANTS.include?(sym) ? sym : :info
     end
 
+    def normalize_live(raw)
+      sym = raw.respond_to?(:to_sym) ? raw.to_sym : nil
+      case sym
+      when :polite then :status
+      when :assertive then :alert
+      when *LIVE_MODES then sym
+      else :none
+      end
+    end
+
     def container_classes
-      base_classes = "flex items-start gap-3 p-4 rounded-lg border"
+      base_classes = "p-4 rounded-lg border"
 
       variant_classes = case variant
       when :info
@@ -57,4 +69,19 @@ class DS::Alert < DesignSystemComponent
         "info"
       end
     end
+
+    def aria_role
+      case live
+      when :status then "status"
+      when :alert then "alert"
+      end
+    end
+
+    def variant_label
+      I18n.t("ds.alert.variants.#{variant}")
+    end
+
+    def title_id
+      @title_id ||= "DS-alert-title-#{SecureRandom.hex(4)}"
+    end
 end

app/components/DS/dialog.rb

@@ -133,8 +133,8 @@ class DS::Dialog < DesignSystemComponent
       variant: "icon",
       class: classes,
       icon: "x",
-      title: I18n.t("common.close"),
-      aria_label: I18n.t("common.close"),
+      title: I18n.t("ds.dialog.close"),
+      aria_label: I18n.t("ds.dialog.close"),
       data: { action: "DS--dialog#close" }
     )
   end