thisisdano · Oct 11, 2022 · Aug 8, 2022 · Aug 8, 2022 · Aug 8, 2022 · Aug 11, 2022
diff --git a/packages/usa-validation/src/index.js b/packages/usa-validation/src/index.js
@@ -1,14 +1,44 @@
 const behavior = require("../../uswds-core/src/js/utils/behavior");
 const validate = require("../../uswds-core/src/js/utils/validate-input");
+const { prefix: PREFIX } = require("../../uswds-core/src/js/config");
+const selectOrMatches = require("../../uswds-core/src/js/utils/select-or-matches");
+
+const VALIDATE_INPUT = "input[data-validation-element]";
+const CHECKLIST_ITEM = `.${PREFIX}-checklist__item`;
 
 function change() {
   validate(this);
 }
 
-const validator = behavior({
-  "keyup change": {
-    "input[data-validation-element]": change,
+const validator = behavior(
+  {
+    "input change": {
+      [VALIDATE_INPUT]: change,
+    },
   },
-});
+  {
+    init(root) {
+      selectOrMatches(VALIDATE_INPUT, root).forEach((item) => {
+        const validationParent = item.parentNode;
+        const checklistItems =
+          validationParent.querySelectorAll(CHECKLIST_ITEM);
+
+        item.setAttribute("aria-controls", "validate-code");
+        item.setAttribute("aria-live", "polite");
+        item.setAttribute("aria-atomic", true);
+
+        let inputLabel = "";
+        checklistItems.forEach((listItem) => {
+          const itemStatus = `${listItem.textContent} status incomplete`;
+          listItem.setAttribute("tabindex", "0");
+          listItem.setAttribute("aria-label", itemStatus);
+          inputLabel += `${itemStatus}. `;
+        });
+
+        item.setAttribute("aria-label", inputLabel);
+      });
+    },
+  }
+);
 
 module.exports = validator;
diff --git a/packages/usa-validation/src/test/template.html b/packages/usa-validation/src/test/template.html
@@ -1,15 +1,24 @@
 <div>
   <ul class="usa-checklist" id="validation_list">
-    <li class="usa-checklist__item" data-validator="length">Be at least 8 characters</li>
-    <li class="usa-checklist__item" data-validator="uppercase">Have at least 1 uppercase character</li>
-    <li class="usa-checklist__item" data-validator="numerical">Have at least 1 numerical character</li>
+    <li class="usa-checklist__item" data-validator="length">
+      Be at least 8 characters
+    </li>
+    <li class="usa-checklist__item" data-validator="uppercase">
+      Have at least 1 uppercase character
+    </li>
+    <li class="usa-checklist__item" data-validator="numerical">
+      Have at least 1 numerical character
+    </li>
   </ul>
   <input
     class="usa-input"
-    id="password" name="password" type="password"
+    id="password"
+    name="password"
+    type="password"
     aria-describedby="validation_list"
     data-validate-length=".{8,}"
     data-validate-uppercase="[A-Z]"
     data-validate-numerical="\d"
-    data-validation-element="validation_list">
+    data-validation-element="validation_list"
+  />
 </div>
diff --git a/packages/usa-validation/src/test/validator.spec.js b/packages/usa-validation/src/test/validator.spec.js
@@ -7,47 +7,61 @@ const TEMPLATE = fs.readFileSync(path.join(__dirname, "/template.html"));
 
 const INPUT_SELECTOR = "[data-validation-element]";
 const VALIDATORS = "[data-validator]";
+const VALIDATOR_LABEL = "[data-checklist-label]";
 const CHECKED_CLASS = "usa-checklist__item--checked";
 
+const inputSelector = () => document.querySelector(INPUT_SELECTOR);
+
 const keyup = (el) => {
-  el.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
 };
 
 const tests = [
   { name: "document.body", selector: () => document.body },
-  { name: "input", selector: () => document.querySelector(INPUT_SELECTOR) }
+  { name: "input", selector: inputSelector },
 ];
 
-tests.forEach(({name, selector: containerSelector}) => {
+tests.forEach(({ name, selector: containerSelector }) => {
   describe(`validator component initialized at ${name}`, () => {
     const { body } = document;
+
+    let root;
     let validated;
     let validators;
 
     beforeEach(() => {
       body.innerHTML = TEMPLATE;
 
-      validated = document.querySelector(INPUT_SELECTOR);
-      validators = Array.from(document.querySelectorAll(VALIDATORS));
-
       validator.on(containerSelector());
+
+      root = inputSelector();
+      validated = inputSelector();
+      validators = root.querySelectorAll(VALIDATORS);
     });
 
     afterEach(() => {
       validator.off(containerSelector());
       body.textContent = "";
     });
 
+    describe("initialization", () => {
+      it("creates a hidden span element in each list item", () => {
+        validators.forEach((checkbox) => {
+          assert.notStrictEqual(checkbox.queryElement(VALIDATOR_LABEL), null);
+        });
+      });
+    });
+
     describe("validation state", () => {
-      it("adds ." + CHECKED_CLASS + " for all successful validations", () => {
+      it(`adds .${CHECKED_CLASS} for all successful validations`, () => {
         validated.value = "GreatPassword1";
         keyup(validated);
         validators.forEach((checkbox) => {
           assert.strictEqual(checkbox.classList.contains(CHECKED_CLASS), true);
         });
       });
 
-      it("removes ." + CHECKED_CLASS + " for failed validations", () => {
+      it(`removes .${CHECKED_CLASS} for failed validations`, () => {
         validated.value = "GreatPassword";
         keyup(validated);
         validators.forEach((checkbox) => {

diff --git a/packages/usa-validation/src/usa-validation.twig b/packages/usa-validation/src/usa-validation.twig
@@ -5,7 +5,7 @@
       <div class="usa-alert__body">
         <h3 class="usa-alert__heading">Code requirements</h3>
         <ul class="usa-checklist" id="validate-code">
-          <li class="usa-checklist__item usa-checklist__item--checked" data-validator="uppercase">Use at least one uppercase character</li>
+          <li class="usa-checklist__item" data-validator="uppercase">Use at least one uppercase character</li>
           <li class="usa-checklist__item" data-validator="numerical">Use at least one number</li>
         </ul>
       </div>

diff --git a/packages/uswds-core/src/js/utils/validate-input.js b/packages/uswds-core/src/js/utils/validate-input.js
@@ -1,6 +1,5 @@
 const { prefix: PREFIX } = require("../config");
 
-const CHECKED = "aria-checked";
 const CHECKED_CLASS = `${PREFIX}-checklist__item--checked`;
 
 module.exports = function validate(el) {
@@ -14,6 +13,8 @@ module.exports = function validate(el) {
     throw new Error(`No validation element found with id: "${id}"`);
   }
 
+  // create element to hold aria-label content for input element
+  let inputLabel = "";
   Object.entries(el.dataset).forEach(([key, value]) => {
     if (key.startsWith("validate")) {
       const validatorName = key.substr("validate".length).toLowerCase();
@@ -27,7 +28,17 @@ module.exports = function validate(el) {
 
       const checked = validatorPattern.test(el.value);
       validatorCheckbox.classList.toggle(CHECKED_CLASS, checked);
-      validatorCheckbox.setAttribute(CHECKED, checked);
+
+      let validatorStatus = `${validatorCheckbox.textContent} status `;
+      if(validatorCheckbox.classList.contains(CHECKED_CLASS)){
+        validatorStatus += "complete";
+      } else{
+        validatorStatus += "incomplete";
+      };
+
+      validatorCheckbox.setAttribute("aria-label", validatorStatus);
+      inputLabel += `${validatorStatus}. `;
+      el.setAttribute("aria-label", inputLabel);
     }
   });
 };