Accessibility fixes

src/client/assets/javascripts/application.js

@@ -12,57 +12,4 @@ 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,9 +1,4 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
 
 let finalArray = []
 let timer
@@ -16,10 +11,29 @@ async function fetchSuggestions(query, populateResults) {
  defaultcountryCode?.setAttribute('value', null)
  const apiUrl = '/search/countries?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue, suggestions
 async function renderSuggestions(json, query) {
@@ -82,10 +96,32 @@ if (document.querySelector('#my-autocomplete-country-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ 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>'
+ )
+ }
  }
  },
  onConfirm

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

@@ -1,9 +1,5 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
+
 let finalArray = []
 let timer
 
@@ -15,10 +11,29 @@ async function fetchSuggestions(query, populateResults) {
  defaultcslref?.setAttribute('value', null)
  const apiUrl = '/search/pests?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -66,11 +81,18 @@ async function renderSuggestions(json, query) {
  commonJson[i].pestName[j].NAME.sort().filter((name) => {
  if (name.match(new RegExp(regexValue, 'gi'))) {
  if (latinArray.length > 0) {
- const existingArray = commonExistingNameCheck(
+ const existingArray1 = commonExistingNameCheck(
  latinArray,
  name
  )
- if (existingArray.length === 0) {
+ const existingArray2 = commonExistingNameCheck(
+ commonArray,
+ name
+ )
+ if (
+ existingArray1.length === 0 &&
+ existingArray2.length === 0
+ ) {
  commonArray.push({
  result: commonJson[i].pestName,
  cslRef: commonJson[i].cslRef,
@@ -104,11 +126,18 @@ async function renderSuggestions(json, query) {
  synonymJson[i].pestName[j].NAME.filter((name) => {
  if (name.match(new RegExp(regexValue, 'gi'))) {
  if (latinArray.length > 0) {
- const existingArray = synonymExistingNameCheck(
+ const existingLatinArray = synonymExistingNameCheck(
  latinArray,
  name
  )
- if (existingArray.length === 0) {
+ const existingSynonymArray = synonymExistingNameCheck(
+ synonymArray,
+ name
+ )
+ if (
+ existingLatinArray.length === 0 &&
+ existingSynonymArray.length === 0
+ ) {
  synonymArray.push({
  result: synonymJson[i].pestName,
  cslRef: synonymJson[i].cslRef,
@@ -162,7 +191,9 @@ function commonExistingNameCheck(latinArray, name) {
  const existingArray = []
  latinArray.filter(function (item) {
  item.result[1].NAME?.filter(function (cname) {
- if (cname.match(new RegExp(name, 'gi'))) existingArray.push(cname)
+ if (cname.toLowerCase() === name.toLowerCase()) {
+ existingArray.push(cname)
+ }
  return existingArray
  })
  return existingArray
@@ -310,10 +341,32 @@ if (document.querySelector('#my-autocomplete-pest-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ 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>'
+ )
+ }
  }
  },
  onConfirm

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

@@ -1,9 +1,4 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
 
 let finalArray = []
 let timer
@@ -15,10 +10,30 @@ async function fetchSuggestions(query, populateResults) {
  defaulthostref?.setAttribute('value', '')
  const apiUrl = '/search/plants?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -316,10 +331,32 @@ if (document.querySelector('#my-autocomplete-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ 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>'
+ )
+ }
  }
  },
  onConfirm