uswds · thisisdano · Mar 11, 2021 · Feb 1, 2021 · Feb 2, 2021 · Feb 2, 2021
diff --git a/spec/unit/modal/modal.spec.js b/spec/unit/modal/modal.spec.js
@@ -0,0 +1,113 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const modal = require("../../../src/js/components/modal");
+
+const TEMPLATE = fs.readFileSync(path.join(__dirname, "template.html"));
+
+describe("Modal window", () => {
+  const { body } = document;
+
+  let closeButton;
+  let modalWrapper;
+  let modalWindow;
+  let openButton1;
+  let openButton2;
+  let overlay;
+
+  const isVisible = el => el.classList.contains("is-visible");
+
+  beforeEach(() => {
+    body.innerHTML = TEMPLATE;
+    modal.on();
+    closeButton = body.querySelector("#close-button");
+    modalWrapper = body.querySelector(".usa-modal-wrapper");
+    modalWindow = body.querySelector(".usa-modal");
+    overlay = body.querySelector(".usa-modal-overlay");
+    openButton1 = body.querySelector("#open-button1");
+    openButton2 = body.querySelector("#open-button2");
+  });
+
+  afterEach(() => {
+    body.innerHTML = "";
+    body.className = "";
+    modal.off();
+  });
+
+  describe("Builds the modal HTML", () => {
+
+    it('creates new parent elements', () => {
+      assert.ok(modalWindow, "creates inner div");
+      assert.ok(overlay, "creates the overlay");
+      assert.ok(modalWrapper, "creates the outer div");
+    });
+
+    it('adds role="dialog" to modal parent', () => {
+      assert.strictEqual(modalWrapper.getAttribute("role"), "dialog");
+    });
+
+    it('moves aria-lableledby, aria-describedby, and id to the parent', () => {
+      assert.strictEqual(modalWindow.hasAttribute("aria-describedby"), false);
+      assert.strictEqual(modalWindow.hasAttribute("aria-labelledby"), false);
+      assert.strictEqual(modalWindow.hasAttribute("id"), false);
+      assert.strictEqual(modalWrapper.hasAttribute("aria-describedby"), true);
+      assert.strictEqual(modalWrapper.hasAttribute("aria-labelledby"), true);
+      assert.strictEqual(modalWrapper.getAttribute("id"), "modal");
+    })
+
+    it('sets tabindex="-1" to the modal window', () => {
+      assert.strictEqual(modalWindow.getAttribute("tabindex"), "-1");
+    });
+
+    it('moves the modal to the bottom of the DOM', () => {
+      assert.strictEqual(body.lastElementChild.classList.contains("usa-modal-wrapper"), true);
+    });
+
+    it('adds role="button" to any <a> opener, but not <button>', () => {
+      assert.strictEqual(openButton1.getAttribute("role"), "button");
+      assert.strictEqual(openButton2.hasAttribute("role"), false);
+    })
+
+    it('adds aria-controls to each opener', () => {
+      assert.strictEqual(openButton1.getAttribute("aria-controls"), "modal");
+      assert.strictEqual(openButton2.getAttribute("aria-controls"), "modal");
+    })
+  });
+
+  describe("When opened", () => {
+    beforeEach(() => {
+      openButton1.click();
+    });
+
+    it("makes the modal visible", () => {
+      assert.strictEqual(isVisible(modalWrapper), true);
+    });
+
+    it("focuses the modal window when opened", () => {
+      assert.strictEqual(document.activeElement, modalWindow);
+    });
+  });
+
+  describe("When closing", () => {
+
+    beforeEach(() => {
+      openButton2.click();
+    });
+
+    it("hides the modal when close button is clicked", () => {
+      closeButton.click();
+      assert.strictEqual(isVisible(modalWrapper), false);
+    });
+
+    it("closes the modal when the overlay is clicked", () => {
+      overlay.click();
+      assert.strictEqual(isVisible(modalWrapper), false);
+    });
+
+    it("sends focus to the element that opened it", () => {
+      closeButton.click();
+      assert.strictEqual(document.activeElement, openButton2);
+    });
+  });
+});
diff --git a/spec/unit/modal/template.html b/spec/unit/modal/template.html
@@ -0,0 +1,37 @@
+<div aria-hidden="true" class="usa-sr-only" id="stays-hidden">
+  Needs to stay set to aria-hidden="true" when modals are toggled
+</div>
+
+<div id="other-content">
+</div>
+
+<div id="original-container">
+  <div>
+    <a id="open-button1" href="#modal" class="usa-button" aria-controls="modal" data-open-modal>Open modal</a>
+    <button id="open-button2" type="button" class="usa-button" aria-controls="modal" data-open-modal>Open modal</button>
+    <div class="usa-modal" id="modal" aria-labelledby="modalheading" aria-describedby="describe">
+      <div class="usa-modal__content">
+        <div class="usa-modal__main">
+          <h2 class="usa-modal__heading" id="modal-sm-heading">You have unsaved changes</h2>
+          <div id="describe" class="usa-prose">
+            <p>Your changes will be lost if you leave this page without saving. Are you sure you want to continue?</p>
+          </div>
+
+          <div class="usa-modal__footer">
+            <ul class="usa-button-group">
+              <li class="usa-button-group__item">
+                <button type="button" class="usa-button" data-close-modal>Continue</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <button id="close-button" class="usa-button usa-modal__close" aria-label="close this window"  data-close-modal>
+          <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+            <use xlink:href="{{ uswds.path }}/img/sprite.svg#close"></use>
+          </svg>
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/modal/modal.config.yml b/src/components/modal/modal.config.yml
@@ -0,0 +1,68 @@
+label: Modal
+status: ready
+preview: "@uswds-framed"
+
+context:
+  id: "example-modal-1"
+  modifier: ""
+  describedby: "modal-1-description"
+  trigger:
+    label: Open default modal
+  header:
+    label: Are you sure you want to continue?
+    id: "modal-1-heading"
+  description:
+    label: |
+      <p id="modal-1-description">You have unsaved changes that will be lost.</p>
+  footer:
+    - action:
+      class: "usa-button"
+      label: Continue without saving
+    - action:
+      class: "usa-button usa-button--unstyled padding-105 text-center"
+      label: Go back
+  close_button:
+    aria_label: "Close this window"
+    label:
+    icon_type: close
+
+variants:
+  - name: large modal
+    context:
+      id: "example-modal-2"
+      modifier: "usa-modal--lg"
+      describedby: "modal-2-description"
+      trigger:
+        label: Open large modal
+      header:
+        label: Are you sure you want to continue?
+        id: "modal-2-heading"
+      description:
+        label: |
+          <p id="modal-2-description">You have unsaved changes that will be lost.</p>
+      footer:
+        - action:
+          label: "Continue without saving"
+        - action:
+          class: "usa-button usa-button--unstyled padding-105 text-center"
+          label: "Go back"
+  - name: forced action
+    context:
+      id: "example-modal-3"
+      modifier:
+      forced: true
+      describedby: "modal-3-description"
+      trigger:
+        label: Open modal with forced action
+      header:
+        label: Your session will end soon.
+        id: "modal-3-heading"
+      description:
+        label: |
+          <p id="modal-3-description">You’ve been inactive for too long. Please choose to stay signed in or sign out. Otherwise, you’ll be signed out automatically in 5 minutes.</p>
+      footer:
+        - action:
+          label: "Yes, stay signed in"
+        - action:
+          class: "usa-button usa-button--unstyled padding-105 text-center"
+          label: "Sign out"
diff --git a/src/components/modal/modal.njk b/src/components/modal/modal.njk
@@ -0,0 +1,46 @@
+{% set close_icon %}
+  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+    <use xlink:href="{{ uswds.path }}/img/sprite.svg#{{ close_button.icon_type | default("close") }}"></use>
+  </svg>
+{% endset %}
+
+<div class="margin-y-3">
+  <a href="#{{ id }}" class="usa-button" aria-controls="{{ id }}" data-open-modal>{{ trigger.label }}</a>
+
+  <div class="usa-modal {{ modifier }}" id="{{ id }}" aria-labelledby="{{ header.label }}" aria-describedby="{{ describedby }}"{% if forced %} data-force-action{% endif -%}>
+    <div class="usa-modal__content">
+      <div class="usa-modal__main">
+        {% if header.label %}
+        <h2 class="usa-modal__heading" id="{{ header.id }}">
+          {{ header.label }}
+        </h2>
+        {% endif %}
+        {% if description.label %}
+        <div class="usa-prose">
+          {{ description.label | safe }}
+        </div>
+        {% endif %}
+        {% if footer %}
+        <div class="usa-modal__footer">
+          <ul class="usa-button-group">
+            {% for action in footer %}
+              <button type="button" class="{{ action.class | default("usa-button") }}" data-close-modal>
+                {{ action.label }}
+              </button>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+      </div>
+      {%- if not forced -%}
+      <button class="usa-button usa-modal__close" aria-label="{{ close_button.aria_label }}" data-close-modal>
+        {% if close_button.label %}
+          {{ close_button.label }}
+        {% else %}
+          {{ close_icon | safe }}
+        {% endif %}
+      </button>
+      {%- endif -%}
+    </div>
+  </div>
+</div>
diff --git a/src/components/test/kitchen-sink.njk b/src/components/test/kitchen-sink.njk
@@ -9,7 +9,7 @@
   <div class="usa-section">
     <div class="grid-container">
       {% render '@breadcrumb--metadata' %}
-      <div class="grid-row grid-gap">
+      <div class="grid-row grid-gap margin-top-4">
         <div class="desktop:grid-col-3 usa-layout-docs__sidenav">
           {% render '@sidenav', {sidenav: sidenav} %}
         </div>
@@ -19,6 +19,10 @@
           <p class="usa-content">
             {{ page.body | safe }}
 
+            {% render '@modal' %}
+            {% render '@modal--large-modal' %}
+            {% render '@modal--forced-action' %}
+
             <ul>
             {% for list in page.lists %}
               <li>{{ list }}</li>

diff --git a/src/js/components/index.js b/src/js/components/index.js
@@ -5,6 +5,7 @@ const comboBox = require("./combo-box");
 const fileInput = require("./file-input");
 const footer = require("./footer");
 const inputPrefixSuffix = require("./input-prefix-suffix");
+const modal = require("./modal");
 const navigation = require("./navigation");
 const password = require("./password");
 const search = require("./search");
@@ -26,6 +27,7 @@ module.exports = {
   fileInput,
   footer,
   inputPrefixSuffix,
+  modal,
   navigation,
   password,
   search,