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"