diff --git a/app/views/form/_select_question.html.erb b/app/views/form/_select_question.html.erb
index d2eb7e079..67193067b 100644
--- a/app/views/form/_select_question.html.erb
+++ b/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"
%>
diff --git a/app/webpacker/controllers/accessible_autocomplete_controller.js b/app/webpacker/controllers/accessible_autocomplete_controller.js
new file mode 100644
index 000000000..fc6605427
--- /dev/null
+++ b/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
+ })
+ }
+}
diff --git a/app/webpacker/styles/_accessible-autocomplete.scss b/app/webpacker/styles/_accessible-autocomplete.scss
new file mode 100644
index 000000000..3ffd9adaf
--- /dev/null
+++ b/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;
+}
diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss
index 78b925154..551101152 100644
--- a/app/webpacker/styles/application.scss
+++ b/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;
diff --git a/config/forms/2021_2022.json b/config/forms/2021_2022.json
index 5a97ebcba..da9d89e4e 100644
--- a/config/forms/2021_2022.json
+++ b/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",
diff --git a/package.json b/package.json
index e20af9cbb..f27fbab7b 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index c160e3dc9..4c8dfe1e2 100644
--- a/yarn.lock
+++ b/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"