From 4093e18ccbff1c97307acdb543fb7e0f26845180 Mon Sep 17 00:00:00 2001 From: davidsauntson Date: Wed, 30 Oct 2024 09:27:21 +0000 Subject: [PATCH 1/3] fix: ensure erroring radio buttons are described by the error message Changes how the error message and the radio buttons are rendered to make sure that `aria-describedby` is added to the buttons and references the error message paragraph. This means that the radio group error message is announced when a radio button in a group with an error gets focus, following the pattern here: https://russmaxdesign.github.io/accessible-forms/fieldset-error04.html. This was discussed in the accessibilty working group as part of @danielnissenbaum discussion about error summaries and the screen reader journey from error to input. --- .../components/citizens_advice_components/checkable/base.rb | 3 +-- .../components/citizens_advice_components/form_group.html.erb | 4 ++-- .../app/components/citizens_advice_components/form_group.rb | 4 ++++ .../components/citizens_advice_components/radio_group_spec.rb | 3 +++ 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/engine/app/components/citizens_advice_components/checkable/base.rb b/engine/app/components/citizens_advice_components/checkable/base.rb index fba4dbde6..bce4502a7 100644 --- a/engine/app/components/citizens_advice_components/checkable/base.rb +++ b/engine/app/components/citizens_advice_components/checkable/base.rb @@ -38,8 +38,7 @@ def base_attributes def error_attributes { - "aria-describedby": "#{@name}-error", - "aria-invalid": true + "aria-describedby": "#{@name}-error" } end diff --git a/engine/app/components/citizens_advice_components/form_group.html.erb b/engine/app/components/citizens_advice_components/form_group.html.erb index 4eb016b51..091b4f6df 100644 --- 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 @@

<%= hint %>

<% end %> <% if error? %> -

<%= error_message %>

+

id="<%= error_id %>"<% end %>><%= error_message %>

<% end %> <% inputs.each_with_index do |input, index| %>
- <%= 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?)) %> diff --git a/engine/app/components/citizens_advice_components/form_group.rb b/engine/app/components/citizens_advice_components/form_group.rb index 3a8d7cc17..a1f7b7fac 100644 --- 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/radio_group_spec.rb b/engine/spec/components/citizens_advice_components/radio_group_spec.rb index 77d461770..738d31700 100644 --- 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 From de479aba33892b68f724deb74a15f36402a1b05e Mon Sep 17 00:00:00 2001 From: davidsauntson Date: Wed, 30 Oct 2024 10:10:53 +0000 Subject: [PATCH 2/3] fix: ensure erroring checkboxes are described by the error message Checkboxes in checkbox groups should also be described by the error message. --- .../components/citizens_advice_components/checkable/base.rb | 3 ++- .../citizens_advice_components/checkbox_group_spec.rb | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/engine/app/components/citizens_advice_components/checkable/base.rb b/engine/app/components/citizens_advice_components/checkable/base.rb index bce4502a7..fba4dbde6 100644 --- a/engine/app/components/citizens_advice_components/checkable/base.rb +++ b/engine/app/components/citizens_advice_components/checkable/base.rb @@ -38,7 +38,8 @@ def base_attributes def error_attributes { - "aria-describedby": "#{@name}-error" + "aria-describedby": "#{@name}-error", + "aria-invalid": true } 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 index 6ffd152ed..1193fd192 100644 --- 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 From df2eb85c5eb2c2312c90bf934a3d03401e6a9ff7 Mon Sep 17 00:00:00 2001 From: davidsauntson Date: Wed, 30 Oct 2024 10:31:34 +0000 Subject: [PATCH 3/3] docs: update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45ee8bc1a..3b91e2ad1 100644 --- 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