genesys-spark-components 4.0.0-beta.9 → 4.0.1

package/dist/collection/components/stable/gux-modal/gux-modal.css

@@ -1,76 +1,86 @@
-:host .gux-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--gux-zindex-modal, 1);
+/*
+ * Typography styles and mixins.
+ */
+/* Headings */
+/* Body Copy */
+/* Anchor */
+::slotted(button:active:enabled) {
+  color: var(--gse-ui-link-active-foregroundColor);
+  text-decoration: underline;
+  background: none;
+}
+
+slot[name=start-align-buttons]::slotted(:not(button, gux-button-slot)) {
   display: flex;
+  flex-direction: row;
+  gap: var(--gse-ui-modal-buttonBar-gap);
+  align-content: flex-start;
   align-items: center;
-  justify-content: center;
-  color: #2e394c;
-  background: rgba(32, 41, 55, 0.8);
 }
-:host .gux-modal .gux-modal-container {
-  box-shadow: 0 8px 24px rgba(32, 41, 55, 0.4);
-  position: relative;
+
+:host dialog {
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
   justify-content: space-between;
-  padding: 40px;
-  background: #fdfdfd;
   border: 1px solid #b4bccb;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-modal-borderRadius);
+  box-shadow: var(--gse-ui-modal-boxShadow-x) var(--gse-ui-modal-boxShadow-y) var(--gse-ui-modal-boxShadow-blur) var(--gse-ui-modal-boxShadow-spread) var(--gse-ui-modal-boxShadow-color);
+}
+:host dialog::backdrop {
+  background: rgba(77, 97, 130, 0.8);
+}
+:host dialog .gux-modal-container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gse-ui-modal-padding);
 }
