@duetds/components 7.0.13 → 7.1.1

package/lib/collection/components/duet-modal/duet-modal.js

@@ -8,6 +8,7 @@ import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { Teleport } from "../../utils/teleport";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
@@ -115,6 +116,7 @@ export class DuetModal {
       this.open = true;
       this.modalEl.classList.add("duet-disable-transitions");
     }
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
@@ -221,7 +223,8 @@ export class DuetModal {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -250,7 +253,8 @@ export class DuetModal {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -297,7 +301,8 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
             }
           }
         },
@@ -407,7 +412,8 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
             }
           }
         },
@@ -430,7 +436,8 @@ export class DuetModal {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -471,7 +478,8 @@ export class DuetModal {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -494,7 +502,8 @@ export class DuetModal {
           "references": {
             "DuetVisualHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
             }
           }
         },
@@ -516,7 +525,8 @@ export class DuetModal {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -539,7 +549,8 @@ export class DuetModal {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -643,7 +654,8 @@ export class DuetModal {
           "references": {
             "DuetModalCloseEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
+              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
             }
           }
         }
@@ -657,7 +669,8 @@ export class DuetModal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -673,7 +686,8 @@ export class DuetModal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-multiselect/duet-multiselect.e2e.js

@@ -0,0 +1,96 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-multiselect", () => {
+  it("should render a multiselect", async () => {
+    const page = await createPage(`<duet-multiselect></duet-multiselect>`);
+    const component = await page.find("duet-multiselect");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-multiselect label="test"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-multiselect margin="none"></duet-multiselect>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-multiselect theme="turva"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the  disabled", async () => {
+    const page = await createPage(`<duet-multiselect disabled></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID", async () => {
+    const page = await createPage(`<duet-multiselect identifier="test"></duet-multiselect>`);
+    const element = await page.find("duet-multiselect >>> .duet-multiselect");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that renders select all and and clear all buttons", async () => {
+    const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    expect(selectAll).not.toBeNull();
+    expect(clearAll).not.toBeNull();
+  });
+  it("should not render select all and and clear all buttons if there are no items", async () => {
+    const page = await createPage(`<duet-multiselect all-controls></duet-multiselect>`);
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    expect(selectAll).toBeNull();
+    expect(clearAll).toBeNull();
+  });
+  it("should select and clear all when clicking the corresponding buttons", async () => {
+    const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect");
+    const multiselectTrigger = await page.find("duet-multiselect >>> .duet-multiselect");
+    const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
+    const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
+    await multiselectTrigger.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(0);
+    await selectAll.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(2);
+    await clearAll.click();
+    expect(await multiselect.getProperty("value")).toHaveLength(0);
+  });
+  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+    const page = await createPage(`<duet-multiselect label="Checked" items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect >>> .duet-multiselect");
+    await multiselect.click();
+    const checkbox = await page.find("duet-multiselect >>> duet-checkbox");
+    const changeEventSpy = await checkbox.spyOnEvent("duetChange");
+    checkbox.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    await checkbox.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-multiselect label="Checked" value="test"></duet-multiselect>`);
+    const multiselect = await page.find("duet-multiselect");
+    const focusEventSpy = await multiselect.spyOnEvent("duetFocus");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on blur", async () => {
+    const page = await createPage(`
+      <duet-multiselect label="Checked" value="test"></duet-multiselect>
+      <button>another focusable element</button>
+    `);
+    const multiselect = await page.find("duet-multiselect");
+    const blurEventSpy = await multiselect.spyOnEvent("duetFocus");
+    // focus then blur the checkbox
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveReceivedEvent();
+  });
+});

package/lib/collection/components/duet-multiselect/duet-multiselect.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
   return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
@@ -161,6 +162,9 @@ export class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -228,7 +232,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -305,7 +310,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
             }
           }
         },
@@ -326,7 +332,8 @@ export class DuetMultiselect {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -438,7 +445,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
             }
           }
         },
@@ -531,7 +539,8 @@ export class DuetMultiselect {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -572,7 +581,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -592,7 +602,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -612,7 +623,8 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+              "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
             }
           }
         }
@@ -629,10 +641,12 @@ export class DuetMultiselect {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-nav/duet-nav.js

@@ -48,7 +48,8 @@ export class DuetNav {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

package/lib/collection/components/duet-notification/duet-notification.e2e.js

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-notification", () => {
+  it("should render a notification", async () => {
+    const page = await createPage(`<duet-notification></duet-notification>`);
+    const component = await page.find("duet-notification");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

package/lib/collection/components/duet-notification/duet-notification.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetNotification {
   constructor() {
     this.language = getLanguage();
@@ -25,6 +26,9 @@ export class DuetNotification {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
   }
@@ -69,7 +73,8 @@ export class DuetNotification {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -98,7 +103,8 @@ export class DuetNotification {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -106,7 +112,7 @@ export class DuetNotification {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Property to change accessibleLabelUnread defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelUnread when needed"
+          "text": "Property to change accessibleLabelUnread defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelUnread when needed"
         },
         "defaultValue": "{\n    en: \"Unread\",\n    fi: \"Lukematon\",\n    sv: \"Ol\u00E4st\",\n  }"
       },
@@ -212,7 +218,8 @@ export class DuetNotification {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -242,10 +249,12 @@ export class DuetNotification {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.e2e.js

@@ -0,0 +1,177 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+function isChildren(propsOrChildren) {
+  return Array.isArray(propsOrChildren) || typeof propsOrChildren === "string";
+}
+function dom(tag, propsOrChildren, children) {
+  if (propsOrChildren == null) {
+    propsOrChildren = {};
+  }
+  if (isChildren(propsOrChildren)) {
+    children = propsOrChildren;
+    propsOrChildren = {};
+  }
+  if (children == null) {
+    children = "";
+  }
+  const attrs = Object.entries(propsOrChildren)
+    .map(([attr, value]) => `${camelToKebab(attr)}="${value}"`)
+    .join(" ");
+  children = Array.isArray(children) ? children : [children];
+  return `<${tag} ${attrs}>${children.join("")}</${tag}>`;
+}
+function paragraph(props, children) {
+  return dom("duet-paragraph", props, children);
+}
+function heading(props, children) {
+  return dom("duet-heading", props, children);
+}
+function drawer(props, children) {
+  return dom("duet-notification-drawer", props, children);
+}
+function notification(props, children) {
+  return dom("duet-notification", props, children);
+}
+function appendFocusableElement(page) {
+  return page.evaluate(() => {
+    const a = document.createElement("a");
+    a.href = "#";
+    a.innerText = "some focusable element";
+    document.body.appendChild(a);
+  });
+}
+function generatePage(options = { theme: "default" }) {
+  return createPage(dom("html", { class: `duet-theme-${options.theme}` }, [
+    `<link rel="stylesheet" href="https://cdn.duetds.com/api/css/1.4.16/lib/duet.min.css" />`,
+    drawer({ label: "Notifications (3)", badge: true, icon: "messaging-notification" }, [
+      notification({ date: "today", url: "#", highlight: true }, [
+        heading({ level: "h2", visualLevel: "h6", margin: "none" }, "First notification"),
+      ]),
+      notification({ date: "today", url: "#" }, [
+        paragraph({ size: "small", margin: "none" }, "Second notification"),
+      ]),
+      notification({ date: "today", url: "#" }, [
+        heading({ level: "h2", visualLevel: "h6" }, "Third notification"),
+        paragraph({ size: "small", margin: "none" }, "Some text which would serve as the body of the notification"),
+      ]),
+    ]),
+  ]));
+}
+function getFocusedElement(page) {
+  return page.evaluateHandle(() => document.activeElement);
+}
+function getButton(page) {
+  return page.find("duet-notification-drawer >>> button[aria-expanded]");
+}
+function getContent(page) {
+  return page.find("duet-notification-drawer >>> .duet-drawer-content");
+}
+async function openDrawer(page) {
+  const button = await getButton(page);
+  await button.click();
+  await page.waitForChanges();
+}
+describe("duet-notification-drawer", () => {
+  it("should render a notification drawer", async () => {
+    const page = await createPage(drawer({ label: "Notifications" }));
+    const component = await page.find("duet-notification-drawer");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("closes on click outside", async () => {
+    const page = await generatePage();
+    await appendFocusableElement(page); // we need another focusable element for the purpose of test
+    await openDrawer(page);
+    const link = await page.find("a");
+    await link.click();
+    await page.waitForChanges();
+    const button = await getButton(page);
+    const content = await getContent(page);
+    expect(await content.isVisible()).toBe(false);
+    expect(button).toEqualAttribute("aria-expanded", "false");
+  });
+  it("closes when focus moves outside", async () => {
+    const page = await generatePage();
+    await appendFocusableElement(page); // we need another focusable element for the purpose of test
+    await openDrawer(page);
+    const link = await page.find("a");
+    await link.focus();
+    await page.waitForChanges();
+    const button = await getButton(page);
+    const content = await getContent(page);
+    expect(await content.isVisible()).toBe(false);
+    expect(button).toEqualAttribute("aria-expanded", "false");
+  });
+  describe("keyboard a11y", () => {
+    it("can be opened with keyboard", async () => {
+      const page = await generatePage();
+      let button = await getButton(page);
+      let content = await getContent(page);
+      expect(button).toEqualAttribute("aria-expanded", "false");
+      expect(await content.isVisible()).toBe(false);
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      button = await getButton(page);
+      content = await getContent(page);
+      expect(button).toEqualAttribute("aria-expanded", "true");
+      expect(await content.isVisible()).toBe(true);
+    });
+    it("closes on ESC press", async () => {
+      const page = await generatePage();
+      await openDrawer(page);
+      let content = await getContent(page);
+      expect(await content.isVisible()).toBe(true);
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+      const button = await getButton(page);
+      content = await getContent(page);
+      expect(button).toEqualAttribute("aria-expanded", "false");
+      expect(await content.isVisible()).toBe(false);
+    });
+    it("allows for tabbing through notifications", async () => {
+      const page = await generatePage();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      let focused = await getFocusedElement(page);
+      let text = await page.evaluate((element) => element.innerText, focused);
+      expect(text).toContain("First notification");
+      await page.keyboard.press("Tab");
+      focused = await getFocusedElement(page);
+      text = await page.evaluate((element) => element.innerText, focused);
+      expect(text).toContain("Second notification");
+      await page.keyboard.press("Tab");
+      focused = await getFocusedElement(page);
+      text = await page.evaluate((element) => element.innerText, focused);
+      expect(text).toContain("Third notification");
+    });
+    it("closes once focus moves out of drawer", async () => {
+      const page = await generatePage();
+      await appendFocusableElement(page); // we need another focusable element for the test
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Enter");
+      await page.waitForChanges();
+      let button = await getButton(page);
+      expect(button).toEqualAttribute("aria-expanded", "true");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      button = await getButton(page);
+      const content = await getContent(page);
+      expect(button).toEqualAttribute("aria-expanded", "false");
+      expect(await content.isVisible()).toBe(false);
+    });
+  });
+});