@duetds/components 7.0.13 → 7.1.1

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

@@ -0,0 +1,181 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-choice", () => {
+  function isElementVisible(page, selector) {
+    return page.$eval(selector, (element) => {
+      if (!element) {
+        return false;
+      }
+      return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+    });
+  }
+  it("has the correct tabbing order", async () => {
+    const page = await createPage(`
+      <duet-choice theme="turva">
+          <duet-paragraph slot="info">some text <a href="http://www.google.com">google</a></duet-paragraph>
+      </duet-choice>
+      `);
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("should render a choice button", async () => {
+    const page = await createPage(`<duet-choice></duet-choice>`);
+    const component = await page.find("duet-choice");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-choice margin="none"></duet-choice>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`<duet-choice padding="none"></duet-choice>`);
+    const element = await page.find(".duet-p-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-choice label="test"></duet-choice>`);
+    const element = await page.find("duet-choice label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-choice theme="turva"><div slot="info">some text</div></duet-choice>`);
+    const element = await page.find("duet-choice");
+    expect(element).toHaveClass("duet-theme-turva");
+    const elementFlex = await page.find("duet-choice .duet-choice-card-flextainer");
+    expect(elementFlex).toHaveClass("duet-theme-turva");
+    const elementButton = await page.find("duet-choice button");
+    expect(elementButton).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the choice disabled", async () => {
+    const page = await createPage(`<duet-choice disabled></duet-choice>`);
+    const element = await page.find("duet-choice input");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the choice", async () => {
+    const page = await createPage(`<duet-choice identifier="test"></duet-choice>`);
+    const element = await page.find("duet-choice input");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that checks the choice", async () => {
+    const page = await createPage(`<duet-choice checked></duet-choice>`);
+    const element = (await page.find("duet-choice input"));
+    expect(element.checked).not.toBeNull();
+  });
+  it("should provide a property that adds value for the choice", async () => {
+    const page = await createPage(`<duet-choice value="test"></duet-choice>`);
+    const element = await page.find("duet-choice input");
+    expect(element.getAttribute("value")).not.toBeNull();
+  });
+  it("should provide a property that adds name for the choice", async () => {
+    const page = await createPage(`<duet-choice name="test"></duet-choice>`);
+    const element = await page.find("duet-choice input");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that changes the type of the choice", async () => {
+    const page = await createPage(`<duet-choice type="radio"></duet-choice>`);
+    const element = await page.find("duet-choice input[type=radio]");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that makes the choice collapsible", async () => {
+    const page = await createPage(`<duet-choice collapsible></duet-choice>`);
+    const element = await page.find("duet-choice .duet-choice-card-collapsible");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that makes the collapsible choice always open", async () => {
+    const page = await createPage(`<duet-choice collapsible collapsible-force-expanded>Content</duet-choice>`);
+    const elementHeight = await page.evaluate(() => {
+      const content = document.querySelector(".duet-choice-card-collapsible");
+      return content.getBoundingClientRect().height;
+    });
+    expect(elementHeight).toBeGreaterThan(0);
+  });
+  it.skip("should add expanded to label text, when checked and collapsible", async () => {
+    // changes in the a11y has invalidated this test - revisit later
+    const strLabel = "Kissa";
+    const page = await createPage(`<duet-choice label="${strLabel}" checked collapsible></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    await page.waitForChanges();
+    expect(choice.textContent).toBe(`${strLabel}, Expanded`);
+  });
+  it.skip("should add collapsed to label text, when unchecked and collapsible", async () => {
+    // changes in the a11y has invalidated this test - revisit later
+    const strLabel = "Kissa";
+    const page = await createPage(`<duet-choice label="${strLabel}" collapsible></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    await page.waitForChanges();
+    expect(choice.textContent).toBe(`${strLabel}, Collapsed`);
+  });
+  it("should shortcircuit describedBy behaviour when accessibleDescribedBy is empty string", async () => {
+    const strLabel = "Kissa";
+    const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by=" "></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    const input = await choice.find("input");
+    await page.waitForChanges();
+    expect(input.getAttribute("aria-describedby")).toBe(" ");
+  });
+  it("should shortcircuit describedBy behaviour when accessibleDescribedBy is 'false' string", async () => {
+    const strLabel = "Kissa";
+    const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by="false"></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    const input = await choice.find("input");
+    await page.waitForChanges();
+    expect(input.getAttribute("aria-describedby")).toBe("false");
+  });
+  it("should provide a property that expands the choice to fill 100% width", async () => {
+    const page = await createPage(`<duet-choice expand></duet-choice>`);
+    const element = await page.find("duet-choice");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that adds icon to label", async () => {
+    const page = await createPage(`<duet-choice icon="category-pet-cat"></duet-choice>`);
+    const element = await page.find("duet-choice .duet-choice-card-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that adds caption", async () => {
+    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+    const element = await page.find("duet-choice duet-caption");
+    expect(element).not.toBeNull();
+  });
+  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    const changeEventSpy = await choice.spyOnEvent("duetChange");
+    choice.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    await choice.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+    const choice = await page.find("duet-choice");
+    const focusEventSpy = await choice.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-choice caption="foo"></duet-choice>
+      <button>another focusable element</button>
+    `);
+    const choice = await page.find("duet-choice");
+    const blurEventSpy = await choice.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-choice/duet-choice.js

@@ -9,6 +9,7 @@ import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot label - Label content.
@@ -140,6 +141,9 @@ export class DuetChoice {
     this.hasLabel = hasSlot(this.element, "label");
     this.hasBeforeText = hasSlot(this.element, "before-text");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
@@ -290,7 +294,8 @@ export class DuetChoice {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -331,7 +336,8 @@ export class DuetChoice {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -339,7 +345,7 @@ export class DuetChoice {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Property to change accessibleLabelInfoButton defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelInfoButton when needed"
+          "text": "Property to change accessibleLabelInfoButton defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelInfoButton when needed"
         },
         "attribute": "accessible-label-info-default",
         "reflect": false,
@@ -532,7 +538,8 @@ export class DuetChoice {
           "references": {
             "DuetChoiceType": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetChoiceType"
             }
           }
         },
@@ -626,7 +633,8 @@ export class DuetChoice {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -685,7 +693,8 @@ export class DuetChoice {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -725,7 +734,8 @@ export class DuetChoice {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -826,7 +836,8 @@ export class DuetChoice {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -890,7 +901,8 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+              "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
             }
           }
         }
@@ -910,7 +922,8 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+              "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
             }
           }
         }
@@ -930,7 +943,8 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx",
+              "id": "src/components/duet-choice/duet-choice.tsx::DuetChoiceEvent"
             }
           }
         }
@@ -947,10 +961,12 @@ export class DuetChoice {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -966,7 +982,8 @@ export class DuetChoice {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-choice-group/duet-choice-group.e2e.js

@@ -0,0 +1,88 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-choice-group", () => {
+  it("should render a choice group", async () => {
+    const page = await createPage("<duet-choice-group></duet-choice-group>");
+    const component = await page.find("duet-choice-group");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-choice-group margin="none"></duet-choice-group>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should prevent stacking in non-responsive mode", async () => {
+    const page = await createPage(`<duet-choice-group></duet-choice-group>`);
+    const element = await page.find(".duet-choice-group");
+    expect(element).toHaveClass("duet-no-stacking");
+  });
+  it("should provide a property that toggles on a responsive mode", async () => {
+    const page = await createPage(`<duet-choice-group responsive></duet-choice-group>`);
+    const component = await page.find("duet-choice-group");
+    const element = await page.find(".duet-choice-group");
+    expect(component).toHaveClass("duet-choice-group-breakpoint-small");
+    expect(element).not.toHaveClass("duet-no-stacking");
+  });
+  it("should provide a property that changes the default breakpoint in a responsive mode", async () => {
+    const page = await createPage(`<duet-choice-group responsive breakpoint="medium"></duet-choice-group>`);
+    const component = await page.find("duet-choice-group");
+    expect(component).toHaveClass("duet-choice-group-breakpoint-medium");
+  });
+  it("should support using arrow keys to navigate through choices", async () => {
+    const page = await createPage(`
+      <duet-choice-group value="one" label="Test" direction="horizontal" name="group">
+        <duet-choice type="radio" label="1" value="1" expand></duet-choice>
+        <duet-choice type="radio" label="2" value="2" expand></duet-choice>
+        <duet-choice type="radio" label="3" value="3" expand></duet-choice>
+      </duet-choice-group>
+    `);
+    const choiceGroup = await page.find("duet-choice-group");
+    const duetChangeEvent = await choiceGroup.spyOnEvent("duetChange");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    expect(duetChangeEvent).toHaveReceivedEventTimes(1);
+    expect(duetChangeEvent.lastEvent.detail).toEqual({
+      checked: true,
+      value: "2",
+      component: "duet-choice",
+    });
+  });
+  it("should associate the tooltip with the legend", async () => {
+    const page = await createPage(`
+      <duet-choice-group value="one" label="This choice group has a tooltip" tooltip="Hello, I'm a tooltip!.">
+        <duet-choice label="Elainvakuutus" type="radio" value="one" expand></duet-choice>
+        <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
+      </duet-choice-group>
+    `);
+    const legend = await page.find("duet-fieldset >>> legend");
+    const tooltip = await page.find("duet-tooltip");
+    const tooltipInputLabel = await tooltip.getProperty("accessibleInputLabel");
+    expect(tooltipInputLabel).not.toBeNull();
+    expect(legend.textContent).toBe(tooltipInputLabel);
+  });
+  it("ignores duetChange events from all components other than duet-choice", async () => {
+    const page = await createPage(`
+      <link rel="stylesheet" href="http://localhost:3334/fonts/lib/localtapiola.css" />
+      <duet-choice-group value="svenska" label="Asiointikieli" name="group" responsive>
+        <duet-choice label="Svenska" type="radio" value="svenska" collapsible expand>
+          <duet-textarea></duet-textarea>
+        </duet-choice>
+      </duet-choice-group>
+    `);
+    const choiceGroup = await page.find("duet-choice-group");
+    // tab to textarea
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    // enter some text to trigger duetChange event from textarea
+    await page.keyboard.type("hello");
+    // tab out
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    // value should not have changed
+    const value = await choiceGroup.getProperty("value");
+    expect(value).toBe("svenska");
+  });
+});

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -3,6 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
 export class DuetChoiceGroup {
@@ -87,6 +88,9 @@ export class DuetChoiceGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Local methods
    */
@@ -157,7 +161,8 @@ export class DuetChoiceGroup {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -180,7 +185,8 @@ export class DuetChoiceGroup {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -203,7 +209,8 @@ export class DuetChoiceGroup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -333,7 +340,8 @@ export class DuetChoiceGroup {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -374,7 +382,8 @@ export class DuetChoiceGroup {
           "references": {
             "DuetChoiceGroupBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetChoiceGroupBreakpoint"
             }
           }
         },

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

@@ -0,0 +1,125 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-collapsible", () => {
+  // taken from here: https://github.com/puppeteer/puppeteer/issues/545#issuecomment-489338078
+  function isElementVisible(page, selector) {
+    return page.$eval(selector, (element) => {
+      if (!element) {
+        return false;
+      }
+      return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+    });
+  }
+  const generatePage = async (open = false) => {
+    return createPage(`
+      <meta charset="utf-8" />
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <duet-collapsible heading="First collapsible" ${open ? "open" : ""} accessible-label="Accessible First collapsible">
+        <duet-paragraph>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
+        </duet-paragraph>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+      </duet-collapsible>
+      <duet-collapsible heading="Second collapsible" heading-weight="normal" ${open ? "open" : ""}>
+        <duet-paragraph>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
+        </duet-paragraph>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+        <duet-collapsible class="inner" heading="Inner collapsible" heading-weight="normal">
+          <duet-paragraph class="inner">
+            Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+          </duet-paragraph>
+        </duet-collapsible>
+      </duet-collapsible>
+      <duet-collapsible heading="Third collapsible">
+        <div slot="after-heading">
+          <duet-badge>Badge</duet-badge>
+        </div>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+      </duet-collapsible>
+    `);
+  };
+  it("renders", async () => {
+    const page = await generatePage();
+    const collapsible = await page.find("duet-collapsible");
+    expect(collapsible).toHaveClass("hydrated");
+  });
+  it("can be initially open", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+  });
+  it("can be initially closed", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("can have initially closed duet-collapsible nested inside initially open one", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
+  });
+  it("can open initially closed nested on click", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
+    const button = await page.find("duet-collapsible.inner >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(true);
+  });
+  it("closes on click", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("opens on click", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+  });
+  it("closes on space key", async () => {
+    const page = await generatePage(true);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("closes on return key", async () => {
+    const page = await generatePage(true);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("raises a toggle event", async () => {
+    const page = await generatePage(true);
+    const collapsible = await page.find("duet-collapsible");
+    const duetToggle = await collapsible.spyOnEvent("duetToggle");
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(duetToggle).toHaveReceivedEventTimes(1);
+  });
+  it("renders the necessary aria attributes", async () => {
+    const page = await generatePage();
+    const content = await page.find("duet-collapsible >>> [id]");
+    const button = await page.find("duet-collapsible >>> button");
+    // button and content should be associated via aria-controls/id attributes
+    expect(button.getAttribute("aria-controls")).toEqual(content.id);
+    expect(button.getAttribute("aria-label")).toBe("Accessible First collapsible");
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    await button.click();
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+  });
+  it("renders the after-heading slot", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-badge")).toBe(true);
+  });
+});