-:host .gux-modal .gux-modal-container.gux-small {
-  width: 416px;
+:host dialog .gux-modal-container.gux-small {
+  width: var(--gse-ui-modal-small-width);
   max-height: min(368px, 100vh - 2 * 24px);
 }
-:host .gux-modal .gux-modal-container.gux-medium {
-  width: 672px;
+:host dialog .gux-modal-container.gux-medium {
+  width: var(--gse-ui-modal-medium-width);
   max-height: min(640px, 100vh - 2 * 24px);
 }
-:host .gux-modal .gux-modal-container.gux-large {
-  width: 940px;
+:host dialog .gux-modal-container.gux-large {
+  width: var(--gse-ui-modal-large-width);
   max-height: min(640px, 100vh - 2 * 24px);
 }
-:host .gux-modal .gux-modal-container.gux-dynamic {
-  max-width: calc(100vw - 2 * 24px);
-  max-height: calc(100vh - 2 * 24px);
+:host dialog .gux-modal-container.gux-dynamic {
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
 }
-:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content {
+:host dialog .gux-modal-container.gux-dynamic .gux-modal-content {
   max-height: none;
 }
-:host .gux-modal .gux-modal-container .gux-modal-header {
-  padding-bottom: 24px;
+:host dialog .gux-modal-container .gux-modal-header {
   margin: 0;
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
+  font-family: var(--gse-ui-modal-heading-fontFamily);
+  font-size: var(--gse-ui-modal-heading-fontSize);
+  font-weight: var(--gse-ui-modal-heading-fontWeight);
+  line-height: var(--gse-ui-modal-heading-fontFamily);
+  color: var(--gse-ui-modal-headerColor);
+  letter-spacing: var(--gse-ui-modal-heading-letterSpacing);
+  font-family: var(--gse-core-typography-heading-xl-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;
+  font-size: var(--gse-core-typography-heading-xl-fontSize);
+  line-height: var(--gse-core-typography-heading-xl-lineHeight);
+  font-weight: var(--gse-core-fontWeight-bold);
 }
-:host .gux-modal .gux-modal-container .gux-modal-content {
+:host dialog .gux-modal-container .gux-modal-content {
   max-height: 432px;
-  margin: 0 8px 24px;
+  margin-top: var(--gse-ui-modal-gap);
+  margin-bottom: var(--gse-ui-modal-gap);
   overflow-y: auto;
 }
-:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons {
+:host dialog .gux-modal-container .gux-modal-content.gux-no-buttons {
   margin-bottom: 0;
 }
-:host .gux-modal .gux-modal-container .gux-button-footer {
+:host dialog .gux-modal-container .gux-button-footer {
   display: flex;
   justify-content: space-between;
 }
-:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button {
-  padding-right: 5px;
-}
-:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button {
-  padding-left: 5px;
-}
 @media (max-width: 416px) {
-  :host .gux-modal .gux-modal-container.gux-small,
-  :host .gux-modal .gux-modal-container.gux-medium,
-  :host .gux-modal .gux-modal-container.gux-large {
+  :host dialog .gux-modal-container.gux-small, :host dialog .gux-modal-container.gux-medium, :host dialog .gux-modal-container.gux-large {
     width: 100%;
     height: 100%;
   }
-}
+}

package/dist/collection/components/stable/gux-modal/gux-modal.js

@@ -1,85 +1,70 @@
-import { h } from '@stencil/core';
-import { randomHTMLId } from '@utils/dom/random-html-id';
-import { trackComponent } from '@utils/tracking/usage';
-/**
- * @slot content - Required slot for the modal content
- * @slot left-align-buttons - Optional slot to set gux-buttons aligned to the left of the modal
- * @slot right-align-buttons - Optional slot to set gux-buttons aligned to the left of the modal
- * @slot title - Optional slot to set the modal title
- */
+import { h } from "@stencil/core";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+import { trackComponent } from "../../../utils/tracking/usage";
 export class GuxModal {
   constructor() {
     this.size = 'dynamic';
-    this.trapFocus = true;
-    this.initialFocus = undefined;
-  }
-  handleKeyEvent(event) {
-    if (event.key === 'Escape') {
-      this.onDismissHandler(event);
+    this.open = false;
+  }
+  /**
+   * "Renders" the open state of the modal
+   */
+  syncOpenState() {
+    if (this.open) {
+      this.dialogElement.showModal();
+    }
+    else {
+      this.dialogElement.close();
     }
   }
-  connectedCallback() {
-    this.triggerElement = document.activeElement;
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async showModal() {
+    this.open = true;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async close() {
+    this.open = false;
   }
   componentWillLoad() {
-    const trapFocusVariant = this.trapFocus ? 'trapfocuson' : 'trapfocusoff';
-    const componentVariant = `${this.size}-${trapFocusVariant}`;
-    trackComponent(this.root, { variant: componentVariant });
+    trackComponent(this.root, { variant: `${this.size}` });
   }
   componentDidLoad() {
-    var _a, _b, _c;
-    const initialFocusElement = this.getInitialFocusElement();
-    if (initialFocusElement) {
-      // using .focus?.() instead of .focus() as a workaround for a Stencil bug in unit tests
-      // https://github.com/ionic-team/stencil/issues/1964
-      (_a = initialFocusElement.focus) === null || _a === void 0 ? void 0 : _a.call(initialFocusElement);
-    }
-    else if (this.dismissButton) {
-      (_c = (_b = this.dismissButton).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
-    }
+    this.syncOpenState();
+  }
+  hasModalTitleSlot() {
+    return Boolean(this.root.querySelector('[slot="title"]'));
+  }
+  hasFooterButtons() {
+    return (Boolean(this.root.querySelector('[slot="start-align-buttons"]')) ||
+      Boolean(this.root.querySelector('[slot="end-align-buttons"]')));
   }
   render() {
     const hasModalTitleSlot = this.hasModalTitleSlot();
     const hasFooterButtons = this.hasFooterButtons();
     const titleID = randomHTMLId();
-    return (h("div", { class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { class: {
+    return (h("dialog", { onClose: this.onCloseHandler.bind(this), ref: el => (this.dialogElement = el), "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { class: `gux-modal-container gux-${this.size}` }, h("gux-dismiss-button", { onClick: this.onDismissHandler.bind(this) }), hasModalTitleSlot && this.renderTitle(titleID), h("div", { class: {
         'gux-modal-content': true,
         'gux-no-buttons': !hasFooterButtons
-      } }, h("p", null, h("slot", { name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+      } }, h("p", null, h("slot", { name: "content" }))), hasFooterButtons && this.renderButtonFooter())));
   }
-  // When trap-focus is enabled, focusing this element
-  // will immediately redirect focus back to the dismiss button at the top of the modal.
-  renderModalTrapFocusEl() {
-    if (this.trapFocus) {
-      return (h("span", { onFocus: () => this.dismissButton.focus(), tabindex: "0" }));
-    }
+  renderTitle(titleID) {
+    return (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" })));
   }
-  getInitialFocusElement() {
-    return this.initialFocus
-      ? this.root.querySelector(this.initialFocus)
-      : undefined;
+  renderButtonFooter() {
+    return (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-start-align-buttons" }, h("slot", { name: "start-align-buttons" })), h("div", { class: "gux-end-align-buttons" }, h("slot", { name: "end-align-buttons" }))));
   }
-  hasModalTitleSlot() {
-    return Boolean(this.root.querySelector('[slot="title"]'));
+  onCloseHandler() {
+    this.guxdismiss.emit();
   }
-  hasFooterButtons() {
-    return (Boolean(this.root.querySelector('[slot="left-align-buttons"]')) ||
-      Boolean(this.root.querySelector('[slot="right-align-buttons"]')));
-  }
-  onDismissHandler(event) {
-    var _a;
-    event.stopPropagation();
-    const dismissEvent = this.guxdismiss.emit();
-    if (!dismissEvent.defaultPrevented) {
-      this.root.remove();
-      (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+  onDismissHandler() {
+    this.dialogElement.close();
   }
   static get is() { return "gux-modal"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-modal.less"]
+      "$": ["gux-modal.scss"]
     };
   }
   static get styleUrls() {
@@ -98,7 +83,8 @@ export class GuxModal {
           "references": {
             "GuxModalSize": {
               "location": "import",
-              "path": "./gux-modal.types"
+              "path": "./gux-modal.types",
+              "id": "src/components/stable/gux-modal/gux-modal.types.ts::GuxModalSize"
             }
           }
         },
@@ -112,9 +98,9 @@ export class GuxModal {
         "reflect": false,
         "defaultValue": "'dynamic'"
       },
-      "trapFocus": {
+      "open": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -124,28 +110,11 @@ export class GuxModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Indicates/sets whether or not the modal is open. On a native dialog, you should not toggle the\nopen attribute, due to the unusual behaviors described [here](https://html.spec.whatwg.org/multipage/interactive-elements.html#attr-dialog-open)\nIn this component, it is safe as this property acts as a proxy for calls to `showModal` and `close`."
         },
-        "attribute": "trap-focus",
+        "attribute": "open",
         "reflect": false,
-        "defaultValue": "true"
-      },
-      "initialFocus": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Query selector for the element to initially focus when the modal opens\nDefaults to the first tabbable element"
-        },
-        "attribute": "initial-focus",
-        "reflect": false
+        "defaultValue": "false"
       }
     };
   }
@@ -158,7 +127,7 @@ export class GuxModal {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when a user dismisses the modal (The default behaviour is to remove the component from the DOM)"
+          "text": "Fired when a user dismisses the modal"
         },
         "complexType": {
           "original": "void",
@@ -167,14 +136,49 @@ export class GuxModal {
         }
       }];
   }
+  static get methods() {
+    return {
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "root"; }
-  static get listeners() {
+  static get watchers() {
     return [{
-        "name": "keydown",
-        "method": "handleKeyEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
+        "propName": "open",
+        "methodName": "syncOpenState"
       }];
   }
 }

package/dist/collection/components/stable/gux-modal/tests/gux-modal.e2e.js

@@ -0,0 +1,285 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-modal', () => {
+  describe('#render', () => {
+    [
+      {
+        description: 'should render small modal',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render medium modal',
+        html: `
+          <gux-modal lang="en" size="medium">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render large modal',
+        html: `
+          <gux-modal lang="en" size="large">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal without a title',
+        html: `
+          <gux-modal lang="en" size="large">
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal without buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal with just left align buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render modal with just right align buttons',
+        html: `
+          <gux-modal lang="en" size="small">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      },
+      {
+        description: 'should render small modal by default',
+        html: `
+          <gux-modal lang="en">
+            <div slot="title">Modal Title</div>
+            <div slot="content">This contains the modal content.</div>
+            <div slot="start-align-buttons">
+                <gux-button-slot><button>Cancel</button></gux-button-slot>
+            </div>
+            <div slot="end-align-buttons">
+              <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+            </div>
+          </gux-modal>
+        `
+      }
+    ].forEach(({ description, html }) => {
+      it(description, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-modal');
+        expect(element.outerHTML).toMatchSnapshot();
+        element.setAttribute('hidden', true);
+        await page.waitForChanges();
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('dismiss', () => {
+    it('click dismiss button', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-modal');
+      const openModalButton = await page.find('#openModalButton');
+      await openModalButton.click();
+      await page.waitForChanges();
+      const dismissButtonElement = await element.find('pierce/gux-dismiss-button');
+      const dismissButton = await dismissButtonElement.find('pierce/button');
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      const clickSpy = await page.spyOnEvent('click');
+      await dismissButton.click();
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      expect(clickSpy).toHaveReceivedEvent();
+      expect(await page.find('gux-modal')).not.toBeNull();
+    });
+    it('escape key dismiss', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      const openModalButton = await page.find('#openModalButton');
+      await openModalButton.click();
+      await page.waitForChanges();
+      const guxdismissSpy = await page.spyOnEvent('guxdismiss');
+      expect(guxdismissSpy).not.toHaveReceivedEvent();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(guxdismissSpy).toHaveReceivedEvent();
+      await page.waitForSelector('pierce/dialog', {
+        visible: false
+      });
+    });
+  });
+  describe('focus', () => {
+    const getFocusedElementText = (page) => page.evaluate(() => document.activeElement.textContent);
+    const getFocusedShadowElementText = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement
+      .textContent);
+    const getFocusedShadowElementTagName = (page) => page.evaluate(() => document.querySelector('gux-modal').shadowRoot.activeElement.tagName);
+    it('focuses the dismiss button by default ', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
+      await page.waitForChanges();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+    });
+    test('can focus a specific focusable element', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button autofocus>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
+      await page.waitForChanges();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
+      expect(await getFocusedElementText(page)).toBe('Accept');
+    });
+    test('focuses the dismiss button if there are no other focusable elements', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">
+          Open
+        </gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="content">This contains the modal content.</div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
+      await page.waitForChanges();
+      await page.waitForSelector('pierce/dialog', {
+        visible: true
+      });
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+    });
+    test('returns focus to the originally focused element when the modal closes', async () => {
+      const html = `
+        <gux-button id="openModalButton" onclick="document.getElementById('example1').showModal()">Open Modal</gux-button>
+        <gux-modal id="example1" lang="en" size="small">
+          <div slot="title">Modal Title</div>
+          <div slot="content">This contains the modal content.</div>
+          <div slot="start-align-buttons">
+              <gux-button-slot><button>Cancel</button></gux-button-slot>
+          </div>
+          <div slot="end-align-buttons">
+            <gux-button-slot accent="primary"><button>Accept</button></gux-button-slot>
+          </div>
+        </gux-modal>
+      `;
+      const page = await newSparkE2EPage({ html });
+      await page.click('#openModalButton');
+      await page.waitForChanges();
+      expect(await getFocusedShadowElementText(page)).toBe('');
+      expect(await getFocusedShadowElementTagName(page)).toBe('GUX-DISMISS-BUTTON');
+      await page.keyboard.down('Escape');
+      await page.waitForChanges();
+      expect(await getFocusedElementText(page)).toBe('Open Modal');
+    });
+  });
+});