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.
38 lines
1017 B
Ruby
38 lines
1017 B
Ruby
class Milestones::ProgressBarsComponent < ApplicationComponent
|
|
attr_reader :milestoneable
|
|
|
|
def initialize(milestoneable)
|
|
@milestoneable = milestoneable
|
|
end
|
|
|
|
def render?
|
|
primary_progress_bar
|
|
end
|
|
|
|
private
|
|
|
|
def primary_progress_bar
|
|
milestoneable.primary_progress_bar
|
|
end
|
|
|
|
def secondary_progress_bars
|
|
milestoneable.secondary_progress_bars
|
|
end
|
|
|
|
def progress_tag_for(progress_bar, label:)
|
|
text = number_to_percentage(progress_bar.percentage, precision: 0)
|
|
|
|
tag.div class: "progress",
|
|
role: "progressbar",
|
|
"aria-label": label,
|
|
"aria-valuenow": progress_bar.percentage,
|
|
"aria-valuetext": "#{progress_bar.percentage}%",
|
|
"aria-valuemax": ProgressBar::RANGE.max,
|
|
"aria-valuemin": "0",
|
|
tabindex: "0" do
|
|
tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
|
|
tag.p(text, class: "progress-meter-text")
|
|
end
|
|
end
|
|
end
|