Always scroll to legend for checkboxes and radios

alphagov · Sep 13, 2019 · 6f3fe3d · 6f3fe3d
1 parent f5efe3c
commit 6f3fe3d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/app/views/examples/error-summary/index.njk b/app/views/examples/error-summary/index.njk
@@ -65,6 +65,10 @@
         "text": "Problem with conditionally-revealed input",
         "href": "#yes-input"
       },
+      {
+        "text": "Problem with radios with heading",
+        "href": "#traal"
+      },
       {
         "text": "Problem with input within large fieldset",
         "href": "#address-postcode"
@@ -313,6 +317,32 @@
     ]
   }) }}
 
+  {{ govukRadios({
+    classes: "govuk-radios--inline",
+    idPrefix: "traal",
+    name: "traal",
+    fieldset: {
+      legend: {
+        text: "Have you supplied orders signed in triplicate, sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters?",
+        isPageHeading: true,
+        classes: "govuk-fieldset__legend--xl"
+      }
+    },
+    errorMessge: {
+      text: "Select whether you have supplied orders meeting these criteria"
+    },
+    items: [
+      {
+        value: "yes",
+        text: "Yes"
+      },
+      {
+        value: "no",
+        text: "No"
+      }
+    ]
+  }) }}
+
   {% call govukFieldset({
     legend: {
       text: "What is your address?",

diff --git a/src/govuk/components/error-summary/error-summary.js b/src/govuk/components/error-summary/error-summary.js
@@ -112,10 +112,16 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
 
     if (legends.length) {
       var $candidateLegend = legends[0];
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type == "checkbox" || $input.type == "radio") {
+        return $candidateLegend
+      }
 
-      // Only scroll to the fieldset’s legend (instead of the label associated
-      // with the input) if the input would end up in the top half of the
-      // screen.
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
       //
       // This should avoid situations where the input either ends up off the
       // screen, or obscured by a software keyboard.