Merge pull request #4252 from alphagov/radio-cb-hidden-legend

Allow visually hiding legend on `radio` component

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add `ostruct` as an explicit dependency ([PR #4251](https://github.com/alphagov/govuk_publishing_components/pull/4251))
+* Allow visually hiding legend on `radio` component ([PR #4252](https://github.com/alphagov/govuk_publishing_components/pull/4252))
 
 ## 43.4.1
 

app/views/govuk_publishing_components/components/_radio.html.erb

@@ -12,6 +12,7 @@
   heading ||= nil
   heading_caption ||= nil
   heading_size ||= nil
+  visually_hidden_heading ||= false
   small ||= false
   inline ||= false
   heading_level = shared_helper.get_heading_level
@@ -46,6 +47,7 @@
 
   legend_classes = %w(govuk-fieldset__legend)
   legend_classes << "govuk-fieldset__legend--#{size}"
+  legend_classes << "govuk-visually-hidden" if visually_hidden_heading
 
   aria = "#{hint_id} #{"#{error_id}" if has_error}".strip if hint or has_error
 

app/views/govuk_publishing_components/components/docs/radio.yml

@@ -160,6 +160,21 @@ examples:
         text: "Yes"
       - value: "no"
         text: "No"
+  with_visually_hidden_heading:
+    description: |
+      If the heading/legend on the radios is not required, it can be visually hidden using this
+      option. It will still be visible to screen readers.
+    data:
+      name: "radio-group-visually-hidden-heading"
+      heading: "What is your favourite colour?"
+      visually_hidden_heading: true
+      items:
+      - value: "red"
+        text: "Red"
+      - value: "green"
+        text: "Green"
+      - value: "blue"
+        text: "Blue"
   with_description:
     data:
       name: "radio-group-description"

spec/components/radio_spec.rb

@@ -296,6 +296,17 @@ def component_name
     assert_select "h4.govuk-fieldset__heading", text: "What is your favourite skittle?"
   end
 
+  it "renders radio-group with a visually hidden heading if visually_hidden_heading is passed" do
+    render_component(
+      name: "favourite-skittle",
+      heading: "What is your favourite skittle?",
+      heading_level: 4,
+      visually_hidden_heading: true,
+    )
+
+    assert_select "legend.govuk-visually-hidden", "What is your favourite skittle?"
+  end
+
   it "renders radio-group with bold labels" do
     render_component(
       name: "radio-group-bold-labels",