Refactor javascript

Update javascript code so accessible autocomplete component is reusable
ministryofjustice · Dec 23, 2024 · ed0d43a · ed0d43a
1 parent bd3e0e7
commit ed0d43a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/app/javascript/src/accessible-autocomplete.js b/app/javascript/src/accessible-autocomplete.js
@@ -1,46 +1,47 @@
 import accessibleAutocomplete from 'accessible-autocomplete'
 
 const screenReaderMessageDelay = 1000 // wait before updating the screen reader message, to avoid interrupting queue
-const searchSelectItem = document.querySelector('.country-select')
+const autocompleteComponent = document.querySelector('.autocomplete-component')
+const searchSelectItem = autocompleteComponent.querySelector('.country-select')
+const selectName = searchSelectItem.getAttribute('name')
+const clearSearchButton = autocompleteComponent.querySelector('.clear-search')
+const searchInputBox = autocompleteComponent.querySelector('.autocomplete__input')
 
 function enhanceSelectElement (searchSelectItem) {
   accessibleAutocomplete.enhanceSelectElement({
     defaultValue: '',
     selectElement: searchSelectItem,
     inputClasses: 'govuk-input',
-    name: 'country'
+    name: selectName
   })
 
   addSearchInputListeners()
 
-  if (document.querySelector('#non-uk-home-address-country-code-error')) {
+  if (autocompleteComponent.querySelector('.govuk-error-message')) {
     addErrorClasses()
   }
 }
 
 function addSearchInputListeners () {
-  const searchInputBox = document.querySelector('.autocomplete__input')
+  clearSearchButton.classList.remove('hidden')
 
-  document.querySelector('.clear-search').classList.remove('hidden')
-
-  document
-    .querySelector('#clear-country-search')
+  clearSearchButton
     .addEventListener('click', (event) => {
       event.preventDefault()
       searchInputBox.value = ''
       clearSearch()
-      setTimeout(() => { document.querySelector('#screen-reader-messages').innerHTML = 'Search box has been cleared.' }, screenReaderMessageDelay)
+      setTimeout(() => { autocompleteComponent.querySelector('.screen-reader-messages').innerHTML = 'Search box has been cleared.' }, screenReaderMessageDelay)
     })
 }
 
 function clearSearch () {
-  const selectedItem = document.querySelector('.country-select option[selected]')
+  const selectedItem = autocompleteComponent.querySelector('.country-select option[selected]')
   if (selectedItem) selectedItem.removeAttribute('selected')
 }
 
 function addErrorClasses () {
-  document.querySelector('.autocomplete__input').classList.add('govuk-input--error')
-  document.querySelector('.clear-search').classList.add('clear-search-error')
+  autocompleteComponent.querySelector('.autocomplete__input').classList.add('govuk-input--error')
+  clearSearchButton.classList.add('clear-search-error')
 }
 
 document.addEventListener('DOMContentLoaded', () => {

diff --git a/app/views/providers/home_address/non_uk_home_addresses/show.html.erb b/app/views/providers/home_address/non_uk_home_addresses/show.html.erb
@@ -11,11 +11,10 @@
         form:,
       ) do %>
 
-    <div id="screen-reader-messages" class="govuk-visually-hidden" aria-live="polite" aria-atomic="true" role="alert"></div>
-
     <%= hidden_field_tag "legal-framework-api-host", nil, { "data-uri": Rails.configuration.x.legal_framework_api_host_for_js } %>
 
-    <div class="govuk-grid-row">
+    <div class="govuk-grid-row autocomplete-component">
+      <div class="govuk-visually-hidden screen-reader-messages" aria-live="polite" aria-atomic="true" role="alert"></div>
       <div class="govuk-grid-column-two-thirds govuk-list">
         <%= form.govuk_collection_select :country_code,
                                          @form.countries,
@@ -26,7 +25,7 @@
                                          label: { text: "Country", size: "m" } %>
       </div>
       <div class="govuk-grid-column-one-third clear-search hidden">
-        <p class="govuk-body"><%= govuk_link_to t(".clear_search"), "#", id: "clear-country-search" %></p>
+        <p class="govuk-body"><%= govuk_link_to t(".clear_search"), "#" %></p>
       </div>
     </div>