Bump form builder gem and frontend

We were a bit behind latest versions, and also in the last version of the govuk frontend, the markup for the error summary has been changed to improve accessibility. Reference: alphagov/govuk-frontend#2677 In addition to this I noticed a JS error in the initialisation of the accessible autocomplete as it didn't check if we had elements to apply the code or not. Fixed this and also now it uses a `data` attribute for more flexibility if we add more of these autocompletes in the future.
ministryofjustice · Jan 10, 2023 · d5d7ff3 · d5d7ff3
1 parent 2fa05a1
commit d5d7ff3
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 54 deletions.
diff --git a/Gemfile b/Gemfile
@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby File.read('.ruby-version').chomp
 
 gem 'faraday', '~> 2.7'
-gem 'govuk_design_system_formbuilder', '~> 3.1.0'
+gem 'govuk_design_system_formbuilder', '~> 3.3.0'
 gem 'jbuilder', '~> 2.11.5'
 gem 'kaminari'
 gem 'pg', '~> 1.4'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -118,10 +118,10 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
-    dartsass-rails (0.4.0)
+    dartsass-rails (0.4.1)
       railties (>= 6.0.0)
-    date (3.3.1)
-    debug (1.7.0)
+    date (3.3.3)
+    debug (1.7.1)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     devise (4.8.1)
@@ -162,14 +162,14 @@ GEM
       rainbow
       rubocop
       smart_properties
-    erubi (1.11.0)
+    erubi (1.12.0)
     faraday (2.7.2)
       faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
     faraday-net_http (3.0.2)
     globalid (1.0.0)
       activesupport (>= 5.0)
-    govuk_design_system_formbuilder (3.1.2)
+    govuk_design_system_formbuilder (3.3.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
@@ -184,8 +184,8 @@ GEM
     importmap-rails (1.1.5)
       actionpack (>= 6.0.0)
       railties (>= 6.0.0)
-    io-console (0.5.11)
-    irb (1.6.1)
+    io-console (0.6.0)
+    irb (1.6.2)
       reline (>= 0.3.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
@@ -214,10 +214,10 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.0)
-    minitest (5.16.3)
+    mini_portile2 (2.8.1)
+    minitest (5.17.0)
     msgpack (1.6.0)
-    net-imap (0.3.2)
+    net-imap (0.3.4)
       date
       net-protocol
     net-pop (0.1.2)
@@ -242,18 +242,18 @@ GEM
       ruby-saml (~> 1.12)
     orm_adapter (0.5.0)
     parallel (1.22.1)
-    parser (3.1.3.0)
+    parser (3.2.0.0)
       ast (~> 2.4.1)
     pg (1.4.5)
-    pry (0.14.1)
+    pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (5.0.1)
-    puma (6.0.0)
+    puma (6.0.2)
       nio4r (~> 2.0)
-    racc (1.6.1)
-    rack (2.2.4)
-    rack-protection (3.0.4)
+    racc (1.6.2)
+    rack (2.2.5)
+    rack-protection (3.0.5)
       rack
     rack-test (2.0.2)
       rack (>= 1.3)
@@ -294,10 +294,10 @@ GEM
     rexml (3.2.5)
     rspec-core (3.12.0)
       rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.0)
+    rspec-expectations (3.12.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.1)
+    rspec-mocks (3.12.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
     rspec-rails (6.0.1)
@@ -309,30 +309,30 @@ GEM
       rspec-mocks (~> 3.11)
       rspec-support (~> 3.11)
     rspec-support (3.12.0)
-    rubocop (1.40.0)
+    rubocop (1.43.0)
       json (~> 2.3)
       parallel (~> 1.10)
-      parser (>= 3.1.2.1)
+      parser (>= 3.2.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.23.0, < 2.0)
+      rubocop-ast (>= 1.24.1, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.24.0)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.24.1)
       parser (>= 3.1.1.0)
-    rubocop-performance (1.15.1)
+    rubocop-performance (1.15.2)
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
-    rubocop-rails (2.17.3)
+    rubocop-rails (2.17.4)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
     rubocop-rspec (2.16.0)
       rubocop (~> 1.33)
     ruby-progressbar (1.11.0)
