Guillem Arias 04422f36b3 a11y(goals/card): scope link accessible name to title + status summary ...

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.

2026-05-11 20:24:26 +02:00

3.1 KiB

Raw Blame History

View Raw