@noctuatech/uswds 0.1.0 → 0.1.3

package/target/lib/file-input/file-input-preview/file-input-preview.element.js

@@ -5,67 +5,8 @@ let USAFileInputPreviewElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-file-input-preview",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-        font-size: 0.87rem;
-        pointer-events: none;
-        position: relative;
-        text-align: left;
-        word-wrap: anywhere;
-        z-index: 3;
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
-
-      img {
-        border: 0;
-        display: block;
-        height: 2.5rem;
-        margin-right: 0.5rem;
-        -o-object-fit: contain;
-        object-fit: contain;
-        width: 2.5rem;
-      }
-
-      .preview-heading {
-        align-items: center;
-        background: #d9e8f6;
-        display: flex;
-        pointer-events: none;
-        position: relative;
-        z-index: 3;
-        font-weight: 700;
-        justify-content: space-between;
-        padding: 0.5rem;
-        text-align: left;
-      }
-
-      .preview-item {
-        align-items: center;
-        background: #d9e8f6;
-        display: flex;
-        padding: 0.5rem;
-        width: 100%;
-        margin-top: 1px;
-      }
-    `,
-                html `
-      <template>
-        <div class="preview-item">
-          <img height="40" width="40" aria-hidden="true" style="display: none" />
-          <usa-icon icon="file_present" style="display: none"></usa-icon>
-        </div>
-      </template>
-
-      <slot class="preview-heading"></slot>
-    `,
+                css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{align-items:center;background:#d9e8f6;display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left}.preview-item{align-items:center;background:#d9e8f6;display:flex;padding:.5rem;width:100%;margin-top:1px}`,
+                html `<template><div class="preview-item"><img height="40" width="40" aria-hidden="true" style="display:none"><usa-icon icon="file_present" style="display:none"></usa-icon></div></template><slot class="preview-heading"></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/file-input/file-input-preview/file-input-preview.test.js

@@ -3,33 +3,21 @@ import "../../link/link.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-file-input-preview", () => {
     it("should be accessible with no files", async () => {
-        const fileInputPreview = await fixture(html `
-      <usa-file-input-preview>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
-    `);
+        const fileInputPreview = await fixture(html `<usa-file-input-preview>Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
         return assert.isAccessible(fileInputPreview);
     });
     it("should be accessible with files", async () => {
         const data = new DataTransfer();
         data.items.add(new File([], "image1.jpg"));
         data.items.add(new File([], "image2.jpg"));
-        const fileInputPreview = await fixture(html `
-      <usa-file-input-preview .files=${data.files}>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
-    `);
+        const fileInputPreview = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
         return assert.isAccessible(fileInputPreview);
     });
     it("should display file preview for images", async () => {
         const data = new DataTransfer();
         data.items.add(new File([], "image1.jpg"));
         data.items.add(new File([], "image2.jpg"));
-        const { shadowRoot } = await fixture(html `
-      <usa-file-input-preview .files=${data.files}>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
-    `);
+        const { shadowRoot } = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
         const previewItems = Array.from(shadowRoot?.querySelectorAll(".preview-item") ?? []).map((item) => item.textContent?.trim());
         assert.deepEqual(previewItems, ["image1.jpg", "image2.jpg"]);
     });
