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.
15 lines
565 B
Plaintext
15 lines
565 B
Plaintext
<p id="total_amount" class="total-amount">
|
|
<%= sanitize(ballot.amount_progress(heading)) %>
|
|
</p>
|
|
|
|
<div class="progress" role="progressbar" tabindex="0" aria-labelledby="total_amount"
|
|
aria-valuenow="<%= ballot.percentage_spent(heading) %>" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-meter"
|
|
style="width: <%= ballot.percentage_spent(heading) %>%">
|
|
</div>
|
|
</div>
|
|
|
|
<p id="amount_available" class="amount-available" style="width: <%= ballot.percentage_spent(heading) %>%">
|
|
<%= sanitize(ballot.amount_available_info(heading)) %>
|
|
</p>
|