From 04422f36b31106343ea5fb34fc8df445fadfbd50 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 20:24:26 +0200
Subject: [PATCH] a11y(goals/card): scope link accessible name to title +
 status summary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Whole card was wrapped in <%= link_to ... %>, so screen readers
concatenated every nested text node into one accessible name (~60 words
on a typical card: avatar initial + name + status pill + percent +
balance + target + pace + accounts + footer).

- Outer wrapper now <div> carrying the filter-target + goal-name +
  goal-status data attrs.
- Inner <a> wraps only the goal name. aria-label = "<name>, <status>,
  <percent>% of <target>" — concise SR sentence.
- `before:absolute before:inset-0` makes the inner link's hit area span
  the whole card so sighted users keep the existing click affordance.
- Ring SVG + percent overlay marked aria-hidden (decorative — same info
  already in the aria-label).
- New locale key goals.goal_card.aria_progress.
---
 app/components/goals/card_component.html.erb | 25 +++++++++++---------
 app/components/goals/card_component.rb       | 11 +++++++++
 config/locales/views/goals/en.yml            |  1 +
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/components/goals/card_component.html.erb b/app/components/goals/card_component.html.erb
index db0bdce76..ea88de9ea 100644
--- a/app/components/goals/card_component.html.erb
+++ b/app/components/goals/card_component.html.erb
@@ -1,22 +1,25 @@
-<%= link_to goal_path(goal),
-            class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6 #{"opacity-75" if goal.paused? || goal.archived?}",
-            data: {
-              goals_filter_target: "card",
-              goal_name: goal.name,
-              goal_status: goal.display_status
-            } do %>
+<div class="group relative bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6 <%= "opacity-75" if goal.paused? || goal.archived? %>"
+     data-goals-filter-target="card"
+     data-goal-name="<%= goal.name %>"
+     data-goal-status="<%= goal.display_status %>">
   <div class="flex items-start gap-3">
     <%= render Goals::AvatarComponent.new(goal: goal, size: "lg") %>
     <div class="min-w-0 flex-1">
       <div class="flex items-center gap-2 mb-0.5">
-        <p class="text-sm font-medium text-primary truncate"><%= goal.name %></p>
+        <p class="text-sm font-medium text-primary truncate">
+          <a href="<%= goal_path(goal) %>"
+             aria-label="<%= aria_label %>"
+             class="before:absolute before:inset-0 before:rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100">
+            <%= goal.name %>
+          </a>
+        </p>
         <%= render Goals::StatusPillComponent.new(goal: goal) %>
       </div>
       <p class="text-[11px] text-subdued truncate"><%= secondary_line %></p>
     </div>
 
     <div class="shrink-0 relative" style="width: <%= Goals::CardComponent::RING_SIZE %>px; height: <%= Goals::CardComponent::RING_SIZE %>px;">
-      <svg width="<%= Goals::CardComponent::RING_SIZE %>" height="<%= Goals::CardComponent::RING_SIZE %>" viewBox="0 0 <%= Goals::CardComponent::RING_SIZE %> <%= Goals::CardComponent::RING_SIZE %>">
+      <svg width="<%= Goals::CardComponent::RING_SIZE %>" height="<%= Goals::CardComponent::RING_SIZE %>" viewBox="0 0 <%= Goals::CardComponent::RING_SIZE %> <%= Goals::CardComponent::RING_SIZE %>" aria-hidden="true">
         <circle cx="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
                 cy="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
                 r="<%= ring_radius %>"
@@ -34,7 +37,7 @@
                 stroke-dashoffset="<%= ring_offset %>"
                 transform="rotate(-90 <%= Goals::CardComponent::RING_SIZE / 2.0 %> <%= Goals::CardComponent::RING_SIZE / 2.0 %>)" />
       </svg>
-      <div class="absolute inset-0 flex items-center justify-center text-[11px] font-medium text-primary tabular-nums">
+      <div class="absolute inset-0 flex items-center justify-center text-[11px] font-medium text-primary tabular-nums" aria-hidden="true">
         <%= progress_percent %>%
       </div>
     </div>
@@ -57,4 +60,4 @@
     </div>
     <span class="text-[11px] text-subdued tabular-nums"><%= footer_line %></span>
   </div>
-<% end %>
+</div>
diff --git a/app/components/goals/card_component.rb b/app/components/goals/card_component.rb
index 6bc735f2b..e7676c517 100644
--- a/app/components/goals/card_component.rb
+++ b/app/components/goals/card_component.rb
@@ -29,6 +29,17 @@ class Goals::CardComponent < ApplicationComponent
     I18n.t("goals.goal_card.accounts", count: linked_accounts.size)
   end
 
+  # Single screen-reader sentence for the card's title <a> aria-label.
+  # Without this, the whole-card link would inherit every nested text node
+  # as its accessible name (>15 strings on a typical card).
+  def aria_label
+    status_text = I18n.t("goals.status.#{goal.display_status}")
+    progress_text = I18n.t("goals.goal_card.aria_progress",
+                           percent: progress_percent,
+                           target: goal.target_amount_money.format)
+    [ goal.name, status_text, progress_text ].join(", ")
+  end
+
   def secondary_line
     if goal.completed?
       I18n.t("goals.goal_card.completed")
diff --git a/config/locales/views/goals/en.yml b/config/locales/views/goals/en.yml
index bb9cf5721..529d56d51 100644
--- a/config/locales/views/goals/en.yml
+++ b/config/locales/views/goals/en.yml
@@ -194,6 +194,7 @@ en:
       no_accounts: No linked accounts
       n_accounts: "%{first} +%{count}"
       left: left
+      aria_progress: "%{percent}% of %{target}"
       accounts:
         one: 1 account
         other: "%{count} accounts"