mirror of
https://github.com/we-promise/sure.git
synced 2026-06-01 16:59:03 +00:00
c622dabd20
- Projection chart SVG: role=img + <title> + <desc> wired through new
ariaLabelValue / ariaDescriptionValue Stimulus values. Show.html.erb
passes a localized chart label and a strip_tags'd projection summary.
- Progress ring container: role=progressbar + aria-valuenow/min/max +
aria-label so screen readers announce "Goal 27% complete. $13,250 of
$50,000 saved." instead of four disjoint spans.
- Funding-account checkboxes (stepper step 1): explicit per-account id
("savings_goal_account_ids_<id>") so each row has a unique DOM id;
duplicate-id HTML violation gone.
- show.html.erb: <h3> -> <h2> at six section headings (celebration,
no-target-date, projection, contributions, funding accounts, notes)
so the heading hierarchy is h1 -> h2, not h1 -> h3.
- goal_avatar + account_stack components: aria-hidden=true on the
decorative wrappers; the textual goal/account name beside them is
always read separately so the SR no longer prefixes every entry with
the avatar initial.
- New locale keys: savings_goals.show.ring.aria_label and
savings_goals.show.projection.aria_label.
21 lines
1.2 KiB
Plaintext
21 lines
1.2 KiB
Plaintext
<div data-controller="donut-chart"
|
|
data-donut-chart-segments-value="<%= goal.to_donut_segments_json.to_json %>"
|
|
data-donut-chart-segment-height-value="6"
|
|
role="progressbar"
|
|
aria-valuenow="<%= percent %>"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-label="<%= t("savings_goals.show.ring.aria_label", percent: percent, amount: amount_label, target: target_label) %>"
|
|
class="relative mx-auto"
|
|
style="width: <%= size %>px; height: <%= size %>px;">
|
|
<div data-donut-chart-target="chartContainer" class="absolute inset-0 pointer-events-none"></div>
|
|
<div data-donut-chart-target="contentContainer" class="flex items-center justify-center h-full">
|
|
<div data-donut-chart-target="defaultContent" class="flex flex-col items-center text-center">
|
|
<span class="text-secondary text-xs mb-1"><%= t("savings_goals.show.ring.saved") %></span>
|
|
<span class="text-3xl font-medium tabular-nums privacy-sensitive <%= percent_text_class %>"><%= percent %>%</span>
|
|
<span class="text-xs text-subdued tabular-nums mt-1"><%= amount_label %></span>
|
|
<span class="text-xs text-subdued tabular-nums">of <%= target_label %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|