45c74681c4
People using screen readers might have a hard time knowing what a progressbar is about unless we provide a label for it. Axe was reporting failures like: ``` aria-progressbar-name: ARIA progressbar nodes must have an accessible name (serious) https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI The following 1 node violate this rule: Selector: .progress HTML: <div class="progress" role="progressbar" tabindex="0" aria-valuenow="0.0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-meter" style="width: 0.0%"></div> </div> Fix any of the following: - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute ``` Note that, in the case of the ballot progressbar, it's easier to use `aria-labelledby`, while in other place it's easier to use `aria-label`, so we using the easier solution in each scenario.
23 lines
712 B
Plaintext
23 lines
712 B
Plaintext
<section class="progress-bars">
|
|
<h5><%= t("milestones.index.progress") %></h5>
|
|
|
|
<div class="margin">
|
|
<%= progress_tag_for(primary_progress_bar, label: t("milestones.index.progress")) %>
|
|
</div>
|
|
|
|
<% if secondary_progress_bars.any? %>
|
|
<div class="milestone-progress">
|
|
<% secondary_progress_bars.each do |progress_bar| %>
|
|
<div class="row margin-bottom">
|
|
<div class="small-12 medium-6 large-4 column">
|
|
<%= progress_bar.title %>
|
|
</div>
|
|
<div class="small-12 medium-6 large-8 column end">
|
|
<%= progress_tag_for(progress_bar, label: progress_bar.title) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</section>
|