@duetds/components 8.0.2 → 8.0.3

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

@@ -0,0 +1,36 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-radio-group", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-radio-group label="Choose" value="one" name="group">
+          <duet-radio value="one" label="Option one"></duet-radio>
+          <duet-radio value="two" label="Option two"></duet-radio>
+          <duet-radio value="three" label="Option three"></duet-radio>
+        </duet-radio-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with label, tooltip and caption", async () => {
+    const result = await testWithAxe(`
+        <duet-radio-group
+          responsive
+          label="This choice group has a tooltip"
+          tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
+          caption="This is a caption lorem ipsum dolor sit amet consectetuer adipiscing elit."
+          direction="horizontal"
+          value="one"
+          name="group2"
+        >
+          <duet-radio value="one" label="Option one"></duet-radio>
+          <duet-radio value="two" label="Option two"></duet-radio>
+          <duet-radio value="three" label="Option three"></duet-radio>
+        </duet-radio-group>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-range-slider/duet-range-slider.a11y.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-range-slider", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-range-slider label="Sijoitettava pääoma" value="3000" min="100" max="10000" step="100" unit=" €" debounce="500">
+        </duet-range-slider>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -515,7 +515,7 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
               "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
             }
           }
@@ -536,7 +536,7 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
               "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
             }
           }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.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-range-stepper", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-range-stepper></duet-range-stepper>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -349,7 +349,7 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
               "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
             }
           }

package/lib/collection/components/duet-scrollable/duet-scrollable.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-scrollable", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-scrollable>
+          <button class="duet-dummy-placeholder" aria-label="Click to open image 1">1</button>
+          <button class="duet-dummy-placeholder" aria-label="Click to open image 2">2</button>
+          <button class="duet-dummy-placeholder" aria-label="Click to open image 3">3</button>
+        </duet-scrollable>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-section-layout/duet-section-layout.a11y.e2e.js

@@ -0,0 +1,18 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-section-layout", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-section-layout margin="none">
+          <div>
+            <duet-card heading="Section">Content</duet-card>
+            <duet-card heading="More section content">More content</duet-card>
+          </div>
+        </duet-section-layout>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -0,0 +1,45 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-select", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-select
+          label="Kaupunki"
+          placeholder="Valitse"
+          items='[
+            { "label": "Helsinki", "value": "1" },
+            { "label": "Tampere", "value": "2" },
+            { "label": "Vantaa", "value": "3" },
+            { "label": "Espoo", "value": "4" }
+          ]'
+        >
+        </duet-select>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+  it("should render an accessible component with grouped options", async () => {
+    const result = await testWithAxe(`
+        <duet-select
+          label="Kaupunki"
+          placeholder="Valitse"
+          items='[
+            { label: "Helsinki", value: "1" },
+            {
+              label: "Grouped options",
+              options: [
+                { label: "Tampere", value: "2" },
+                { label: "Vantaa", value: "3" },
+              ],
+            },
+            { label: "Espoo", value: "4" },
+          ]'
+        >
+        </duet-select>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -184,7 +184,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
               "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
             }
           }
@@ -500,7 +500,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
               "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
             }
           }
@@ -572,7 +572,7 @@ export class DuetSelect {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
+          "original": "string | null",
           "resolved": "string",
           "references": {}
         },
@@ -651,7 +651,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
               "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }
@@ -672,7 +672,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
               "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }
@@ -693,7 +693,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
               "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.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-shaped-image", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <div style="height: 400px;">
+          <duet-shaped-image
+            src="https://www.duetds.com/assets/img/example-brand1.png"
+            rotation="7"
+            style="width: 400px;"
+            accessible-label="Illustration"
+          ></duet-shaped-image>
+        </div>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-show-more/duet-show-more.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-show-more", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-show-more></duet-show-more>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-show-more/duet-show-more.css

@@ -20,11 +20,11 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  margin-bottom: 16px !important;
   display: block;
 }
 
 .duet-show-more {
+  margin-bottom: 16px !important;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 600;

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -389,7 +389,7 @@ export class DuetShowMore {
           "references": {
             "DuetShowMoreToggleEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
               "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
             }
           }

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

@@ -0,0 +1,47 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-slideout", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-slideout opener="main-navigation-opener">
+          <duet-slideout-panel active label-size="large">
+            <span slot="label">Vakuutukset</span>
+            <duet-slideout-panel-dropdown icon="category-car">
+              <span slot="label">Ajoneuvot</span>
+              <duet-slideout-link>Auto</duet-slideout-link>
+              <duet-slideout-link>Pakettiauto</duet-slideout-link>
+            </duet-slideout-panel-dropdown>
+            <duet-slideout-panel-dropdown icon="category-personal">
+              <span slot="label">Koti</span>
+              <duet-slideout-link>Kotivakuutus</duet-slideout-link>
+              <duet-slideout-link>Mökkivakuutus</duet-slideout-link>
+            </duet-slideout-panel-dropdown>
+            <duet-slideout-panel-dropdown icon="category-personal">
+              <span slot="label">Terveys</span>
+              <duet-slideout-link active>Tapaturmavakuutus</duet-slideout-link>
+              <duet-slideout-link>Sairaskuluvakuutus</duet-slideout-link>
+            </duet-slideout-panel-dropdown>
+            <duet-slideout-link active icon="category-travel">Matka</duet-slideout-link>
+            <duet-slideout-link icon="category-life-insurance">Henki</duet-slideout-link>
+            <duet-slideout-panel-dropdown icon="category-pet">
+              <span slot="label">Eläin</span>
+              <duet-slideout-link>Koiravakuutus</duet-slideout-link>
+              <duet-slideout-link>Kissavakuutus</duet-slideout-link>
+            </duet-slideout-panel-dropdown>
+            <duet-slideout-link icon="category-forest">Metsä</duet-slideout-link>
+          </duet-slideout-panel>
+          <duet-spacer size="large"></duet-spacer>
+          <duet-spacer size="medium"></duet-spacer>
+          <duet-slideout-lang>
+            <duet-slideout-link size="small" active>Suomi</duet-slideout-link>
+            <duet-slideout-link size="small">Svenska</duet-slideout-link>
+            <duet-slideout-link size="small">English</duet-slideout-link>
+          </duet-slideout-lang>
+        </duet-slideout>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -309,7 +309,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
               "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
             }
           }

