Merge pull request #127 from DEFRA/accessibility-fixes

Accessibility fixes

src/client/assets/javascripts/application.js

@@ -12,4 +12,57 @@ import './plant-search.js'
 import './pest-search.js'
 import './country-search.js'
 
+function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+}
+
+export function timerFunction(query, finalArray, populateResults) {
+ return setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
+}
+
+export function inputValueTemplate(asd) {
+ return asd?.text
+}
+
+export function suggestionTemplate(asd, regexValue) {
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ let template
+ if (regexValue?.length > 0) {
+ template =
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.text?.replace(
+ new RegExp(regexValue, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ } else {
+ template =
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.replace(
+ new RegExp(asd, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ }
+ return template
+}
+
 initAll()

src/client/assets/javascripts/country-search.js

@@ -1,4 +1,10 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
+import {
+ timerFunction,
+ inputValueTemplate,
+ suggestionTemplate
+} from './application.js'
+
 let finalArray = []
 let timer
 
@@ -10,28 +16,10 @@ async function fetchSuggestions(query, populateResults) {
  defaultcountryCode?.setAttribute('value', null)
  const apiUrl = '/search/countries?searchQuery=' + query
  await clearTimeout(timer)
- timer = await setTimeout(async () => {
- try {
- if (query.length > 2) {
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- function compareNames(a, b) {
- if (a.text < b.text) {
- return -1
- }
- if (a.text > b.text) {
- return 1
- }
- return 0
- }
- populateResults(finalArray.sort(compareNames))
- }
- } catch (error) {
- // TypeError: Failed to fetch
- // console.log('Error fetching suggestions:', error)
- }
- }, 1000)
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ timer = timerFunction(query, finalArray, populateResults)
 }
 let regexValue, suggestions
 async function renderSuggestions(json, query) {
@@ -89,31 +77,15 @@ if (document.querySelector('#my-autocomplete-country-container')) {
  ?.childNodes[0]?.value,
  minLength: 3,
  autoselect: true,
+ hint: true,
+ hintClasses: 'custom-hint-class',
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return asd?.text
+ return inputValueTemplate(asd)
  },
  suggestion: function (asd) {
- if (regexValue?.length > 0) {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.text?.replace(
- new RegExp(regexValue, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- } else {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.replace(
- new RegExp(asd, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- }
+ return suggestionTemplate(asd, regexValue)
  }
  },
  onConfirm

src/client/assets/javascripts/pest-search.js

@@ -1,4 +1,9 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
+import {
+ timerFunction,
+ inputValueTemplate,
+ suggestionTemplate
+} from './application.js'
 let finalArray = []
 let timer
 
@@ -10,28 +15,10 @@ async function fetchSuggestions(query, populateResults) {
  defaultcslref?.setAttribute('value', null)
  const apiUrl = '/search/pests?searchQuery=' + query
  await clearTimeout(timer)
- timer = await setTimeout(async () => {
- try {
- if (query.length > 2) {
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- function compareNames(a, b) {
- if (a.text.trim() < b.text.trim()) {
- return -1
- }
- if (a.text.trim() > b.text.trim()) {
- return 1
- }
- return 0
- }
- populateResults(finalArray.sort(compareNames))
- }
- } catch (error) {
- // TypeError: Failed to fetch
- // console.log('Error fetching suggestions:', error)
- }
- }, 1000)
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ timer = timerFunction(query, finalArray, populateResults)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -308,7 +295,6 @@ const onConfirm = (e) => {
  .appendChild(inputCslref)
  }
 }
-const cslRefElement = document.getElementById('#cslRef')
 if (document.querySelector('#my-autocomplete-pest-container')) {
  accessibleAutocomplete({
  element: document.querySelector('#my-autocomplete-pest-container'),
@@ -319,32 +305,15 @@ if (document.querySelector('#my-autocomplete-pest-container')) {
  ?.childNodes[0]?.value,
  minLength: 3,
  autoselect: true,
+ hint: true,
+ hintClasses: 'custom-hint-class',
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- cslRefElement?.setAttribute('value', asd?.cslRef)
- return asd?.text
+ return inputValueTemplate(asd)
  },
  suggestion: function (asd) {
- if (regexValue?.length > 0) {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.text?.replace(
- new RegExp(regexValue, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- } else {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.replace(
- new RegExp(asd, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- }
+ return suggestionTemplate(asd, regexValue)
  }
  },
  onConfirm

src/client/assets/javascripts/plant-search.js

@@ -1,4 +1,10 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
+import {
+ timerFunction,
+ inputValueTemplate,
+ suggestionTemplate
+} from './application.js'
+
 let finalArray = []
 let timer
 
@@ -9,28 +15,10 @@ async function fetchSuggestions(query, populateResults) {
  defaulthostref?.setAttribute('value', '')
  const apiUrl = '/search/plants?searchQuery=' + query
  await clearTimeout(timer)
- timer = await setTimeout(async () => {
- try {
- if (query.length > 2) {
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- function compareNames(a, b) {
- if (a.text < b.text) {
- return -1
- }
- if (a.text > b.text) {
- return 1
- }
- return 0
- }
- populateResults(finalArray.sort(compareNames))
- }
- } catch (error) {
- // TypeError: Failed to fetch
- // console.log('Error fetching suggestions:', error)
- }
- }, 1000)
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ timer = timerFunction(query, finalArray, populateResults)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -313,8 +301,6 @@ const onConfirm = (e) => {
  document.querySelector('#my-autocomplete-container').appendChild(inputHref)
  }
 }
-const hostRefElement = document.getElementById('#hostRef')
-
 if (document.querySelector('#my-autocomplete-container')) {
  accessibleAutocomplete({
  element: document.querySelector('#my-autocomplete-container'),
@@ -325,32 +311,15 @@ if (document.querySelector('#my-autocomplete-container')) {
  ?.childNodes[0]?.value,
  minLength: 3,
  autoselect: true,
+ hint: true,
+ hintClasses: 'custom-hint-class',
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- hostRefElement?.setAttribute('value', asd?.hostRef)
- return asd?.text
+ return inputValueTemplate(asd)
  },
  suggestion: function (asd) {
- if (regexValue?.length > 0) {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.text?.replace(
- new RegExp(regexValue, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- } else {
- return (
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.replace(
- new RegExp(asd, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- )
- }
+ return suggestionTemplate(asd, regexValue)
  }
  },
  onConfirm

src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.js

@@ -21,24 +21,21 @@ const problemWithServiceController = {
 
  const statusCode = parseInt(request.query.statusCode)
  const errorMessage = statusCodeMessage(statusCode)
- let pageTitle = 'Error: '
+ let pageTitle
  if (
  statusCode === 500 ||
  statusCode === 502 ||
  statusCode === 503 ||
  statusCode === 504
  ) {
  pageTitle =
- pageTitle +
  'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK'
  } else {
  if (statusCode === 404) {
  pageTitle =
- pageTitle +
  'Page not found — Check plant health information and import rules — GOV.UK'
  } else {
- pageTitle =
- pageTitle + 'Check plant health information and import rules — GOV.UK'
+ pageTitle = 'Check plant health information and import rules — GOV.UK'
  }
  }
  if (statusCode !== undefined) {