Merge pull request #3528 from citizensadvice/fix/radio-button-group-e…

…rrors Fix/radio button group errors
citizensadvice · Jan 22, 2025 · f54d532 · f54d532
2 parents 11bb5f1 + df2eb85
commit f54d532
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,9 @@
   initNavigation();
   ```
 
+**Fix**
+- Improves screen reader experience when interacting with checkbox and radio groups in an error state
+
 ## v6.3.0
 
 ### 5 December 2024

diff --git a/engine/app/components/citizens_advice_components/form_group.html.erb b/engine/app/components/citizens_advice_components/form_group.html.erb
@@ -15,11 +15,11 @@
       <p class="cads-form-field__hint"><%= hint %></p>
     <% end %>
     <% if error? %>
-      <p class="cads-form-field__error-message"><%= error_message %></p>
+      <p class="cads-form-field__error-message" <% if error? %> id="<%= error_id %>"<% end %>><%= error_message %></p>
     <% end %>
     <% inputs.each_with_index do |input, index| %>
       <div class="cads-form-group__item">
-        <%= tag.input(class: "cads-form-group__input", **input.attributes(name, id, index)) %>
+        <%= tag.input(class: "cads-form-group__input", **input.attributes(name, id, index, error: error?)) %>
         <label class="cads-form-group__label" for="<%= input.attributes(name, id, index)[:id] %>">
           <%= input.label %>
         </label>

diff --git a/engine/app/components/citizens_advice_components/form_group.rb b/engine/app/components/citizens_advice_components/form_group.rb
@@ -42,6 +42,10 @@ def error?
       @error_message.present?
     end
 
+    def error_id
+      "#{name}-error"
+    end
+
     def optional?
       @optional.present?
     end

diff --git a/engine/spec/components/citizens_advice_components/checkbox_group_spec.rb b/engine/spec/components/citizens_advice_components/checkbox_group_spec.rb
@@ -91,6 +91,9 @@
 
     it { is_expected.to have_css ".cads-form-field--has-error" }
     it { is_expected.to have_text "This is the error message" }
+    it { is_expected.to have_css "[aria-describedby='checkboxes-error']" }
+    it { is_expected.to have_css "#checkboxes-error" }
+    it { is_expected.to have_css "input[aria-invalid]", count: 2 }
   end
 
   context "when an hint text is provided" do

diff --git a/engine/spec/components/citizens_advice_components/radio_group_spec.rb b/engine/spec/components/citizens_advice_components/radio_group_spec.rb
@@ -77,6 +77,9 @@
 
     it { is_expected.to have_css ".cads-form-field--has-error" }
     it { is_expected.to have_text "This is the error message" }
+    it { is_expected.to have_css "[aria-describedby='radio-group-error']" }
+    it { is_expected.to have_css "#radio-group-error" }
+    it { is_expected.to have_css "input[aria-invalid]", count: 2 }
   end
 
   context "when an hint text is provided" do