Accessible autocomplete for select questions (#181)

* Include accessible autoselect package

* Test type ahead functionality

* Add CSS

* Disabled null value

* Fix answer options so they match validations

* Disabled

* Only english LAs for current LA

* Rubocop

app/models/case_log.rb

@@ -114,8 +114,8 @@ class CaseLog < ApplicationRecord
   enum lawaitlist: LATIME, _suffix: true
   enum reasonpref: POLAR_WITH_UNKNOWN, _suffix: true
   enum reason: REASON, _suffix: true
-  enum la: LA, _suffix: true
+  enum la: ENGLISH_LA, _suffix: true
-  enum prevloc: LA, _suffix: true
+  enum prevloc: UK_LA, _suffix: true
   enum majorrepairs: POLAR, _suffix: true
   enum hb: HOUSING_BENEFIT, _suffix: true
   enum hbrentshortfall: POLAR_WITH_UNKNOWN, _suffix: true

app/views/form/_select_question.html.erb

@@ -1,9 +1,11 @@
-<%= answers = question.answer_options.map { |key, value| OpenStruct.new(id:key, name: value) }
+<%= answers = question.answer_options.map { |key, value| OpenStruct.new(id: key, name: value) }
  f.govuk_collection_select question.id.to_sym,
     answers,
-    :name,
+    :id,
     :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 },
+    options: { disabled: [""] },
+    "data-controller": "accessible-autocomplete"
  %>

app/webpacker/controllers/accessible_autocomplete_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+import accessibleAutocomplete from "accessible-autocomplete"
+import 'accessible-autocomplete/dist/accessible-autocomplete.min.css'
+
+export default class extends Controller {
+  connect() {
+    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;
 

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",

spec/features/form/accessible_autocomplete_spec.rb

@@ -0,0 +1,27 @@
+require "rails_helper"
+require_relative "helpers"
+require_relative "../../request_helper"
+
+RSpec.describe "Accessible Automcomplete" do
+  include Helpers
+  let(:user) { FactoryBot.create(:user) }
+  let(:case_log) do
+    FactoryBot.create(
+      :case_log,
+      :in_progress,
+      owning_organisation: user.organisation,
+      managing_organisation: user.organisation,
+    )
+  end
+
+  before do
+    RequestHelper.stub_http_requests
+    sign_in user
+  end
+
+  it "allows type ahead filtering", js: true do
+    visit("/logs/#{case_log.id}/accessible-select")
+    find("#case-log-la-field").click.native.send_keys("T", "h", "a", "n", :down, :enter)
+    expect(find("#case-log-la-field").value).to eq("Thanet")
+  end
+end

spec/features/form/check_answers_page_spec.rb

@@ -76,13 +76,13 @@ RSpec.describe "Form Check Answers Page" do
 
     it "should have a change link for answered questions" do
       visit("/logs/#{empty_case_log.id}/household-needs/check-answers")
-      assert_selector "a", text: /Answer\z/, count: 4
+      assert_selector "a", text: /Answer\z/, count: 5
       assert_selector "a", text: "Change", count: 0
       visit("/logs/#{empty_case_log.id}/accessibility-requirements")
       check("case-log-accessibility-requirements-housingneeds-c-field")
       click_button("Save and continue")
       visit("/logs/#{empty_case_log.id}/household-needs/check-answers")
-      assert_selector "a", text: /Answer\z/, count: 3
+      assert_selector "a", text: /Answer\z/, count: 4
       assert_selector "a", text: "Change", count: 1
       expect(page).to have_link("Change", href: "/logs/#{empty_case_log.id}/accessibility-requirements")
     end

spec/fixtures/forms/2021_2022.json

@@ -185,6 +185,23 @@
                   }
                 }
               },
+              "accessible_select": {
+                "questions": {
+                  "la": {
+                    "header": "Select options",
+                    "hint_text": "Type ahead to filter the options",
+                    "type": "select",
+                    "check_answer_label": "Accessible Select",
+                    "answer_options": {
+                      "0": "Adur",
+                      "1": "Lewisham",
+                      "2": "Oxford",
+                      "3": "Thanet",
+                      "4": "York"
+                    }
+                  }
+                }
+              },
               "condition_effects": {
                 "questions": {
                   "condition_effects": {

spec/models/form_handler_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe FormHandler do
       form_handler = FormHandler.instance
       form = form_handler.get_form(test_form_name)
       expect(form).to be_a(Form)
-      expect(form.pages.count).to eq(27)
+      expect(form.pages.count).to eq(28)
     end
   end
 

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"