thisisdano · Feb 26, 2024 · May 12, 2023 · mahoneycm · Feb 5, 2024 · mahoneycm
diff --git a/packages/usa-validation/src/index.js b/packages/usa-validation/src/index.js
@@ -3,7 +3,8 @@ 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 VALIDATE_INPUT =
+  "input[data-validation-element],textarea[data-validation-element]";
 const CHECKLIST_ITEM = `.${PREFIX}-checklist__item`;
 
 // Trigger validation on input change

diff --git a/packages/usa-validation/src/test/template-textarea.html b/packages/usa-validation/src/test/template-textarea.html
@@ -0,0 +1,13 @@
+<div>
+  <ul class="usa-checklist" id="textarea_validation_list">
+    <li class="usa-checklist__item" data-validator="empty">Cannot by empty</li>
+  </ul>
+  <textarea
+    class="usa-textarea"
+    id="comment"
+    name="comment"
+    aria-describedby="textarea_validation_list"
+    data-validate-empty="\S"
+    data-validation-element="textarea_validation_list"
+  ></textarea>
+</div>
diff --git a/packages/usa-validation/src/test/validator-textarea.spec.js b/packages/usa-validation/src/test/validator-textarea.spec.js
@@ -0,0 +1,81 @@
+const fs = require("fs");
+const path = require("path");
+const assert = require("assert");
+const validator = require("../index");
+
+const TEMPLATE = fs.readFileSync(
+  path.join(__dirname, "/template-textarea.html")
+);
+
+const TEXTAREA_SELECTOR = "[data-validation-element]";
+const VALIDATORS = "[data-validator]";
+const VALIDATOR_SUMMARY = "[data-validation-status]";
+const CHECKED_CLASS = "usa-checklist__item--checked";
+
+const textareaSelector = () => document.querySelector(TEXTAREA_SELECTOR);
+
+const keyup = (el) => {
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+};
+
+const tests = [
+  { name: "document.body", selector: () => document.body },
+  { name: "textarea", selector: textareaSelector },
+];
+
+tests.forEach(({ name, selector: containerSelector }) => {
+  describe(`validator component initialized at ${name}`, () => {
+    const { body } = document;
+
+    let validated;
+    let validators;
+
+    beforeEach(() => {
+      body.innerHTML = TEMPLATE;
+
+      validator.on(containerSelector());
+
+      validated = textareaSelector();
+      validators = Array.from(document.querySelectorAll(VALIDATORS));
+    });
+
+    afterEach(() => {
+      validator.off(containerSelector());
+      body.textContent = "";
+    });
+
+    describe("initialization", () => {
+      it("creates a hidden span element for accessibility status summary readout", () => {
+        if (validators) {
+          assert.notStrictEqual(
+            document.querySelector(VALIDATOR_SUMMARY),
+            null
+          );
+        }
+      });
+    });
+
+    describe("validation state", () => {
+      it(`adds .${CHECKED_CLASS} for all successful validations`, () => {
+        validated.value = "This is one great comment!";
+        keyup(validated);
+        validators.forEach((checkbox) => {
+          assert.strictEqual(checkbox.classList.contains(CHECKED_CLASS), true);
+        });
+      });
+
+      it(`removes .${CHECKED_CLASS} for failed validations`, () => {
+        validated.value = "";
+        keyup(validated);
+        validators.forEach((checkbox) => {
+          const checked = checkbox.classList.contains(CHECKED_CLASS);
+          if (checkbox.getAttribute("data-validator") === "empty") {
+            assert.strictEqual(checked, false);
+          } else {
+            assert.strictEqual(checked, true);
+          }
+        });
+      });
+    });
+  });
+});
diff --git a/packages/usa-validation/src/usa-validation--textarea.twig b/packages/usa-validation/src/usa-validation--textarea.twig
@@ -0,0 +1,16 @@
+<form class="usa-form">
+  <fieldset class="usa-fieldset">
+    <legend class="usa-legend usa-legend--large">Enter a comment</legend>
+    <div class="usa-alert usa-alert--info usa-alert--validation">
+      <div class="usa-alert__body">
+        <h3 class="usa-alert__heading">Comment requirements</h3>
+        <ul class="usa-checklist" id="validate-comment">
+          <li class="usa-checklist__item" data-validator="empty">Cannot be empty</li>
+        </ul>
+      </div>
+    </div>
+    <label class="usa-label" for="code">Comment</label>
+    <textarea class="usa-textarea" id="comment" name="comment" data-validate-empty="\S" data-validation-element="validate-comment"></textarea>
+    <input class="usa-button" type="submit" value="Submit code">
+  </fieldset>
+</form>
diff --git a/packages/usa-validation/src/usa-validation.stories.js b/packages/usa-validation/src/usa-validation.stories.js
@@ -1,9 +1,12 @@
 import Component from "./usa-validation.twig";
+import TextareaComponent from "./usa-validation--textarea.twig";
 
 export default {
   title: "Components/Validation",
 };
 
 const Template = (args) => Component(args);
+const TextareaTemplate = (args) => TextareaComponent(args);
 
-export const Validation = Template.bind({});
+export const InputValidation = Template.bind({});
+export const TextareaValidation = TextareaTemplate.bind({});