@nationalarchives/frontend 0.20.0 → 0.20.1

package/nationalarchives/components/error-summary/error-summary.mjs

@@ -14,6 +14,8 @@ export class ErrorSummary {
     if (!disableAutoFocus) {
       this.setFocus(this.$module);
     }
+
+    this.$module.addEventListener("click", (event) => this.handleClick(event));
   }
 
   setFocus($element, options = {}) {
@@ -48,4 +50,110 @@ export class ErrorSummary {
     options.onBeforeFocus?.call($element);
     $element.focus();
   }
+
+  handleClick(event) {
+    const $target = event.target;
+    if ($target && this.focusTarget($target)) {
+      event.preventDefault();
+    }
+  }
+
+  getFragmentFromUrl(url) {
+    if (!url.includes("#")) {
+      return undefined;
+    }
+
+    return url.split("#").pop();
+  }
+
+  focusTarget($target) {
+    // If the element that was clicked was not a link, return early
+    if (!($target instanceof HTMLAnchorElement)) {
+      return false;
+    }
+
+    const inputId = this.getFragmentFromUrl($target.href);
+    if (!inputId) {
+      return false;
+    }
+
+    const $input = document.getElementById(inputId);
+    if (!$input) {
+      return false;
+    }
+
+    const $legendOrLabel = this.getAssociatedLegendOrLabel($input);
+    if (!$legendOrLabel) {
+      return false;
+    }
+
+    // Scroll the legend or label into view *before* calling focus on the input
+    // to avoid extra scrolling in browsers that don't support `preventScroll`
+    // (which at time of writing is most of them...)
+    $legendOrLabel.scrollIntoView();
+    $input.focus({ preventScroll: true });
+
+    return true;
+  }
+
+  /**
+   * Get associated legend or label
+   *
+   * Returns the first element that exists from this list:
+   *
+   * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+   *   as the top of it is no more than half a viewport height away from the
+   *   bottom of the input
+   * - The first `<label>` that is associated with the input using for="inputId"
+   * - The closest parent `<label>`
+   *
+   * @private
+   * @param {Element} $input - The input
+   * @returns {Element | null} Associated legend or label, or null if no
+   *   associated legend or label can be found
+   */
+  getAssociatedLegendOrLabel($input) {
+    const $fieldset = $input.closest("fieldset");
+
+    if ($fieldset) {
+      const $legends = $fieldset.getElementsByTagName("legend");
+
+      if ($legends.length) {
+        const $candidateLegend = $legends[0];
+
+        // If the input type is radio or checkbox, always use the legend if
+        // there is one.
+        if (
+          $input instanceof HTMLInputElement &&
+          ($input.type === "checkbox" || $input.type === "radio")
+        ) {
+          return $candidateLegend;
+        }
+
+        // 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.
+        const legendTop = $candidateLegend.getBoundingClientRect().top;
+        const inputRect = $input.getBoundingClientRect();
+
+        // If the browser doesn't support Element.getBoundingClientRect().height
+        // or window.innerHeight (like IE8), bail and just link to the label.
+        if (inputRect.height && window.innerHeight) {
+          const inputBottom = inputRect.top + inputRect.height;
+
+          if (inputBottom - legendTop < window.innerHeight / 2) {
+            return $candidateLegend;
+          }
+        }
+      }
+    }
+
+    return (
+      document.querySelector(`label[for='${$input.getAttribute("id")}']`) ??
+      $input.closest("label")
+    );
+  }
 }

package/nationalarchives/components/text-input/fixtures.json

@@ -109,7 +109,7 @@
         "id": "text",
         "name": "text",
         "size": "m",
-        "spellcheck": "true"
+        "spellcheck": true
       },
       "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"true\" autocapitalize=\"off\" autocorrect=\"off\"></div>"
     },
@@ -122,9 +122,9 @@
         "id": "text",
         "name": "text",
         "size": "m",
-        "autocapitalize": "true"
+        "autocapitalize": "on"
       },
-      "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"true\" autocorrect=\"off\"></div>"
+      "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"on\" autocorrect=\"off\"></div>"
     },
     {
       "name": "autocorrect",
@@ -135,7 +135,7 @@
         "id": "text",
         "name": "text",
         "size": "m",
-        "autocorrect": "true"
+        "autocorrect": true
       },
       "html": "<div class=\"tna-form__group\" data-module=\"tna-text-input\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"text\">Enter some text</label></h4></div><input id=\"text\" class=\"tna-text-input tna-text-input--m \" name=\"text\" value=\"\" type=\"text\" spellcheck=\"false\" autocapitalize=\"off\" autocorrect=\"on\"></div>"
     },

package/nationalarchives/components/textarea/fixtures.json

@@ -106,9 +106,9 @@
         "headingSize": "m",
         "id": "feedback",
         "name": "feedback",
-        "autocapitalize": true
+        "autocapitalize": "on"
       },
-      "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"true\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
+      "html": "<div class=\"tna-form__group\"><div class=\"tna-form__group-contents\"><h4 class=\"tna-form__heading tna-form__heading--m\"><label class=\"tna-form__label\" for=\"feedback\">Enter your feedback</label></h4></div><textarea id=\"feedback\" class=\"tna-textarea \" name=\"feedback\" spellcheck=\"false\" autocapitalize=\"on\" autocorrect=\"off\" rows=\"5\"></textarea></div>"
     },
     {
       "name": "autocorrect",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",