Merge pull request #1143 from alphagov/select-aria

Add select component error state without message

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Fix some minor issues with the FAQPage schema ([PR #1142](https://github.com/alphagov/govuk_publishing_components/pull/1142))
+* Add select component error state without message ([PR #1143](https://github.com/alphagov/govuk_publishing_components/pull/1143))
 * Add error state to select component ([PR #1141](https://github.com/alphagov/govuk_publishing_components/pull/1141))
 * Add size option to label ([PR #1140](https://github.com/alphagov/govuk_publishing_components/pull/1140))
 

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

@@ -3,13 +3,33 @@
   describedby ||= nil
   role ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  error_message ||= nil
+  error_id ||= nil
+
+  if error_message
+    error_id = "error-#{SecureRandom.hex(4)}" unless error_id
+    describedby = error_id
+  end
+
+  css_classes = %w(gem-c-fieldset govuk-form-group)
+  css_classes << "govuk-form-group--error" if error_message
+
+  fieldset_classes = %w(govuk-fieldset)
 
   legend_classes = %w(govuk-fieldset__legend)
   legend_classes << "govuk-fieldset__legend--#{heading_size}" if heading_size
 %>
-<%= tag.fieldset class: "gem-c-fieldset govuk-fieldset", aria: { describedby: describedby }, role: role do %>
-  <%= tag.legend class: legend_classes do %>
-    <%= legend_text %>
+<%= tag.div class: css_classes do %>
+  <%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role do %>
+    <%= tag.legend class: legend_classes do %>
+      <%= legend_text %>
+    <% end %>
+    <% if error_message %>
+      <%= render "govuk_publishing_components/components/error_message", {
+        text: error_message,
+        id: error_id
+      } %>
+    <% end %>
+    <%= text %>
   <% end %>
-  <%= text %>
 <% end %>

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

@@ -5,17 +5,20 @@
   full_width ||= false
   name ||= id
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
-
   error_message ||= nil
-  error_id ||= "error-#{SecureRandom.hex(4)}" if error_message
-  aria_describedby = { describedby: error_id } if error_message
+  error_id ||= nil
+
+  if error_message || error_id
+    error_id = "error-#{SecureRandom.hex(4)}" unless error_id
+    aria_describedby = { describedby: error_id }
+  end
 
   css_classes = %w(govuk-form-group gem-c-select)
   css_classes << "govuk-form-group--error" if error_message
 
   select_classes = %w(govuk-select)
   select_classes << "gem-c-select__select--full-width" if full_width
-  select_classes << "govuk-select--error" if error_message
+  select_classes << "govuk-select--error" if error_id
 
   label_classes = %w(govuk-label)
   label_classes << "govuk-label--#{heading_size}" if heading_size

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

@@ -7,13 +7,14 @@ accessibility_criteria: |
 
   Error message must:
 
-  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with.
+  - be associated with an input. The `error_message_id` must match the `aria-describedby` property on the input your label is associated with. Note that if `id` is not passed to the component an id will be generated automatically.
 
   If error message is within a label it will be announced in its entirety by screen readers. By associating error messages with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight.
 examples:
   default:
     data:
       text: "Please enter your National Insurance Number"
+      id: "error_id"
   with_items:
     description: Error items are a common pattern where a collection of error is passed with each item having a text attribute of the error
     data:

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

@@ -12,10 +12,10 @@ examples:
       legend_text: 'Do you have a passport?'
       text: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="default-yes" name="default"t>
+        <input type="radio" id="default-yes" name="default">
         <label for="default-yes">Yes</label>
 
-        <input type="radio" id="default-no" name="default"t>
+        <input type="radio" id="default-no" name="default">
         <label for="default-no">No</label>
   with_custom_legend_size:
     description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'.
@@ -24,10 +24,10 @@ examples:
       heading_size: 'l'
       text: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="size-yes" name="default"t>
+        <input type="radio" id="size-yes" name="default">
         <label for="size-yes">Yes</label>
 
-        <input type="radio" id="size-no" name="default"t>
+        <input type="radio" id="size-no" name="default">
         <label for="size-no">No</label>
   with_html_legend:
     description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)'
@@ -44,3 +44,15 @@ examples:
 
         <input type="radio" id="html-legend-no" name="html-legend">
         <label for="html-legend-no">No</label>
+  with_error_message:
+    description: The component also accepts an error_id, or generates one automatically.
+    data:
+      legend_text: 'Do you have a passport?'
+      error_message: 'Please choose an option'
+      text: |
+        <!-- Use the radio component, this is hardcoded only for this example -->
+        <input type="radio" id="default2-yes" name="default2">
+        <label for="default2-yes">Yes</label>
+
+        <input type="radio" id="default2-no" name="default2">
+        <label for="default2-no">No</label>

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

@@ -104,6 +104,19 @@ examples:
         value: 'option1'
       - text: 'Will make own arrangements'
         value: 'option2'
+  with_error_id_but_no_message:
+    description: For some selects the error message should be rendered separately but an error state is still required (currently required in smart answers). In this scenario an error_id can be passed without an error_message to highlight the component and set aria-describedby correctly.
+    data:
+      id: 'dropdown4-2'
+      label: 'What lunch option would you like?'
+      error_id: 'error_id'
+      options:
+      - text: ""
+        value: ""
+      - text: 'Vegetarian'
+        value: 'option1'
+      - text: 'Meat'
+        value: 'option2'
   full_width:
     description: Make the select width 100%. This is used for facets in finder-frontend's search.
     data:

spec/components/error_message_spec.rb

@@ -11,6 +11,12 @@ def component_name
     assert_select(".govuk-error-message", text: "Error: Please enter your National Insurance number")
   end
 
+  it "renders error message with a given ID" do
+    render_component(text: "Please enter your National Insurance number", id: "error_id")
+
+    assert_select(".govuk-error-message[id=error_id]")
+  end
+
   it "escapes HTML in items and allows HTML safe strings" do
     render_component(items: [
       { text: "Error where HTML is <strong>escaped</strong>" },

spec/components/fieldset_spec.rb

@@ -30,4 +30,17 @@ def component_name
 
     assert_select ".govuk-fieldset__legend.govuk-fieldset__legend--xl"
   end
+
+  it "renders a fieldset with an error correctly" do
+    render_component(
+      legend_text: 'Do you have a passport?',
+      error_message: 'uh oh',
+      error_id: "error_id",
+      text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ad neque, maxime est ea laudantium totam fuga!'
+    )
+
+    assert_select ".gem-c-fieldset.govuk-form-group.govuk-form-group--error"
+    assert_select ".govuk-fieldset[aria-describedby=error_id]"
+    assert_select ".gem-c-error-message[id=error_id]", text: 'Error: uh oh'
+  end
 end

spec/components/select_spec.rb

@@ -206,6 +206,23 @@ def component_name
     assert_select ".govuk-select.govuk-select--error[aria-describedby=error_id]"
   end
 
+  it "applies aria-describedby if an error is is given" do
+    render_component(
+      id: "mydropdown",
+      label: "My dropdown",
+      error_id: "error_id",
+      options: [
+        {
+          value: "government-gateway",
+          text: "Use Government Gateway"
+        }
+      ]
+    )
+
+    assert_select ".gem-c-error-message.govuk-error-message", false
+    assert_select ".govuk-select.govuk-select--error[aria-describedby=error_id]"
+  end
+
   it "renders a select box full width" do
     render_component(
       id: "mydropdown",