package/lib/collection/components/duet-spacer/duet-spacer.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-spacer", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-spacer size="xx-large"></duet-spacer>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
               "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
             }
           }
@@ -97,7 +97,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
               "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
             }
           }

package/lib/collection/components/duet-spinner/duet-spinner.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-spinner", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+       <duet-spinner size="small" theme="default"></duet-spinner>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -96,7 +96,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
               "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
             }
           }

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

@@ -195,7 +195,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
               "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
             }
           }
@@ -273,7 +273,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
               "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
             }
           }

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

@@ -0,0 +1,26 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+const disabledRules = {
+  // Axe complains about using aria-selected which is allowed only for certain roles.
+  // Deep refactor would be needed to fulfill this requirement
+  "aria-allowed-attr": { enabled: false },
+};
+describe("[a11y] duet-stepper", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-stepper>
+          <duet-step heading="Your name">
+              <duet-button margin="none" variation="primary" class="next">Next</duet-button>
+          </duet-step>
+
+          <duet-step heading="Final step">
+              <duet-button margin="none" variation="primary" class="next">Finish</duet-button>
+          </duet-step>
+        </duet-stepper>
+      `, mergeRules(axeRunOptions, disabledRules));
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -225,7 +225,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
               "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
             }
           }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.a11y.e2e.js

@@ -0,0 +1,21 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+describe("[a11y] duet-submenu-bar", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+         <duet-submenu-bar>
+         <span slot="label">Näytä vaihtoehdot</span>
+          <duet-submenu-bar-dropdown icon="category-car">
+            <span slot="label">Ajoneuvot</span>
+            <duet-submenu-bar-dropdown-link>Autovakuutus</duet-submenu-bar-dropdown-link>
+            <duet-divider margin="none"></duet-divider>
+            <duet-submenu-bar-dropdown-link caret highlight>Kaikki ajoneuvovakuutukset</duet-submenu-bar-dropdown-link>
+          </duet-submenu-bar-dropdown>
+        </duet-submenu-bar>
+      `, axeRunOptions);
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -67,7 +67,7 @@ export class DuetSubmenuBar {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    const children = Array.from(this.element.children);
+    const children = Array.from(this.element.children).filter(child => !child.hasAttribute("slot"));
     for (const child of children) {
       child.setAttribute("role", "listitem");
     }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.css

@@ -37,7 +37,7 @@
   font-weight: 400;
   line-height: 1.25;
   color: rgb(0, 41, 77);
-  text-align: center;
+  text-align: left;
   text-decoration: none;
 }
 .duet-submenu-bar-dropdown-link:focus {
@@ -51,6 +51,7 @@
   .duet-submenu-bar-dropdown-link {
     padding: 0.675rem 16px;
     font-size: 0.875rem;
+    text-align: center;
   }
 }
 .duet-submenu-bar-dropdown-link.active .label {

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

@@ -13,6 +13,7 @@ export class DuetTab {
       .accessibleDescriptionDefault
       ? getLocaleString(this.accessibleDescriptionDefault)
       : null;
+    this.accessibleLabelledBy = undefined;
   }
   /**
    * Component lifecycle events.
@@ -29,7 +30,7 @@ export class DuetTab {
    */
   render() {
     if (Build.isBrowser) {
-      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription }, h("slot", null)));
+      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, h("slot", null)));
     }
   }
   static get is() { return "duet-tab"; }
@@ -144,6 +145,24 @@ export class DuetTab {
         "attribute": "accessible-description",
         "reflect": false,
         "defaultValue": "this\n    .accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
+      },
+      "accessibleLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "String of id's that indicate alternative labels elements"
+        },
+        "attribute": "accessible-labelled-by",
+        "reflect": false,
+        "defaultValue": "undefined"
       }
     };
   }

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

@@ -0,0 +1,20 @@
+/*!
+ * Built with Duet Design System
+ */
+import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
+const disabledRules = {
+  // ShadowDOM isolates identifiers (needed for aria-controls) https://github.com/w3c/aria/issues/864
+  "aria-valid-attr-value": { enabled: false },
+};
+describe("[a11y] duet-tab-group", () => {
+  it("should render an accessible component", async () => {
+    const result = await testWithAxe(`
+        <duet-tab-group>
+          <duet-tab label="Yhteenveto">Tab 1 content</duet-tab>
+          <duet-tab label="Säästösuunnitelma" selected>Tab 2 content</duet-tab>
+        </duet-tab-group>
+      `, mergeRules(axeRunOptions, disabledRules));
+    expect(result).not.toBeNull();
+    expect(formatViolations(result.violations)).toEqual([]);
+  });
+});

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

@@ -174,7 +174,7 @@ export class DuetTabGroup {
     this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
-      tab.setAttribute("aria-labelledby", this.getButtonId(index));
+      tab.setAttribute("accessible-labelled-by", this.getButtonId(index));
       if (tab.selected) {
         if (this.selected === undefined) {
           this.selected = index;
@@ -320,7 +320,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
             }
           }
@@ -561,7 +561,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -582,7 +582,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -603,7 +603,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
@@ -626,7 +626,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
               "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           },