refactor(frontend): replace stimulus with web component for error-sum…

…mary

packages/frontend/components/error-summary/index.js

@@ -1,33 +1,30 @@
-/* eslint-disable jsdoc/no-undefined-types */
-import { Controller } from "@hotwired/stimulus";
-
 /**
  * Based by the error summary component provided by GOV.UK Frontend
  * @see {@link https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs}
  */
-export const ErrorSummaryController = class extends Controller {
-  connect() {
+export const ErrorSummaryComponent = class extends HTMLElement {
+  connectedCallback() {
     this.setFocus();
-    this.element.addEventListener("click", this.handleClick.bind(this));
+    this.addEventListener("click", this.handleClick.bind(this));
   }
 
   /**
    * Focus error summary
    */
   setFocus() {
-    if (this.element.dataset.disableAutoFocus === "true") {
+    if (this.getAttribute("disable-auto-focus") === "true") {
       return;
     }
 
     // Set tabindex to -1 to make the element programmatically focusable…
-    this.element.setAttribute("tabindex", "-1");
+    this.setAttribute("tabindex", "-1");
 
     // …and remove it on blur as error summary doesn’t need to be focused again
-    this.element.addEventListener("blur", function (event) {
+    this.addEventListener("blur", function (event) {
       event.target.removeAttribute("tabindex");
     });
 
-    this.element.focus();
+    this.focus();
   }
 
   /**
@@ -54,12 +51,12 @@ export const ErrorSummaryController = class extends Controller {
    * This also results in the label and/or legend being announced correctly in
    * NVDA - without this only the field type is announced (e.g. "Edit, has
    * autocomplete").
-   * @param {HTMLElement} $target - Event target
+   * @param {HTMLAnchorElement} $target - Event target
    * @returns {boolean} True if the target was able to be focussed
    */
   focusTarget($target) {
     // If the element that was clicked was not a link, return early
-    if ($target.tagName !== "A" || $target.href === false) {
+    if (!($target instanceof HTMLAnchorElement)) {
       return false;
     }
 

packages/frontend/components/error-summary/styles.css

@@ -1,6 +1,7 @@
-.error-summary {
+error-summary-component {
   border: var(--color-error) solid var(--border-width-thickest);
   border-radius: var(--border-radius-small);
+  display: block;
   max-inline-size: var(--line-measure);
   padding: var(--space-m);
 }

packages/frontend/components/error-summary/template.njk

@@ -1,4 +1,4 @@
-<div class="{{ classes("error-summary", opts) }}" data-controller="error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
+<error-summary-component class="{{ classes("error-summary", opts) }}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
   {%- if opts.disableAutoFocus %} data-disable-auto-focus="true"{% endif %}
   {{- attributes(opts.attributes) }}>
   <h2 class="error-summary__title" id="error-summary-title">
@@ -24,4 +24,4 @@
     </ul>
   {% endif %}
   </div>
-</div>
+</error-summary-component>

packages/frontend/scripts/app.js

@@ -2,7 +2,7 @@
 import { Application } from "@hotwired/stimulus";
 import { AddAnotherController } from "../components/add-another/index.js";
 import { CheckboxesComponent } from "../components/checkboxes/index.js";
-import { ErrorSummaryController } from "../components/error-summary/index.js";
+import { ErrorSummaryComponent } from "../components/error-summary/index.js";
 import { GeoInputComponent } from "../components/geo-input/index.js";
 import { PreviewController } from "../components/preview/index.js";
 import { NotificationComponent } from "../components/notification/index.js";
@@ -13,7 +13,7 @@ import { TextareaController } from "../components/textarea/index.js";
 window.Stimulus = Application.start();
 Stimulus.register("add-another", AddAnotherController);
 customElements.define("checkboxes-component", CheckboxesComponent);
-Stimulus.register("error-summary", ErrorSummaryController);
+customElements.define("error-summary-component", ErrorSummaryComponent);
 customElements.define("geo-input-component", GeoInputComponent);
 customElements.define("notification-component", NotificationComponent);
 Stimulus.register("preview", PreviewController);