Merge pull request #2594 from alphagov/add-select-hint

Add select component hint

CHANGELOG.md

@@ -7,9 +7,13 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add select component hint ([PR #2594](https://github.com/alphagov/govuk_publishing_components/pull/2594))
+
 ## 28.4.0
 
-- Remove COVID CTA from contextual sidebar component (PR [#2584](https://github.com/alphagov/govuk_publishing_components/pull/2584))
+- Remove COVID CTA from contextual sidebar component ([PR #2584](https://github.com/alphagov/govuk_publishing_components/pull/2584))
 
 ## 28.3.0
 

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

@@ -10,12 +10,23 @@
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   error_message ||= nil
   error_id ||= nil
+  hint ||= nil
+  hint_id ||= nil
+
+  describedby = %w[]
 
   if error_message || error_id
     error_id = "error-#{SecureRandom.hex(4)}" unless error_id
-    aria_describedby = { describedby: error_id }
+    describedby << error_id
+  end
+
+  if hint
+    hint_id = "hint-#{SecureRandom.hex(4)}" unless hint_id
+    describedby << hint_id
   end
 
+  aria_describedby = { describedby: describedby } if describedby
+
   css_classes = %w(govuk-form-group gem-c-select)
   css_classes << "govuk-form-group--error" if error_message
 
@@ -37,6 +48,13 @@
       <%= label_tag(id, label, class: label_classes) %>
     <% end %>
 
+    <% if hint %>
+      <%= render "govuk_publishing_components/components/hint", {
+        id: hint_id,
+        text: hint
+      } %>
+    <% end %>
+
     <% if error_message %>
       <%= render "govuk_publishing_components/components/error_message", {
         id: error_id,

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

@@ -42,6 +42,18 @@ examples:
         selected: true
       - text: 'Option three'
         value: 'option3'
+  with_hint:
+    description: When a hint is included the `aria-describedby` attribute of the select is included to point to the hint. When an error and a hint are present, that attribute includes the IDs of both the hint and the error.
+    data:
+      id: 'dropdown2-1'
+      label: 'Choose your preferred thing'
+      hint_text: 'You might need some more information here'
+      hint_id: 'optional-hint-id'
+      options:
+      - text: 'Something'
+        value: 'option1'
+      - text: 'Something else'
+        value: 'option2'
   with_tracking:
     description: 'Tracking can be enabled on the select component by passing a minimum of data_track_category and data_track_action. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.'
     data:

spec/components/select_spec.rb

@@ -186,6 +186,24 @@ def component_name
     assert_select ".gem-c-select [data-another-attribute=test1][data-second-item=item1][data-option=option1]"
   end
 
+  it "renders a select box with a hint" do
+    render_component(
+      id: "mydropdown",
+      label: "attributes",
+      hint: "this is a hint",
+      hint_id: "hint_id",
+      options: [
+        {
+          value: 1,
+          text: "One",
+        },
+      ],
+    )
+
+    assert_select ".gem-c-select .govuk-hint", "this is a hint"
+    assert_select ".gem-c-select .govuk-select[aria-describedby='hint_id']"
+  end
+
   it "renders a select box in an error state" do
     render_component(
       id: "mydropdown",
@@ -222,6 +240,25 @@ def component_name
     assert_select ".govuk-select.govuk-select--error[aria-describedby=error_id]"
   end
 
+  it "applies aria-describedby if a hint and an error are present" do
+    render_component(
+      id: "mydropdown",
+      label: "attributes",
+      hint: "this is a hint",
+      hint_id: "hint_id",
+      error_id: "error_id",
+      options: [
+        {
+          value: 1,
+          text: "One",
+        },
+      ],
+    )
+
+    assert_select ".gem-c-select .govuk-hint", "this is a hint"
+    assert_select ".gem-c-select .govuk-select[aria-describedby='error_id hint_id']"
+  end
+
   it "renders a select box full width" do
     render_component(
       id: "mydropdown",