From ef80eed28a6227a7b41a2daf125140bb71a87a36 Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Wed, 11 Sep 2024 16:08:50 -0400 Subject: [PATCH 01/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Update accessibility.js --- web/themes/custom/usagov/scripts/accessibility.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index 0c66fada67..c4221fe396 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -384,6 +384,11 @@ window.addEventListener("load", function () { toggleButtons[i].removeAttribute("tabindex"); } + // Change attributes so that autofill works in state input + let stateSelectBox = document.getElementsByName("input-state")[0]; + stateSelectBox.setAttribute("autocomplete","off"); + let stateInputBox = document.getElementById("input-state"); + stateInputBox.setAttribute("autocomplete","address-level1"); }); (function() { From dac1d10038b2286f95af8133454787448e345551 Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Wed, 11 Sep 2024 16:53:11 -0400 Subject: [PATCH 02/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Update accessibility.js --- web/themes/custom/usagov/scripts/accessibility.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index c4221fe396..ca3a63620d 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -385,10 +385,13 @@ window.addEventListener("load", function () { } // Change attributes so that autofill works in state input - let stateSelectBox = document.getElementsByName("input-state")[0]; - stateSelectBox.setAttribute("autocomplete","off"); let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); + + let stateSelectBox = document.getElementsByName("input-state")[0]; + stateSelectBox.setAttribute("autocomplete","off"); + stateSelectBox.setAttribute("name","inst"); + }); (function() { From 2097986c6a94730d0c8ef36876cc60ee27dab74a Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Wed, 11 Sep 2024 16:53:11 -0400 Subject: [PATCH 03/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Update field--node--field-custom-twig-content-elected-officials.html.twig USAGOV-1548-CEO-STATE-AND-COUNTRY: Update accessibility.js --- web/themes/custom/usagov/scripts/accessibility.js | 7 +++++-- ...--field-custom-twig-content-elected-officials.html.twig | 5 +++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index c4221fe396..ca3a63620d 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -385,10 +385,13 @@ window.addEventListener("load", function () { } // Change attributes so that autofill works in state input - let stateSelectBox = document.getElementsByName("input-state")[0]; - stateSelectBox.setAttribute("autocomplete","off"); let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); + + let stateSelectBox = document.getElementsByName("input-state")[0]; + stateSelectBox.setAttribute("autocomplete","off"); + stateSelectBox.setAttribute("name","inst"); + }); (function() { diff --git a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig index f54784880b..1b6179eb22 100644 --- a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig +++ b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig @@ -85,11 +85,12 @@ Date: Wed, 11 Sep 2024 17:04:20 -0400 Subject: [PATCH 05/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Chrome ignores autocomplete off --- web/themes/custom/usagov/scripts/accessibility.js | 3 +-- ...node--field-custom-twig-content-elected-officials.html.twig | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index 72cbea3388..af58e319a3 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -386,8 +386,7 @@ window.addEventListener("load", function () { // Change attributes so that autofill works in state input let stateSelectBox = document.getElementsByName("ins")[0]; - stateSelectBox.setAttribute("autocomplete","off"); - // stateSelectBox.setAttribute("name","inst"); + stateSelectBox.setAttribute("autocomplete","country"); let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); diff --git a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig index 02b8e5aeed..3e7bb851f4 100644 --- a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig +++ b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig @@ -87,10 +87,11 @@ class="usa-select" name="ins" id="input-state" + autocomplete="country" required oninvalid="this.setCustomValidity('Fill out the state field.')" oninput="this.setCustomValidity('')" - autocomplete="off"> + > From b48b4f38579970f5c145509294a630181dc2e823 Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Thu, 12 Sep 2024 13:42:56 -0400 Subject: [PATCH 06/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Send correct state value to results page --- web/themes/custom/usagov/scripts/lookup.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/themes/custom/usagov/scripts/lookup.js b/web/themes/custom/usagov/scripts/lookup.js index 198d37dfb9..3442cad856 100644 --- a/web/themes/custom/usagov/scripts/lookup.js +++ b/web/themes/custom/usagov/scripts/lookup.js @@ -483,9 +483,8 @@ function load() { let inputStreet = searchParams.get('input-street'); let inputCity = searchParams.get('input-city'); - let inputState = searchParams.get('input-state'); + let inputState = searchParams.get('ins'); let inputZip = searchParams.get('input-zip'); - let normalizedAddress = inputStreet + ", " + inputCity + ", " + inputState + " " + inputZip; let displayAddress = document.getElementById("display-address"); displayAddress.innerHTML = DOMPurify.sanitize(normalizedAddress.replace(", ", "
")); From 085b274f56ea0f7c4a972492f276f8bfebdcbe1f Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Thu, 12 Sep 2024 13:50:29 -0400 Subject: [PATCH 07/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: change ins to state-dropdown --- web/themes/custom/usagov/scripts/accessibility.js | 5 +---- web/themes/custom/usagov/scripts/lookup.js | 2 +- ...de--field-custom-twig-content-elected-officials.html.twig | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index af58e319a3..89036d0c18 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -219,7 +219,6 @@ async function handleFormSubmission() { const stateField = document.getElementById("input-state"); const zipCodeField = document.getElementById("input-zip"); const formFields = [streetAddressField, cityField, stateField, zipCodeField]; - // Analyze the response and decide if the address is valid or not. const uspsApiResponse = await addressUSPSValidation(streetAddressField.value, cityField.value, stateField.value, zipCodeField.value); const response = uspsResponseParser(uspsApiResponse, streetAddressField.value, cityField.value, zipCodeField.value); @@ -385,14 +384,12 @@ window.addEventListener("load", function () { } // Change attributes so that autofill works in state input - let stateSelectBox = document.getElementsByName("ins")[0]; + let stateSelectBox = document.getElementsByName("select-dropdown")[0]; stateSelectBox.setAttribute("autocomplete","country"); let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); - - }); (function() { diff --git a/web/themes/custom/usagov/scripts/lookup.js b/web/themes/custom/usagov/scripts/lookup.js index 3442cad856..ab98b45ab0 100644 --- a/web/themes/custom/usagov/scripts/lookup.js +++ b/web/themes/custom/usagov/scripts/lookup.js @@ -483,7 +483,7 @@ function load() { let inputStreet = searchParams.get('input-street'); let inputCity = searchParams.get('input-city'); - let inputState = searchParams.get('ins'); + let inputState = searchParams.get('select-dropdown'); let inputZip = searchParams.get('input-zip'); let normalizedAddress = inputStreet + ", " + inputCity + ", " + inputState + " " + inputZip; let displayAddress = document.getElementById("display-address"); diff --git a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig index 3e7bb851f4..39eaa8dae6 100644 --- a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig +++ b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig @@ -85,7 +85,7 @@ From 9155c145acac2855f3c39812b800c0677bc7b690 Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Thu, 19 Sep 2024 08:36:01 -0400 Subject: [PATCH 09/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Check if Firefox --- .../custom/usagov/scripts/accessibility.js | 26 +++++++++++++++++++ web/themes/custom/usagov/scripts/lookup.js | 2 ++ 2 files changed, 28 insertions(+) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index 89036d0c18..3710a83f4a 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -383,6 +383,9 @@ window.addEventListener("load", function () { toggleButtons[i].removeAttribute("tabindex"); } + // Code for autocomplete state fields + var isFirefox = typeof InstallTrigger !== 'undefined'; + // Change attributes so that autofill works in state input let stateSelectBox = document.getElementsByName("select-dropdown")[0]; stateSelectBox.setAttribute("autocomplete","country"); @@ -390,6 +393,29 @@ window.addEventListener("load", function () { let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); + if (isFirefox) { + // setting autocomplete to off for firefox + stateSelectBox.setAttribute("autocomplete","address-level1"); + stateInputBox.setAttribute("autocomplete","address-level1"); + } + + // Code for output -- delete later + const stateInput = document.getElementById("input-state"); + const stateSelect = document.getElementsByName("select-dropdown")[0]; + + stateInput.addEventListener("change", function (e) { + console.log(`The input CHANGED value ${e.target.value}`); + }); + stateInput.addEventListener("input", function (e) { + console.log(`The input has value ${e.target.value}`); + }); + + stateSelect.addEventListener("change", function (e) { + console.log(`The select CHANGED value ${e.target.value}`); + }); + stateSelect.addEventListener("input", function (e) { + console.log(`The select has value ${e.target.value}`); + }); }); (function() { diff --git a/web/themes/custom/usagov/scripts/lookup.js b/web/themes/custom/usagov/scripts/lookup.js index ab98b45ab0..55a085c53c 100644 --- a/web/themes/custom/usagov/scripts/lookup.js +++ b/web/themes/custom/usagov/scripts/lookup.js @@ -484,6 +484,8 @@ function load() { let inputStreet = searchParams.get('input-street'); let inputCity = searchParams.get('input-city'); let inputState = searchParams.get('select-dropdown'); + console.log(`stateField from lookup : ${inputState}`); + let inputZip = searchParams.get('input-zip'); let normalizedAddress = inputStreet + ", " + inputCity + ", " + inputState + " " + inputZip; let displayAddress = document.getElementById("display-address"); From d5c77be69453a3a7bbd2e4af7fc46d27ada13c0f Mon Sep 17 00:00:00 2001 From: IsabelLaurenceau Date: Thu, 19 Sep 2024 08:48:30 -0400 Subject: [PATCH 10/10] USAGOV-1548-CEO-STATE-AND-COUNTRY: Check if Chrome Instead --- .../custom/usagov/scripts/accessibility.js | 42 +++++-------------- web/themes/custom/usagov/scripts/lookup.js | 1 - ...m-twig-content-elected-officials.html.twig | 2 +- ...wig-content-funcionarios-electos.html.twig | 2 +- 4 files changed, 12 insertions(+), 35 deletions(-) diff --git a/web/themes/custom/usagov/scripts/accessibility.js b/web/themes/custom/usagov/scripts/accessibility.js index 3710a83f4a..5ffc55c3d5 100644 --- a/web/themes/custom/usagov/scripts/accessibility.js +++ b/web/themes/custom/usagov/scripts/accessibility.js @@ -373,49 +373,27 @@ window.addEventListener("load", function () { "use strict"; let clearButtonWrappers = document.getElementsByClassName("usa-combo-box__clear-input__wrapper"); - for (let i = 0; i < clearButtonWrappers.length; i++) { - clearButtonWrappers[i].remove(); + for (const clearButtonWrapper of clearButtonWrappers) { + clearButtonWrapper.remove(); } // Include the dropdown menu's toggle button in the tab order let toggleButtons = document.getElementsByClassName("usa-combo-box__toggle-list"); - for (let i = 0; i < toggleButtons.length; i++) { - toggleButtons[i].removeAttribute("tabindex"); + for (const toggleButton of toggleButtons) { + toggleButton.removeAttribute("tabindex"); } - // Code for autocomplete state fields - var isFirefox = typeof InstallTrigger !== 'undefined'; + // Code for autocomplete state fields + let isChromeOrEdge = navigator.userAgent.includes("Chrome"); // Change attributes so that autofill works in state input - let stateSelectBox = document.getElementsByName("select-dropdown")[0]; - stateSelectBox.setAttribute("autocomplete","country"); - - let stateInputBox = document.getElementById("input-state"); - stateInputBox.setAttribute("autocomplete","address-level1"); + if (isChromeOrEdge) { + let stateSelectBox = document.getElementsByName("select-dropdown")[0]; + stateSelectBox.setAttribute("autocomplete","country"); - if (isFirefox) { - // setting autocomplete to off for firefox - stateSelectBox.setAttribute("autocomplete","address-level1"); + let stateInputBox = document.getElementById("input-state"); stateInputBox.setAttribute("autocomplete","address-level1"); } - - // Code for output -- delete later - const stateInput = document.getElementById("input-state"); - const stateSelect = document.getElementsByName("select-dropdown")[0]; - - stateInput.addEventListener("change", function (e) { - console.log(`The input CHANGED value ${e.target.value}`); - }); - stateInput.addEventListener("input", function (e) { - console.log(`The input has value ${e.target.value}`); - }); - - stateSelect.addEventListener("change", function (e) { - console.log(`The select CHANGED value ${e.target.value}`); - }); - stateSelect.addEventListener("input", function (e) { - console.log(`The select has value ${e.target.value}`); - }); }); (function() { diff --git a/web/themes/custom/usagov/scripts/lookup.js b/web/themes/custom/usagov/scripts/lookup.js index 55a085c53c..28bbf85488 100644 --- a/web/themes/custom/usagov/scripts/lookup.js +++ b/web/themes/custom/usagov/scripts/lookup.js @@ -484,7 +484,6 @@ function load() { let inputStreet = searchParams.get('input-street'); let inputCity = searchParams.get('input-city'); let inputState = searchParams.get('select-dropdown'); - console.log(`stateField from lookup : ${inputState}`); let inputZip = searchParams.get('input-zip'); let normalizedAddress = inputStreet + ", " + inputCity + ", " + inputState + " " + inputZip; diff --git a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig index 7afee5ef84..1e682a4a58 100644 --- a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig +++ b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-elected-officials.html.twig @@ -87,7 +87,7 @@ class="usa-select" name="select-dropdown" id="input-state" - autocomplete="country" + autocomplete="off" required oninvalid="this.setCustomValidity('Fill out the state field.')" oninput="this.setCustomValidity('')"> diff --git a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig index 70c78922a6..54929f5bb6 100644 --- a/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig +++ b/web/themes/custom/usagov/templates/field--node--field-custom-twig-content-funcionarios-electos.html.twig @@ -59,7 +59,7 @@ name="select-dropdown" id="input-state" required - autocomplete="country" + autocomplete="off" oninvalid="this.setCustomValidity('Fill out the state field.')" oninput="this.setCustomValidity('')">