Fix labels in progress bar percentage selection

We were using the same label for two elements, but the label was only
assigned to one of them.

app/components/admin/progress_bars/form_component.html.erb

@@ -16,12 +16,13 @@
     <% end %>
   </div>
 
-  <div class="row">
+  <div class="row percentage-inputs">
     <div class="small-12 medium-6 large-2 column">
-      <%= 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) %>
     </div>
 

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