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 %>
+
"
+ data-goals-filter-target="card"
+ data-goal-name="<%= goal.name %>"
+ data-goal-status="<%= goal.display_status %>">
<%= render Goals::AvatarComponent.new(goal: goal, size: "lg") %>
-
<%= goal.name %>
+
+
+ <%= goal.name %>
+
+
<%= render Goals::StatusPillComponent.new(goal: goal) %>
<%= secondary_line %>
-
<%= footer_line %>
-<% end %>
+
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 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"