-    ruby-saml (1.14.0)
-      nokogiri (>= 1.10.5)
+    ruby-saml (1.15.0)
+      nokogiri (>= 1.13.10)
       rexml
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
@@ -345,16 +345,16 @@ GEM
       sentry-ruby (~> 5.7.0)
     sentry-ruby (5.7.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    simplecov (0.21.2)
+    simplecov (0.22.0)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
       simplecov_json_formatter (~> 0.1)
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.4)
     smart_properties (1.17.0)
-    sprockets (4.1.1)
+    sprockets (4.2.0)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
+      rack (>= 2.2.4, < 4)
     sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
@@ -364,7 +364,7 @@ GEM
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     uk_postcode (2.1.8)
-    unicode-display_width (2.3.0)
+    unicode-display_width (2.4.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -401,7 +401,7 @@ DEPENDENCIES
   dotenv-rails
   erb_lint
   faraday (~> 2.7)
-  govuk_design_system_formbuilder (~> 3.1.0)
+  govuk_design_system_formbuilder (~> 3.3.0)
   hmcts_common_platform!
   importmap-rails
   jbuilder (~> 2.11.5)

diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -17,7 +17,12 @@ if ($inputs) {
 
 import accessibleAutocomplete from 'accessible-autocomplete'
 
-accessibleAutocomplete.enhanceSelectElement({
-  selectElement: document.querySelector('#steps-case-hearing-details-form-hearing-court-name-field'),
-  defaultValue: ''
-})
+const $acElements = document.querySelectorAll('[data-module="accessible-autocomplete"]')
+if ($acElements) {
+  for (let i = 0; i < $acElements.length; i++) {
+    accessibleAutocomplete.enhanceSelectElement({
+      selectElement: $acElements[i],
+      defaultValue: ''
+    })
+  }
+}
diff --git a/app/views/steps/case/hearing_details/edit.html.erb b/app/views/steps/case/hearing_details/edit.html.erb
@@ -9,6 +9,7 @@
 
     <%= step_form @form_object do |f| %>
       <%= f.govuk_collection_select :hearing_court_name, Court.all, :name, :name,
+                                    data: { module: 'accessible-autocomplete' },
                                     options: { include_blank: true }, label: { size: 'm' } %>
 
       <%= f.govuk_date_field :hearing_date, maxlength_enabled: true %>

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -1,6 +1,6 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application", preload: true
-pin "govuk-frontend", to: "https://ga.jspm.io/npm:govuk-frontend@4.3.1/govuk-esm/all.mjs"
+pin "govuk-frontend", to: "https://ga.jspm.io/npm:govuk-frontend@4.4.1/govuk-esm/all.mjs"
 pin_all_from "app/javascript/local", under: "local"
 pin "accessible-autocomplete", to: "https://ga.jspm.io/npm:accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.js"
diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "laa-apply-for-criminal-legal-aid",
   "private": "true",
   "dependencies": {
-    "govuk-frontend": "4.3.1",
-    "@ministryofjustice/frontend": "1.6.0"
+    "govuk-frontend": "4.4.1",
+    "@ministryofjustice/frontend": "1.6.4"
   },
   "scripts": {
-    "postinstall": "bin/importmap pin govuk-frontend@4.3.1"
+    "postinstall": "bin/importmap pin govuk-frontend@4.4.1"
   }
 }
diff --git a/spec/helpers/steps_helper_spec.rb b/spec/helpers/steps_helper_spec.rb
@@ -107,11 +107,11 @@ def self.load_schema! = @columns_hash = {}
         expect(
           helper.govuk_error_summary(form_object)
         ).to eq(
-          '<div class="govuk-error-summary" role="alert" data-module="govuk-error-summary" ' \
-          'aria-labelledby="error-summary-title"><h2 id="error-summary-title" class="govuk-error-summary__title">' \
-          'There is a problem on this page</h2><div class="govuk-error-summary__body">' \
-          '<ul class="govuk-list govuk-error-summary__list"><li><a data-turbo="false" ' \
-          'href="#steps-base-form-object-base-field-error">can&#39;t be blank</a></li></ul></div></div>'
+          '<div class="govuk-error-summary" data-module="govuk-error-summary">' \
+          '<div role="alert"><h2 class="govuk-error-summary__title">There is a problem on this page</h2>' \
+          '<div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list">' \
+          '<li><a data-turbo="false" href="#steps-base-form-object-base-field-error">can&#39;t be blank</a></li>' \
+          '</ul></div></div></div>'
         )
       end
 

diff --git a/yarn.lock b/yarn.lock