tenants rights groups modal a11y fixes (#167)

* made modal dialog template a hbs partial

* moved  modal dialog partial to top of template

* added separate ModalDialog instance for tr groups modal

* updated hbs partial & styles for tr groups modal

* cleaned up TenantsRightsModal component

* added code comment to modal dialog template

* fixed failing tests for TenantsRightsModal

* updated doc string on TenantsRightsModal

* give ModalDialog a max-height

* updated failing test

* increased padding in modal body

* rm old tr-modal div from index.html

* made tr-modal trigger an html button

* set max-width on .button class

* renamed modal trigger class names

* renamed component TenantsRightsModal to TenantsRightsGroups

* renamed scss partial for tr modal content

Author: clhenrick

app/public/index.html

@@ -22,9 +22,6 @@
     <!-- handlebars templates are appended to "#wrapper" -->
     <div id="wrapper"></div>
 
-    <!-- modal for listing local tenants rights groups -->
-    <div id="open-modal" class="tr-modal"></div>
-
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-57236362-1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];

app/setupJest.js

@@ -43,6 +43,7 @@ function registerHbsPartials() {
   const partials = [
     "navigation",
     "navigation_info",
+    "modal_dialog",
     "language_toggle",
     "progress_indicator",
     "address_search_form",

app/src/components/tenantsRightsModal.js app/src/components/tenantsRightsGroups.jsapp/src/components/tenantsRightsModal.js renamed to app/src/components/tenantsRightsGroups.js

@@ -10,7 +10,12 @@ Handlebars.registerPartial("trGroups", template);
 export const ERROR_MISSING_COORDS =
   "Missing coordinates from address search result";
 
-export class TenantsRightsModal extends Component {
+/** Handles
+ * - If tenants rights groups exists, this component handles rendering the tenants rights group content in the corresponding dialog.modal--tenants-rights
+ * - toggling whether slide 8 says there are tenants rights groups in the search result area
+ * NOTE: modal dialog functionality handled by ModalDialog component
+ */
+export class TenantsRightsGroups extends Component {
   constructor(props) {
     super(props);
   }
@@ -25,7 +30,6 @@ export class TenantsRightsModal extends Component {
     this.handleSearchResultChange = this.handleSearchResultChange.bind(this);
     this.renderModalContents = this.renderModalContents.bind(this);
     this.getSearchCoords = this.getSearchCoords.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
 
     this.unsubscribeSearchResult = observeStore(
       this.store,
@@ -38,23 +42,6 @@ export class TenantsRightsModal extends Component {
       (state) => state.tenantsRights,
       this.handleTenantsRightsChange
     );
-
-    this.bindEvents();
-    this.maybeClearWindowHash();
-  }
-
-  bindEvents() {
-    document.addEventListener("keydown", this.handleKeyDown);
-  }
-
-  removeEvents() {
-    document.removeEventListener("keydown", this.handleKeyDown);
-  }
-
-  handleKeyDown(event) {
-    if (event.code === "Escape") {
-      this.maybeClearWindowHash();
-    }
   }
 
   handleSearchResultChange(result) {
@@ -100,16 +87,9 @@ export class TenantsRightsModal extends Component {
     throw new Error(ERROR_MISSING_COORDS);
   }
 
-  maybeClearWindowHash() {
-    if (/open-modal/.exec(window.location.hash)) {
-      window.location.hash = "";
-    }
-  }
-
   cleanUp() {
     this.unsubscribeTenantsRights();
     this.unsubscribeSearchResult();
-    this.removeEvents();
     this.element = null;
   }
 }

app/src/components/tenantsRightsGroups.spec.js

@@ -0,0 +1,103 @@
+import {
+  TenantsRightsGroups,
+  ERROR_MISSING_COORDS,
+} from "./tenantsRightsGroups";
+import { store } from "../store";
+
+jest.mock("../store");
+
+describe("TenantsRightsGroups", () => {
+  let element;
+  let tenantsRightsGroups;
+  let spyRenderModalContents;
+
+  beforeAll(() => {
+    setDocumentHtml(getMainHtml()); // eslint-disable-line no-undef
+    element = document.querySelector(
+      "dialog.modal--tenants-rights .modal--content"
+    );
+    spyRenderModalContents = jest.spyOn(
+      TenantsRightsGroups.prototype,
+      "renderModalContents"
+    );
+  });
+
+  beforeEach(() => {
+    tenantsRightsGroups = new TenantsRightsGroups({ store, element });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("The component's HTML exists", () => {
+    expect(element).not.toBeNull();
+  });
+
+  test("The consumer should be able to call new on TenantsRightsGroups", () => {
+    expect(tenantsRightsGroups).toBeTruthy();
+  });
+
+  test("getSearchCoords", () => {
+    const feature = {
+      geometry: {
+        coordinates: [-79, 41],
+      },
+    };
+    const result = tenantsRightsGroups.getSearchCoords(feature);
+    expect(result).toEqual({ lon: -79, lat: 41 });
+    expect(() =>
+      tenantsRightsGroups.getSearchCoords({ geometry: { coordinates: [] } })
+    ).toThrow(new Error(ERROR_MISSING_COORDS));
+  });
+
+  test("renderModalContents", () => {
+    const data = [{}, {}];
+    tenantsRightsGroups.renderModalContents(data);
+    expect(element.innerHTML).toBeTruthy();
+  });
+
+  test("handleSearchResultChange", () => {
+    const data = {
+      features: [
+        {
+          geometry: {
+            coordinates: [0, 0],
+          },
+        },
+      ],
+    };
+    tenantsRightsGroups.handleSearchResultChange(data);
+    expect(store.dispatch).toHaveBeenCalledWith(expect.any(Function));
+  });
+
+  test("handleTenantsRightsChange with results", () => {
+    const params = {
+      results: { rows: [{}, {}] },
+      status: "idle",
+    };
+    tenantsRightsGroups.handleTenantsRightsChange(params);
+    expect(tenantsRightsGroups.containerYes.classList.contains("hidden")).toBe(
+      false
+    );
+    expect(tenantsRightsGroups.containerNo.classList.contains("hidden")).toBe(
+      true
+    );
+    expect(spyRenderModalContents).toHaveBeenCalledWith([{}, {}]);
+  });
+
+  test("handleTenantsRightsChange without results", () => {
+    const params = {
+      results: { rows: [] },
+      status: "idle",
+    };
+    tenantsRightsGroups.handleTenantsRightsChange(params);
+    expect(tenantsRightsGroups.containerYes.classList.contains("hidden")).toBe(
+      true
+    );
+    expect(tenantsRightsGroups.containerNo.classList.contains("hidden")).toBe(
+      false
+    );
+    expect(spyRenderModalContents).not.toHaveBeenCalled();
+  });
+});

app/src/components/tenantsRightsModal.spec.js

@@ -0,0 +1,21 @@
+{{!-- template for the ModalDialog component. Only meant to be a shell, content must be provided separately --}}
+<dialog class="modal {{className}}">
+  <div class="modal--body">
+    <button class="button modal--close" aria-label="close">
+      <svg
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        stroke-width="4"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" />
+        <line x1="2" y1="22" x2="22" y2="2" stroke="currentColor" />
+      </svg>
+    </button>
+    <div class="modal--content">
+      {{> @partial-block }}
+    </div>
+  </div>
+</dialog>