@@ -37,11 +25,7 @@ describe("usa-file-input-preview", () => {
         const data = new DataTransfer();
         data.items.add(new File([], "image1.jpg"));
         data.items.add(new File([], "image2.jpg"));
-        const fileInputPreview = await fixture(html `
-      <usa-file-input-preview .files=${data.files}>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
-    `);
+        const fileInputPreview = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
         const data2 = new DataTransfer();
         data2.items.add(new File([], "image1.jpg"));
         fileInputPreview.files = data2.files;
@@ -54,11 +38,7 @@ describe("usa-file-input-preview", () => {
         const data = new DataTransfer();
         data.items.add(new File(["Image1"], "image1.jpg", { type: "image/jpg" }));
         data.items.add(new File(["Image2"], "image2.jpg", { type: "image/jpg" }));
-        const { shadowRoot } = await fixture(html `
-      <usa-file-input-preview .files=${data.files}>
-        Selected file <usa-link>Change file</usa-link>
-      </usa-file-input-preview>
-    `);
+        const { shadowRoot } = await fixture(html `<usa-file-input-preview .files="${data.files}">Selected file<usa-link>Change file</usa-link></usa-file-input-preview>`);
         const [first, second] = Array.from(shadowRoot?.querySelectorAll(".preview-item img") ?? []).map((item) => item.src.substring(29));
         // we are just testing that the two hashes are in fact different
         assert.isFalse(first === second);

package/target/lib/file-input/file-input.element.js

@@ -5,88 +5,8 @@ let USAFileInputElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-file-input",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-        max-width: 30rem;
-        position: relative;
-        margin-bottom: 1.5rem;
-      }
-
-      label {
-        display: block;
-      }
-
-      input {
-        cursor: pointer;
-        left: 0;
-        margin: 0;
-        max-width: none;
-        position: absolute;
-        text-indent: -999em;
-        width: 100%;
-        z-index: 1;
-        bottom: 0;
-        top: 0;
-      }
-
-      input:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-
-      label slot.label {
-        font-size: 1.06rem;
-        line-height: 1.3;
-        display: block;
-        font-weight: 400;
-        margin-bottom: 0.5rem;
-      }
-
-      :host(.dragenter) .box {
-        border-color: #2491ff;
-      }
-
-      .box {
-        border: 1px dashed #adadad;
-        display: flex;
-        font-size: 0.93rem;
-        position: relative;
-        text-align: center;
-        width: 100%;
-        max-width: 30rem;
-        height: 5.2rem;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .container {
-        position: relative;
-      }
-    `,
-                html `
-      <label>
-        <slot class="label"></slot>
-
-        <div class="container">
-          <input type="file" tabindex="0"/>
-
-          <div class="box">
-            <slot name="description">
-              Drag file here or <usa-link>choose from folder</usa-link>
-            </slot>
-          </div>
-
-          <usa-file-input-preview>
-            Selected file <usa-link>Change file</usa-link>
-          </usa-file-input-preview>
-        </div>
-      </label>
-    `,
+                css `*{box-sizing:border-box}:host{display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}label{display:block}input{cursor:pointer;left:0;margin:0;max-width:none;position:absolute;text-indent:-999em;width:100%;z-index:1;bottom:0;top:0}input:focus{outline:.25rem solid #2491ff;outline-offset:0}label slot.label{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;margin-bottom:.5rem}:host(.dragenter) .box{border-color:#2491ff}.box{border:1px dashed #adadad;display:flex;font-size:.93rem;position:relative;text-align:center;width:100%;max-width:30rem;height:5.2rem;align-items:center;justify-content:center}.container{position:relative}`,
+                html `<label><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><div class="box"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div><usa-file-input-preview>Selected file<usa-link>Change file</usa-link></usa-file-input-preview></div></label>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/file-input/file-input.stories.js

@@ -9,19 +9,7 @@ const meta = {
             const data = new FormData(e.target);
             console.log(data.getAll("upload"));
         }
-        return html `
-      <form @submit=${onSubmit}>
-        <usa-file-input name="upload" required>
-          Input accepts a single file
-
-          <div slot="description">
-            Drag file here or <usa-link>choose from folder</usa-link>
-          </div>
-        </usa-file-input>
-
-        <usa-button type="submit">SUBMIT</usa-button>
-      </form>
-    `;
+        return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required>Input accepts a single file<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
     },
     argTypes: {},
     args: {},

package/target/lib/file-input/file-input.test.js

@@ -2,28 +2,14 @@ import "./file-input.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-file-input", () => {
     it("should be accessible", async () => {
-        const fileInput = await fixture(html `
-      <usa-file-input>Hello World</usa-file-input>
-    `);
+        const fileInput = await fixture(html `<usa-file-input>Hello World</usa-file-input>`);
         return assert.isAccessible(fileInput);
     });
     it("should submit files with the form", async () => {
         const data = new DataTransfer();
         data.items.add(new File([], "first.txt"));
         data.items.add(new File([], "second.txt"));
-        const form = await fixture(html `
-      <form>
-        <usa-file-input name="upload" .files=${data.files}>
-          Input accepts a single file
-
-          <div slot="description">
-            Drag file here or <usa-link>choose from folder</usa-link>
-          </div>
-        </usa-file-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-file-input name="upload" .files="${data.files}">Input accepts a single file<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><button>Submit</button></form>`);
         const formData = new FormData(form);
         const fileNames = formData.getAll("upload").map((file) => {
             if (file instanceof File) {

package/target/lib/icon/icon.element.js

@@ -6,20 +6,7 @@ let USAIconElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-icon",
             shadowDom: [
-                css `
-      :host {
-        display: inline-block;
-        height: 2rem;
-        position: relative;
-        width: 2rem;
-      }
-
-      svg {
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-      }
-    `,
+                css `:host{display:inline-block;height:2rem;position:relative;width:2rem}svg{fill:currentColor;height:100%;width:100%}`,
             ],
         }), injectable({
             name: "usa-icon-ctx",

package/target/lib/icon/icon.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: "usa-icon",
     tags: [],
     render(args) {
-        return html `<usa-icon icon=${args.icon}></usa-icon>`;
+        return html `<usa-icon icon="${args.icon}"></usa-icon>`;
     },
     argTypes: {},
     args: {},
@@ -22,18 +22,7 @@ export const AllIcons = {
                 console.error("Failed to copy: ", err);
             }
         }
-        return html `<div style="display: flex; flex-wrap: wrap; gap: .75rem;">
-      ${html `${ICON_TYPES.map((icon) => html `
-          <button
-            @click=${() => copyIcon(icon)}
-            style="padding: .5rem 1rem .5rem .5rem; cursor: pointer; background: #fff; border-radius: 4px; gap: .5rem; display: flex; align-items: center"
-          >
-            <usa-icon icon=${icon}></usa-icon>
-
-            ${icon}
-          </button>
-        `)}`}
-    </div>`;
+        return html `<div style="display:flex;flex-wrap:wrap;gap:.75rem">${html `${ICON_TYPES.map((icon) => html `<button @click="${() => copyIcon(icon)}" style="padding:.5rem 1rem .5rem .5rem;cursor:pointer;background:#fff;border-radius:4px;gap:.5rem;display:flex;align-items:center"><usa-icon icon="${icon}"></usa-icon>${icon}</button>`)}`}</div>`;
     },
 };
 //# sourceMappingURL=icon.stories.js.map

package/target/lib/input/input.element.js

@@ -5,79 +5,8 @@ let USATextInputElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-input",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        font-size: 1.06rem;
-        line-height: 1.3;
-        display: block;
-        font-weight: 400;
-        max-width: 30rem;
-        margin-bottom: 1.5rem;
-        position: relative;
-      }
-
-      input {
-        border-width: 1px;
-        border-color: #5c5c5c;
-        border-style: solid;
-        border-radius: 0;
-        color: #1b1b1b;
-        display: block;
-        height: 2.5rem;
-        line-height: 1.3;
-        font-size: 1.06rem;
-        margin-top: 0.5rem;
-        padding: 0.5rem;
-        width: 100%;
-      }
-
-      input:not(:disabled):focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-
-      slot[name="detail"]::slotted(*) {
-        color: #757575;
-      }
-
-      slot[name="detail"]::slotted(usa-icon) {
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-
-      slot[name="detail"] {
-        display: block;
-        position: absolute;
-        bottom: 0.21rem;
-        left: 0.5rem;
-      }
-
-      :host([detail="pfx"]) input {
-        padding-left: 2.5rem;
-      }
-
-      :host([detail="sfx"]) input {
-        padding-right: 2.5rem;
-      }
-
-      :host([detail="sfx"]) slot[name="detail"] {
-        right: 0.5rem;
-        left: auto;
-      }
-    `,
-                html `
-      <label>
-        <slot name="detail"></slot>
-
-        <slot></slot>
-
-        <input tabindex="0" />
-      </label>
-    `,
+                css `*{box-sizing:border-box}:host{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;max-width:30rem;margin-bottom:1.5rem;position:relative}input{border-width:1px;border-color:#5c5c5c;border-style:solid;border-radius:0;color:#1b1b1b;display:block;height:2.5rem;line-height:1.3;font-size:1.06rem;margin-top:.5rem;padding:.5rem;width:100%}input:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}slot[name=detail]::slotted(*){color:#757575}slot[name=detail]::slotted(usa-icon){width:1.5rem;height:1.5rem}slot[name=detail]{display:block;position:absolute;bottom:.21rem;left:.5rem}:host([detail=pfx]) input{padding-left:2.5rem}:host([detail=sfx]) input{padding-right:2.5rem}:host([detail=sfx]) slot[name=detail]{right:.5rem;left:auto}`,
+                html `<label><slot name="detail"></slot><slot></slot><input tabindex="0"></label>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/input/input.stories.js

@@ -4,21 +4,11 @@ const meta = {
     title: "usa-input",
     tags: ["autodocs"],
     render() {
-        return html `
-      <form @submit=${(e) => {
+        return html `<form @submit="${(e) => {
             e.preventDefault();
             const data = new FormData(e.target);
             console.log(Array.from(data.entries()));
-        }}>
-        <usa-input name="fname" autocomplete="off" detail="pfx">
-          <usa-icon icon="credit_card" slot="detail"></usa-icon>
-
-          First name
-        </usa-input>
-
-        <usa-button type="submit">Submit</usa-button>
-      </form>
-    `;
+        }}"><usa-input name="fname" autocomplete="off" detail="pfx"><usa-icon icon="credit_card" slot="detail"></usa-icon>First name</usa-input><usa-button type="submit">Submit</usa-button></form>`;
     },
     argTypes: {},
     args: {},

package/target/lib/input/input.test.js

@@ -3,30 +3,16 @@ import { assert, fixture, html } from "@open-wc/testing";
 import { userEvent } from "@testing-library/user-event";
 describe("usa-input", () => {
     it("should be accessible", async () => {
-        const form = await fixture(html `
-      <usa-input name="fname" value="Foo">Hello World</usa-input>
-    `);
+        const form = await fixture(html `<usa-input name="fname" value="Foo">Hello World</usa-input>`);
         return assert.isAccessible(form);
     });
     it("should submit form with default values", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-input name="fname" value="Foo">Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-input name="fname" value="Foo">Hello World</usa-input><button>Submit</button></form>`);
         const value = new FormData(form);
         assert.equal(value.get("fname"), "Foo");
     });
     it("should update form value as input value changed", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-input name="fname">Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-input name="fname">Hello World</usa-input><button>Submit</button></form>`);
         const input = form.querySelector("usa-input");
         const nativeInput = input?.shadowRoot?.querySelector("input");
         if (nativeInput) {
@@ -36,13 +22,7 @@ describe("usa-input", () => {
         assert.equal(value.get("fname"), "Bar");
     });
     it("should not submit when not valid", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-input name="fname" required>Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-input name="fname" required>Hello World</usa-input><button>Submit</button></form>`);
         assert.equal(form.checkValidity(), false);
     });
 });

package/target/lib/input-mask/input-mask.element.js

@@ -5,11 +5,7 @@ let USAInputMaskElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-input-mask",
             shadowDom: [
-                css `
-      :host {
-        display: contents;
-      }
-    `,
+                css `:host{display:contents}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/input-mask/input-mask.stories.js

@@ -4,18 +4,7 @@ const meta = {
     title: "input-mask",
     tags: ["autodocs"],
     render(args) {
-        return html `
-      <usa-input-mask>
-        <usa-input
-          name="phone"
-          placeholder=${args.mask}
-          autocomplete="off"
-          mask=${args.mask}
-        >
-          Phone:
-        </usa-input>
-      </usa-input-mask>
-    `;
+        return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}">Phone:</usa-input></usa-input-mask>`;
     },
     argTypes: {},
     args: {

package/target/lib/input-mask/input-mask.test.js

@@ -36,20 +36,12 @@ describe("format", () => {
 });
 describe("usa-input-mask", () => {
     it("should format default value", async () => {
-        const el = await fixture(html `
-      <usa-input-mask mask="(999) 999-9999">
-        <input name="phone" value="1234567890" mask />
-      </usa-input-mask>
-    `);
+        const el = await fixture(html `<usa-input-mask mask="(999) 999-9999"><input name="phone" value="1234567890" mask></usa-input-mask>`);
         const input = el.querySelector("input");
         assert.equal(input?.value, "(123) 456-7890");
     });
     it("should update value when on input event", async () => {
-        const el = await fixture(html `
-      <usa-input-mask>
-        <input name="phone" mask="(999) 999-9999" />
-      </usa-input-mask>
-    `);
+        const el = await fixture(html `<usa-input-mask><input name="phone" mask="(999) 999-9999"></usa-input-mask>`);
         const input = el.querySelector("input");
         if (input) {
             input.value = "8888888888";
@@ -60,24 +52,12 @@ describe("usa-input-mask", () => {
 });
 describe("usa-input-mask with usa-input", () => {
     it("should format default value", async () => {
-        const el = await fixture(html `
-      <usa-input-mask mask="(999) 999-9999">
-        <usa-input name="phone" value="1234567890" id="TEST" mask></usa-input>
-      </usa-input-mask>
-    `);
+        const el = await fixture(html `<usa-input-mask mask="(999) 999-9999"><usa-input name="phone" value="1234567890" id="TEST" mask></usa-input></usa-input-mask>`);
         const input = el.querySelector("usa-input");
         assert.equal(input?.value, "(123) 456-7890");
     });
     it("should update value when on input event", async () => {
-        const el = await fixture(html `
-      <usa-input-mask>
-        <usa-input
-          name="phone"
-          value="1234567890"
-          mask="(999) 999-9999"
-        ></usa-input>
-      </usa-input-mask>
-    `);
+        const el = await fixture(html `<usa-input-mask><usa-input name="phone" value="1234567890" mask="(999) 999-9999"></usa-input></usa-input-mask>`);
         const input = el.querySelector("usa-input");
         if (input) {
             input.value = "8888888888";

package/target/lib/link/link.element.js

@@ -4,24 +4,8 @@ let USALinkElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-link",
             shadowDom: [
-                css `
-      :host {
-        display: inline-flex;
-        color: #005ea2;
-        text-decoration: underline;
-      }
-
-      a {
-        color: inherit;
-        text-decoration: inherit;
-        display: inherit;
-      }
-    `,
-                html `
-      <a>
-        <slot></slot>
-      </a>
-    `,
+                css `:host{display:inline-flex;color:#005ea2;text-decoration:underline}a{color:inherit;text-decoration:inherit;display:inherit}`,
+                html `<a><slot></slot></a>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-close/modal-close.element.js

@@ -4,42 +4,8 @@ let USAModalCloseElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal-close",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        cursor: pointer;
-        height: 100%;
-        width: 100%;
-        border-radius: 100%;
-        padding: 0;
-        margin: 0;
-      }
-
-      button:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-    `,
-                html `
-      <button aria-label="close modal">
-        <usa-icon icon="close"></usa-icon>
-      </button>
-    `,
+                css `*{box-sizing:border-box}:host{display:block;position:absolute;top:1rem;right:1rem}button{display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;height:100%;width:100%;border-radius:100%;padding:0;margin:0}button:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<button aria-label="close modal"><usa-icon icon="close"></usa-icon></button>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-close/modal-close.test.js

@@ -2,9 +2,7 @@ import "./modal-close.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal-close", () => {
     it("should be accessible", async () => {
-        const modalClose = await fixture(html `
-      <usa-modal-close>Hello World</usa-modal-close>
-    `);
+        const modalClose = await fixture(html `<usa-modal-close>Hello World</usa-modal-close>`);
         return assert.isAccessible(modalClose);
     });
 });