mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +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.
14 lines
744 B
Plaintext
14 lines
744 B
Plaintext
<span class="inline-flex items-center" aria-hidden="true">
|
|
<% shown.each_with_index do |account, i| %>
|
|
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-inverse text-[9px] font-semibold ring-2 ring-container"
|
|
style="background-color: <%= Savings::GoalAvatarComponent.color_for(account.name) %>; <%= "margin-left: -6px;" if i > 0 %>"
|
|
title="<%= account.name %>">
|
|
<%= initial_for(account) %>
|
|
</span>
|
|
<% end %>
|
|
<% if extra_count > 0 %>
|
|
<span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-surface-inset text-secondary text-[9px] font-semibold ring-2 ring-container"
|
|
style="margin-left: -6px;">+<%= extra_count %></span>
|
|
<% end %>
|
|
</span>
|