Include accessible autoselect package

app/views/form/_select_question.html.erb

@@ -5,5 +5,6 @@
     :name,
     caption: caption && !page_header.present? ? { text: caption.html_safe, size: "l" } : nil,
     label: { text: question.header, size: !page_header.present? ? "l" : "m", tag: !page_header.present? ? "h1" : "h2" },
-    hint: { text: question.hint_text&.html_safe }
+    hint: { text: question.hint_text&.html_safe },
+    "data-controller": "accessible-autocomplete"
  %>

app/webpacker/controllers/accessible_autocomplete_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+import accessibleAutocomplete from "accessible-autocomplete"
+
+export default class extends Controller {
+  initialize() {
+    accessibleAutocomplete.enhanceSelectElement({
+      defaultValue: '',
+      selectElement: this.element
+    })
+  }
+}

app/webpacker/styles/_accessible-autocomplete.scss

@@ -0,0 +1,20 @@
+.autocomplete__wrapper,
+.autocomplete__input,
+.autocomplete__hint {
+  font-family: $govuk-font-family;
+}
+
+.govuk-form-group--error {
+  .autocomplete__input {
+    border-color: $govuk-error-colour;
+  }
+
+  .autocomplete__input--focused {
+    border-color: $govuk-input-border-colour;
+  }
+}
+
+.autocomplete__dropdown-arrow-down {
+  pointer-events: none;
+  z-index: 0;
+}

app/webpacker/styles/application.scss

@@ -14,6 +14,7 @@ $govuk-image-url-function: frontend-image-url;
 @import 'related-navigation';
 @import 'task-list';
 @import 'tab-navigation';
+@import 'accessible-autocomplete';
 
 $govuk-global-styles: true;
 

config/forms/2021_2022.json

@@ -1156,7 +1156,7 @@
                   "check_answer_label": "Local Authority",
                   "header": "Select a local authority",
                   "hint_text": "",
-                  "type": "radio",
+                  "type": "select",
                   "answer_options": {
                     "0": "Adur",
                     "1": "Allerdale",
@@ -2009,7 +2009,7 @@
                   "check_answer_label": "The LA in which household lived immediately before this letting\t",
                   "header": "Which local authority area did the household live in immediately before this letting?",
                   "hint_text": "Includes temporary accommodation",
-                  "type": "radio",
+                  "type": "select",
                   "answer_options": {
                     "0": "Adur",
                     "1": "Allerdale",

package.json

@@ -14,6 +14,7 @@
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.0",
+    "accessible-autocomplete": "^2.0.3",
     "chart.js": "^3.6.0",
     "chartkick": "^4.1.0",
     "govuk-frontend": "^3.14.0",

yarn.lock

@@ -1203,6 +1203,13 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+accessible-autocomplete@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/accessible-autocomplete/-/accessible-autocomplete-2.0.3.tgz#3ed8d529b227b77e99ab509eec5d2c8d1b8bea8b"
+  integrity sha512-bUswBs/mDH17dUFRAJMTtcGafJ++w1YLPPFjdfJj3lnuBsLpByAw2gmr8qxXX8oc7tzoKS3Ay5FKOPM+WMBxIw==
+  dependencies:
+    preact "^8.3.1"
+
 acorn@^6.4.1:
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -5506,6 +5513,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+preact@^8.3.1:
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-8.5.3.tgz#78c2a5562fcecb1fed1d0055fa4ac1e27bde17c1"
+  integrity sha512-O3kKP+1YdgqHOFsZF2a9JVdtqD+RPzCQc3rP+Ualf7V6rmRDchZ9MJbiGTT7LuyqFKZqlHSOyO/oMFmI2lVTsw==
+
 prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"