Fix labels in color selection

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

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

@@ -45,12 +45,12 @@
   </div>
 
   <div class="row">
-    <div class="small-12 medium-6 large-3 column">
+    <div class="small-12 medium-6 large-3 column background-color-inputs">
-      <%= f.label :background_color, nil, for: "background_color_input" %>
+      <%= f.label :background_color, nil, for: "background_color_input", id: "background_color_label" %>
       <p class="help-text"><%= t("admin.shared.color_help") %></p>
       <div class="row collapse">
         <div class="small-12 medium-6 column">
-          <%= f.text_field :background_color, label: false, type: :color %>
+          <%= f.text_field :background_color, label: false, type: :color, "aria-labelledby": "background_color_label" %>
         </div>
         <div class="small-12 medium-6 column">
           <%= f.text_field :background_color, label: false, id: "background_color_input" %>
@@ -58,12 +58,12 @@
       </div>
     </div>
 
-    <div class="small-12 medium-6 large-3 column end">
+    <div class="small-12 medium-6 large-3 column end font-color-inputs">
-      <%= f.label :font_color, nil, for: "font_color_input" %>
+      <%= f.label :font_color, nil, for: "font_color_input", id: "font_color_label" %>
       <p class="help-text"><%= t("admin.shared.color_help") %></p>
       <div class="row collapse">
         <div class="small-12 medium-6 column">
-          <%= f.text_field :font_color, label: false, type: :color %>
+          <%= f.text_field :font_color, label: false, type: :color, "aria-labelledby": "font_color_label" %>
         </div>
         <div class="small-12 medium-6 column">
           <%= f.text_field :font_color, label: false, id: "font_color_input" %>

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

@@ -24,14 +24,14 @@
     <%= f.text_area :geojson, rows: "10", hint: t("admin.geozones.geozone.geojson_help") %>
   </div>
 
-  <div class="small-12 large-3 column">
+  <div class="small-12 large-3 column color-inputs">
-    <%= f.label :color, nil, for: "color_input", id: "color_input_label" %>
+    <%= f.label :color, nil, for: "color_input", id: "color_label" %>
     <p class="help-text">
       <%= t("admin.geozones.geozone.color_help", format_help: t("admin.shared.color_help")) %>
     </p>
     <div class="row collapse">
       <div class="small-12 medium-6 column">
-        <%= f.text_field :color, label: false, type: :color %>
+        <%= f.text_field :color, label: false, type: :color, "aria-labelledby": "color_label" %>
       </div>
       <div class="small-12 medium-6 column">
         <%= f.text_field :color, label: false, id: "color_input" %>

app/components/admin/legislation/processes/form_component.html.erb

@@ -121,12 +121,12 @@
       <h3><%= t("admin.legislation.processes.form.banner_title") %></h3>
     </div>
 
-    <div class="small-6 large-3 column">
+    <div class="small-6 large-3 column background-color-inputs">
-      <%= f.label :background_color, nil, for: "background_color_input" %>
+      <%= f.label :background_color, nil, for: "background_color_input", id: "background_color_label" %>
       <p class="help-text"><%= t("admin.shared.color_help") %></p>
       <div class="row collapse">
         <div class="small-12 medium-6 column">
-          <%= f.text_field :background_color, label: false, type: :color %>
+          <%= f.text_field :background_color, label: false, type: :color, "aria-labelledby": "background_color_label" %>
         </div>
         <div class="small-12 medium-6 column">
           <%= f.text_field :background_color, label: false, id: "background_color_input" %>
@@ -134,12 +134,12 @@
       </div>
     </div>
 
-    <div class="small-6 large-3 column end">
+    <div class="small-6 large-3 column end font-color-inputs">
-      <%= f.label :font_color, nil, for: "font_color_input" %>
+      <%= f.label :font_color, nil, for: "font_color_input", id: "font_color_label" %>
       <p class="help-text"><%= t("admin.shared.color_help") %></p>
       <div class="row collapse">
         <div class="small-12 medium-6 column">
-          <%= f.text_field :font_color, label: false, type: :color %>
+          <%= f.text_field :font_color, label: false, type: :color, "aria-labelledby": "font_color_label" %>
         </div>
         <div class="small-12 medium-6 column">
           <%= f.text_field :font_color, label: false, id: "font_color_input" %>

