@duetds/components 8.0.2 → 8.0.3

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

@@ -3,7 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
-import { DuetStringsExternalDefaults } from "../../common-strings";
+import { DuetStringsExternalDefaults, DuetStringsLoadingDefaults } from "../../common-strings";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
@@ -57,6 +57,8 @@ export class DuetButton {
     this.language = getLanguage();
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
     this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    this.accessibleLabelLoadingDefaults = DuetStringsLoadingDefaults;
+    this.accessibleLabelLoading = getLocaleString(this.accessibleLabelLoadingDefaults);
     this.icon = "";
     this.color = "";
     this.iconRight = false;
@@ -78,10 +80,16 @@ export class DuetButton {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
     this.syncToProxyButton();
-    connectLanguageChangeObserver(this, {
-      prop: "accessibleLabelExternal",
-      defaults: "accessibleLabelExternalDefaults",
-    });
+    connectLanguageChangeObserver(this, [
+      {
+        prop: "accessibleLabelExternal",
+        defaults: "accessibleLabelExternalDefaults",
+      },
+      {
+        prop: "accessibleLabelLoading",
+        defaults: "accessibleLabelLoadingDefaults",
+      },
+    ]);
     if (!this.url && this.element.closest("form")) {
       this.element.insertAdjacentElement("beforebegin", this.proxyButton);
     }
@@ -111,6 +119,20 @@ export class DuetButton {
   getButtonType() {
     return this.submit ? "submit" : "button";
   }
+  getButtonIconSize() {
+    switch (this.iconSize) {
+      case "small":
+        return "small";
+      case "medium-small":
+        return "medium-small";
+      case "medium":
+        return "medium";
+      case "large":
+        return "large";
+      default:
+        return "medium";
+    }
+  }
   /**
    * Sets focus on the specified `duet-button`. Use this method instead of the global
    * `button.focus()`.
@@ -134,7 +156,7 @@ export class DuetButton {
         "duet-button-icon": true,
         left: !iconRight,
         right: iconRight,
-        [this.iconSize]: true,
+        [this.getButtonIconSize()]: true,
       } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
     const commonProps = {
       onFocus: this.onFocus,
@@ -154,7 +176,7 @@ export class DuetButton {
         disabled: this.disabled,
         icon: !!icon,
         "icon-right": iconRight,
-        [this.iconSize]: true,
+        [this.getButtonIconSize()]: true,
       },
       "aria-controls": this.accessibleControls,
       "aria-label": this.accessibleLabel,
@@ -178,7 +200,7 @@ export class DuetButton {
         "duet-theme-turva": this.theme === "turva",
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
-      } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren)), this.loading && h("duet-spinner", { color: "currentColor" }))));
+      } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { color: "currentColor" }))));
   }
   static get is() { return "duet-button"; }
   static get encapsulation() { return "shadow"; }
@@ -412,7 +434,7 @@ export class DuetButton {
           "references": {
             "DuetButtonVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
               "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
             }
           }
@@ -532,7 +554,7 @@ export class DuetButton {
           "references": {
             "DuetButtonTextCentering": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
               "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
             }
           }
@@ -556,7 +578,7 @@ export class DuetButton {
           "references": {
             "DuetButtonWrapping": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
               "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
             }
           }
@@ -790,6 +812,54 @@ export class DuetButton {
         "reflect": false,
         "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
       },
+      "accessibleLabelLoadingDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
+            }],
+          "text": "Property to change accessibleLabelLoading defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelLoading when needed"
+        },
+        "attribute": "accessible-label-loading-default",
+        "reflect": false,
+        "defaultValue": "DuetStringsLoadingDefaults"
+      },
+      "accessibleLabelLoading": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
+            }],
+          "text": "Adds accessible label for button in \"loading\" state"
+        },
+        "attribute": "accessible-label-loading",
+        "reflect": false,
+        "defaultValue": "getLocaleString(this.accessibleLabelLoadingDefaults)"
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -865,7 +935,7 @@ export class DuetButton {
           "references": {
             "DuetButtonIconSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
               "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
             }
           }
@@ -889,7 +959,7 @@ export class DuetButton {
           "references": {
             "DuetButtonSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
               "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
             }
           }

package/lib/collection/components/duet-callout/duet-callout.a11y.e2e.js

@@ -0,0 +1,17 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-callout", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-callout>
+          Todennäköisesti kaikkien pankkien rahoitusrakenteeseen
+          ja kustannuksiin kiinnitetään jatkossa entistä enemmän huomiota.
+          <span slot="author">John Doe</span>
+        </duet-callout>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-caption/duet-caption.a11y.e2e.js

@@ -0,0 +1,13 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-caption", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-caption>Medium caption text</duet-caption>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -118,7 +118,7 @@ export class DuetCaption {
           "references": {
             "DuetCaptionSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-caption/duet-caption.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-caption/duet-caption.tsx",
               "id": "src/components/duet-caption/duet-caption.tsx::DuetCaptionSize"
             }
           }

package/lib/collection/components/duet-card/duet-card.a11y.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-card", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-card heading="Analytics"> Card with a heading </duet-card>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with image", async () => {
+    const result = await testWithAxe(`
+        <duet-card image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg">
+          <duet-heading level="h3">Card heading</duet-heading>
+          <duet-paragraph margin="none">
+            Card content lorem ipsum dolor sit amet consectetuer adipiscing elit no nummy laoreet lorem ipsum.
+          </duet-paragraph>
+          <duet-spacer></duet-spacer>
+          <duet-button fixed url="#" padding="none" variation="plain" icon="action-arrow-right-small" icon-size="small" icon-right>
+            Read more
+          </duet-button>
+        </duet-card>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -183,7 +183,7 @@ export class DuetCard {
           "references": {
             "DuetCardVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
               "id": "src/components/duet-card/duet-card.tsx::DuetCardVariation"
             }
           }
@@ -354,7 +354,7 @@ export class DuetCard {
           "references": {
             "DuetCardPadding": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
               "id": "src/components/duet-card/duet-card.tsx::DuetCardPadding"
             }
           }
@@ -477,7 +477,7 @@ export class DuetCard {
           "references": {
             "DuetCardToggleEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
               "id": "src/components/duet-card/duet-card.tsx::DuetCardToggleEvent"
             }
           }

package/lib/collection/components/duet-checkbox/duet-checkbox.a11y.e2e.js

@@ -0,0 +1,20 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-checkbox", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-checkbox label="Unchecked"></duet-checkbox>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component in checked state", async () => {
+    const result = await testWithAxe(`
+        <duet-checkbox checked label="Checked" value="test"></duet-checkbox>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -416,7 +416,7 @@ export class DuetCheckbox {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },
@@ -483,7 +483,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
               "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }
@@ -504,7 +504,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
               "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }
@@ -525,7 +525,7 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
               "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }

package/lib/collection/components/duet-chip/duet-chip.a11y.e2e.js

@@ -0,0 +1,25 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-chip", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-chip variation="button" name="action" value="add">add to favorites</duet-chip>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with a dropdown", async () => {
+    const result = await testWithAxe(`
+        <duet-chip variation="filter" popup="category-popup">Category</duet-chip>
+        <duet-popup-menu id="category-popup">
+          <duet-popup-menu-item value="health-value-id-68792">Health</duet-popup-menu-item>
+          <duet-popup-menu-item>Pets</duet-popup-menu-item>
+          <duet-popup-menu-item>Vehicles</duet-popup-menu-item>
+        </duet-popup-menu>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -225,7 +225,7 @@ export class DuetChip {
           "references": {
             "DuetChipVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
               "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
             }
           }
@@ -418,7 +418,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
               "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }
@@ -439,7 +439,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
               "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }
@@ -460,7 +460,7 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
               "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }

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

@@ -0,0 +1,79 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-choice", () => {
+  it("should render an accessible component as a radio", async () => {
+    const result = await testWithAxe(`
+        <duet-choice-group value="one" label="Vakuutus" direction="horizontal" name="group" responsive>
+          <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
+        </duet-choice-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component as a checkbox", async () => {
+    const result = await testWithAxe(`
+        <duet-fieldset label="Lemmikit" caption="Valitse yksi tai useampi vaihtoehto:">
+          <duet-grid responsive>
+            <duet-choice label="Kissa" value="kissa" icon="category-pet-cat" checked expand></duet-choice>
+          </duet-grid>
+        </duet-fieldset>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible, collapsible component", async () => {
+    const result = await testWithAxe(`
+        <duet-fieldset label="Lemmikit" caption="Valitse yksi tai useampi vaihtoehto:">
+          <duet-choice label="Kissa" icon="category-pet-cat" checked expand collapsible>
+              <span slot="header"><duet-caption>This explains the collapsible content</duet-caption></span>
+
+              <duet-paragraph
+                >LähiTapiola-ryhmä on keskinäiseen yhtiömuotoon perustuva, asiakkaidensa omistama yhtiöryhmä, joka palvelee monia
+                eri asiakasryhmiä. <duet-link url="https://www.lahitapiola.fi/henkilo">LähiTapiolan tuotteet</duet-link> ja
+                palvelut kattavat vahinko-, henki- ja eläkevakuuttamisen sekä sijoittamisen ja säästämisen palvelut. Olemme myös
+                yritysten riskienhallinnan ja henkilöstön työhyvinvoinnin ammattilainen. Omistaja-asiakkaita meillä on lähes 1,6
+                miljoonaa.</duet-paragraph
+              >
+            </duet-choice>
+        </duet-fieldset>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with info", async () => {
+    const result = await testWithAxe(`
+      <duet-choice-group value="one" label="Valitse lemmikki" direction="vertical" name="group">
+        <duet-choice type="radio" label="Kissa" icon="category-pet-cat" value="one" expand>
+          <div slot="info">
+            LähiTapiola-ryhmä on keskinäiseen yhtiömuotoon perustuva, asiakkaidensa omistama yhtiöryhmä, joka palvelee monia
+            eri asiakasryhmiä. <duet-link url="https://www.lahitapiola.fi/henkilo">LähiTapiolan tuotteet</duet-link> ja
+            palvelut kattavat vahinko-, henki- ja eläkevakuuttamisen sekä sijoittamisen ja säästämisen palvelut. Olemme myös
+            yritysten riskienhallinnan ja henkilöstön työhyvinvoinnin ammattilainen. Omistaja-asiakkaita meillä on lähes 1,6
+            miljoonaa.
+          </div>
+        </duet-choice>
+      </duet-choice-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with an additional content", async () => {
+    const result = await testWithAxe(`
+        <duet-choice-group value="one" label="Valitse vakuutus" direction="vertical" name="group">
+          <duet-choice type="radio" label="Kotivakuutus" value="one" expand>
+            <div slot="additional">
+              <duet-paragraph size="small" margin="none">
+                Testaajankuja 1<br />
+                01740 Vantaa<br />
+                Vakuutusnumero 1111344221
+              </duet-paragraph>
+            </div>
+          </duet-choice>
+        </duet-choice-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -946,7 +946,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/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"
             }
           }
@@ -967,7 +967,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/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"
             }
           }
@@ -988,7 +988,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/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"
             }
           }

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

@@ -0,0 +1,17 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-choice-group", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-choice-group value="one" label="Vakuutus" direction="horizontal" name="group" responsive>
+          <duet-choice label="Eläinvakuutus" type="radio" value="one" expand></duet-choice>
+          <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
+          <duet-choice label="Kotivakuutus" type="radio" value="three" expand></duet-choice>
+        </duet-choice-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -0,0 +1,24 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-collapsible", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-collapsible heading="Click to open details">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
+        </duet-collapsible>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component which is initially open", async () => {
+    const result = await testWithAxe(`
+        <duet-collapsible heading="Click to open details" open>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+        </duet-collapsible>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -224,7 +224,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleWeight": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
               "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
             }
           }
@@ -248,7 +248,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleHeadingFontSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
               "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
             }
           }
@@ -348,7 +348,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleToggleEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
               "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
             }
           }

package/lib/collection/components/duet-combobox/duet-combobox.a11y.e2e.js

@@ -0,0 +1,17 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-combobox", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-combobox
+          items='[{"id":"0", "value": "49200", "name": "Heinlahti"},{"id":"1", "value": "49210", "name": "Huutjärvi"}]'
+        >
+          <duet-input label="Anna postinumerosi" label-hidden icon="form-location"></duet-input>
+        </duet-combobox>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -357,7 +357,7 @@ export class DuetCombobox {
     return (h(Host, { role: "combobox", "aria-expanded": this.listOpen ? "true" : "false", "aria-owns": "duet-combobox-list-element", "aria-haspopup": "listbox", class: {
         "duet-combobox": true,
         [`duet-theme-${this.theme}`]: true,
-      } }, h("slot", null), h("div", { role: "list", class: {
+      } }, h("slot", null), h("div", { class: {
         "duet-combobox-list": true,
         open: this.listOpen,
       }, ref: el => (this.listContainer = el) }, h("ul", { class: {
@@ -500,7 +500,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
               "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
             }
           }
@@ -620,7 +620,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
               "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
             }
           }
@@ -646,7 +646,7 @@ export class DuetCombobox {
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
               "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
             }
           },