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.
37 lines
1.3 KiB
Ruby
37 lines
1.3 KiB
Ruby
require "rails_helper"
|
|
|
|
describe Milestones::ProgressBarsComponent do
|
|
let(:milestoneable) { create(:legislation_process) }
|
|
|
|
it "is not rendered without a main progress bar" do
|
|
create(:progress_bar, :secondary, progressable: milestoneable, title: "Defeat Evil Lords")
|
|
|
|
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
|
|
|
|
expect(page).not_to be_rendered
|
|
end
|
|
|
|
it "renders a main progress bar" do
|
|
create(:progress_bar, progressable: milestoneable)
|
|
|
|
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
|
|
|
|
expect(page).to have_content "Progress"
|
|
expect(page).to have_css "[role=progressbar]", count: 1
|
|
expect(page).to have_css "[role=progressbar][aria-label='Progress']"
|
|
end
|
|
|
|
it "renders both main and secondary progress bars" do
|
|
create(:progress_bar, progressable: milestoneable)
|
|
create(:progress_bar, :secondary, progressable: milestoneable, title: "Build laboratory")
|
|
|
|
render_inline Milestones::ProgressBarsComponent.new(milestoneable)
|
|
|
|
expect(page).to have_content "Progress"
|
|
expect(page).to have_content "Build laboratory"
|
|
expect(page).to have_css "[role=progressbar]", count: 2
|
|
expect(page).to have_css "[role=progressbar][aria-label='Progress']"
|
|
expect(page).to have_css "[role=progressbar][aria-label='Build laboratory']"
|
|
end
|
|
end
|