From ea3dfa7bf88cbf0f23ab51c05b73aeb209beec1a Mon Sep 17 00:00:00 2001
From: amyleadem <amy.leadem@bixal.com>
Date: Fri, 26 Apr 2024 13:28:05 -0700
Subject: [PATCH] Use validate() on it; move debounce to index.js

---
 packages/usa-validation/src/index.js               | 8 ++++++--
 packages/uswds-core/src/js/utils/validate-input.js | 9 ++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/usa-validation/src/index.js b/packages/usa-validation/src/index.js
index 776abb237b..2e12d61053 100755
--- a/packages/usa-validation/src/index.js
+++ b/packages/usa-validation/src/index.js
@@ -1,5 +1,6 @@
 const behavior = require("../../uswds-core/src/js/utils/behavior");
 const validate = require("../../uswds-core/src/js/utils/validate-input");
+const debounce = require("../../uswds-core/src/js/utils/debounce");
 const { prefix: PREFIX } = require("../../uswds-core/src/js/config");
 const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches");
 
@@ -7,8 +8,10 @@ const VALIDATE_INPUT =
   "input[data-validation-element],textarea[data-validation-element]";
 const CHECKLIST_ITEM = `.${PREFIX}-checklist__item`;
 
-// Trigger validation on input change
-const handleChange = (el) => validate(el);
+// Trigger validation on input change, after a delay
+const handleChange = debounce((el) => {
+  validate(el);
+}, 1000);
 
 // Create container to hold aria readout
 const createStatusElement = (input) => {
@@ -49,6 +52,7 @@ const createInitialStatus = (input) => {
 const enhanceValidation = (input) => {
   createStatusElement(input);
   createInitialStatus(input);
+  validate(input);
 };
 
 const validator = behavior(
diff --git a/packages/uswds-core/src/js/utils/validate-input.js b/packages/uswds-core/src/js/utils/validate-input.js
index 28fb8fb8f7..f28335c2a4 100755
--- a/packages/uswds-core/src/js/utils/validate-input.js
+++ b/packages/uswds-core/src/js/utils/validate-input.js
@@ -1,4 +1,3 @@
-const debounce = require("./debounce");
 const { prefix: PREFIX } = require("../config");
 
 const CHECKED_CLASS = `${PREFIX}-checklist__item--checked`;
@@ -51,12 +50,12 @@ module.exports = function validate(el) {
       // Create a summary of status for all checklist items
       statusSummary += `${checkboxContent}. `;
 
-      // Add summary to screen reader summary container, after a delay
-      const srUpdateStatus = debounce(() => {
+      // Add summary to screen reader summary container
+      const createSrStatus = () =>{
         statusSummaryContainer.textContent = statusSummary;
-      }, 1000);
+      }
 
-      srUpdateStatus();
+      createSrStatus();
     }
   });
 };