spec/components/admin/banners/form_component_spec.rb

@@ -0,0 +1,38 @@
+require "rails_helper"
+
+describe Admin::Banners::FormComponent do
+  let(:banner) { build(:banner) }
+  let(:component) { Admin::Banners::FormComponent.new(banner) }
+
+  describe "background color fields" do
+    it "renders two inputs sharing the same label" do
+      render_inline component
+
+      page.find(".background-color-inputs") do |color_inputs|
+        expect(color_inputs).to have_css "input", count: 2
+        expect(color_inputs).to have_css "label", count: 1
+
+        expect(color_inputs).to have_css "label#background_color_label[for=background_color_input]"
+        expect(color_inputs.all("input")[0][:"aria-labelledby"]).to eq "background_color_label"
+        expect(color_inputs.all("input")[0][:id]).not_to eq "background_color_input"
+        expect(color_inputs.all("input")[1][:id]).to eq "background_color_input"
+      end
+    end
+  end
+
+  describe "font color fields" do
+    it "renders two inputs sharing the same label" do
+      render_inline component
+
+      page.find(".font-color-inputs") do |color_inputs|
+        expect(color_inputs).to have_css "input", count: 2
+        expect(color_inputs).to have_css "label", count: 1
+
+        expect(color_inputs).to have_css "label#font_color_label[for=font_color_input]"
+        expect(color_inputs.all("input")[0][:"aria-labelledby"]).to eq "font_color_label"
+        expect(color_inputs.all("input")[0][:id]).not_to eq "font_color_input"
+        expect(color_inputs.all("input")[1][:id]).to eq "font_color_input"
+      end
+    end
+  end
+end

spec/components/admin/geozones/form_component_spec.rb

@@ -0,0 +1,22 @@
+require "rails_helper"
+
+describe Admin::Geozones::FormComponent do
+  let(:geozone) { build(:geozone) }
+  let(:component) { Admin::Geozones::FormComponent.new(geozone) }
+
+  describe "color fields" do
+    it "renders two inputs sharing the same label" do
+      render_inline component
+
+      page.find(".color-inputs") do |color_inputs|
+        expect(color_inputs).to have_css "input", count: 2
+        expect(color_inputs).to have_css "label", count: 1
+
+        expect(color_inputs).to have_css "label#color_label[for=color_input]"
+        expect(color_inputs.all("input")[0][:"aria-labelledby"]).to eq "color_label"
+        expect(color_inputs.all("input")[0][:id]).not_to eq "color_input"
+        expect(color_inputs.all("input")[1][:id]).to eq "color_input"
+      end
+    end
+  end
+end

spec/components/admin/legislation/processes/form_component_spec.rb

@@ -0,0 +1,38 @@
+require "rails_helper"
+
+describe Admin::Legislation::Processes::FormComponent, :admin do
+  let(:process) { build(:legislation_process) }
+  let(:component) { Admin::Legislation::Processes::FormComponent.new(process) }
+
+  describe "background color fields" do
+    it "renders two inputs sharing the same label" do
+      render_inline component
+
+      page.find(".background-color-inputs") do |color_inputs|
+        expect(color_inputs).to have_css "input", count: 2
+        expect(color_inputs).to have_css "label", count: 1
+
+        expect(color_inputs).to have_css "label#background_color_label[for=background_color_input]"
+        expect(color_inputs.all("input")[0][:"aria-labelledby"]).to eq "background_color_label"
+        expect(color_inputs.all("input")[0][:id]).not_to eq "background_color_input"
+        expect(color_inputs.all("input")[1][:id]).to eq "background_color_input"
+      end
+    end
+  end
+
+  describe "font color fields" do
+    it "renders two inputs sharing the same label" do
+      render_inline component
+
+      page.find(".font-color-inputs") do |color_inputs|
+        expect(color_inputs).to have_css "input", count: 2
+        expect(color_inputs).to have_css "label", count: 1
+
+        expect(color_inputs).to have_css "label#font_color_label[for=font_color_input]"
+        expect(color_inputs.all("input")[0][:"aria-labelledby"]).to eq "font_color_label"
+        expect(color_inputs.all("input")[0][:id]).not_to eq "font_color_input"
+        expect(color_inputs.all("input")[1][:id]).to eq "font_color_input"
+      end
+    end
+  end
+end