diff --git a/app/components/admin/progress_bars/form_component.html.erb b/app/components/admin/progress_bars/form_component.html.erb index f86e107d9..ea73f5f91 100644 --- a/app/components/admin/progress_bars/form_component.html.erb +++ b/app/components/admin/progress_bars/form_component.html.erb @@ -16,12 +16,13 @@ <% end %> -
+
- <%= f.label :percentage %> + <%= f.label :percentage, nil, id: "percentage_label" %> <%= f.text_field :percentage, { type: :range, id: "percentage_range", label: false, + "aria-labelledby": "percentage_label", class: "column" }.merge(progress_options) %>
diff --git a/spec/components/admin/progress_bars/form_component_spec.rb b/spec/components/admin/progress_bars/form_component_spec.rb new file mode 100644 index 000000000..5dabdfbf9 --- /dev/null +++ b/spec/components/admin/progress_bars/form_component_spec.rb @@ -0,0 +1,22 @@ +require "rails_helper" + +describe Admin::ProgressBars::FormComponent do + let(:progress_bar) { build(:progress_bar) } + let(:component) { Admin::ProgressBars::FormComponent.new(progress_bar) } + + describe "percentage fields" do + it "renders two inputs sharing the same label" do + render_inline component + + page.find(".percentage-inputs") do |percentage_inputs| + expect(percentage_inputs).to have_css "input:not([type=submit])", count: 2 + expect(percentage_inputs).to have_css "label", count: 1 + + expect(percentage_inputs).to have_css "label#percentage_label[for=progress_bar_percentage]" + expect(percentage_inputs.all("input")[0][:"aria-labelledby"]).to eq "percentage_label" + expect(percentage_inputs.all("input")[0][:id]).not_to eq "percentage_input" + expect(percentage_inputs.all("input")[1][:id]).to eq "progress_bar_percentage" + end + end + end +end