@duetds/components 6.8.2 → 6.8.4

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

@@ -7,7 +7,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 // 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.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -95,6 +95,11 @@ export class DuetModal {
       }
     }
   }
+  watchLanguageStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue && this.accessibleCloseLabel === this.accessibleCloseLabelDefaults[oldValue]) {
+      this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, newValue);
+    }
+  }
   activeChanged() {
     this.open = this.active;
   }
@@ -112,7 +117,11 @@ export class DuetModal {
       this.modalEl.classList.add("duet-disable-transitions");
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
   disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
     enableBodyScroll(this.modalEl);
   }
   /**
@@ -230,7 +239,7 @@ export class DuetModal {
           "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
         },
         "attribute": "language",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "getLanguage()"
       },
       "accessibleCloseLabelDefaults": {
@@ -261,7 +270,7 @@ export class DuetModal {
       },
       "accessibleCloseLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -278,7 +287,7 @@ export class DuetModal {
         },
         "attribute": "accessible-close-label",
         "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleCloseLabelDefaults, this.language)"
+        "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
       },
       "size": {
         "type": "string",
@@ -289,7 +298,7 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -399,7 +408,7 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -635,7 +644,7 @@ export class DuetModal {
           "references": {
             "DuetModalCloseEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         }
@@ -682,6 +691,9 @@ export class DuetModal {
     return [{
         "propName": "open",
         "methodName": "openChanged"
+      }, {
+        "propName": "language",
+        "methodName": "watchLanguageStateHandler"
       }, {
         "propName": "active",
         "methodName": "activeChanged"

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

@@ -247,7 +247,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         },
@@ -362,7 +362,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         },
@@ -478,7 +478,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }
@@ -498,7 +498,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }
@@ -518,7 +518,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }

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

@@ -278,7 +278,7 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetNotificationDrawerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
             }
           }
         },

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -226,7 +226,7 @@ export class DuetNumberInput {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = SafeParseFloat(this.value, this.locale);
+    const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
     if (current == null) {
       return "";
     }
@@ -239,7 +239,7 @@ export class DuetNumberInput {
   render() {
     const identifier = this.identifier || this.inputId;
     const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
-    const cleanedValue = SafeParseFloat(this.value, this.locale);
+    const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
     return (h(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,
@@ -976,7 +976,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -996,7 +996,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -1016,7 +1016,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -1036,7 +1036,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }

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

@@ -329,7 +329,7 @@ export class DuetPagination {
           "references": {
             "DuetPaginationVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         },
@@ -572,7 +572,7 @@ export class DuetPagination {
           "references": {
             "DuetPaginationPageEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         }

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

@@ -107,7 +107,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -130,7 +130,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -153,7 +153,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },

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

@@ -534,7 +534,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -554,7 +554,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -574,7 +574,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }

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

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

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

@@ -51,17 +51,17 @@ export class DuetRangeStepper {
     }
   }
   watchStepIndexStateHandler(newValue) {
-    if (this.element.shadowRoot.childElementCount > 0) {
+    if (this.leftBnRef && this.rightBnRef) {
       if (newValue <= 1) {
         this.leftBnRef.setAttribute("disabled", "");
-        this.rightBnRef.focus();
+        this.rightBnRef.setFocus();
       }
       else {
         this.leftBnRef.removeAttribute("disabled");
       }
       if (newValue >= this.total / this.stepSize) {
         this.rightBnRef.setAttribute("disabled", "");
-        this.leftBnRef.focus();
+        this.leftBnRef.setFocus();
       }
       else {
         this.rightBnRef.removeAttribute("disabled");
@@ -73,6 +73,8 @@ export class DuetRangeStepper {
       if (this.stepIndex * newValue > this.total) {
         this.stepIndex = Math.ceil(this.total / newValue);
       }
+      // trigger handler in case a button needs to be disabled or enabled but stepSize did not change
+      this.watchStepIndexStateHandler(this.stepIndex);
     }
   }
   handleStepClick(e) {
@@ -333,7 +335,7 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
             }
           }
         }

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

@@ -170,7 +170,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -465,7 +465,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -614,7 +614,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -634,7 +634,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -654,7 +654,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

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

@@ -34,6 +34,10 @@
   opacity: 1;
 }
 
+:host(:not([open])) ::slotted(duet-slideout-panel) {
+  display: none;
+}
+
 .duet-slideout {
   display: flex;
   align-items: center;
@@ -98,6 +102,10 @@
 .duet-slideout .dialog .top button {
   cursor: pointer;
 }
+.duet-slideout .dialog .top button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
 }
@@ -123,12 +131,18 @@
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
+.duet-slideout.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
+.duet-slideout .dialog .top button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 
 ::slotted(*) {
   width: 100%;

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

@@ -4,9 +4,16 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
+    this.exitLangObject = {
+      en: "Exit the menu",
+      fi: "Poistu valikosta",
+      sv: "Avsluta menyn",
+    };
     this.toggleMenu = (e) => {
       const toggle = !this.open;
       this.open = toggle;
@@ -17,9 +24,15 @@ export class DuetSlideout {
         component: "duet-slideout",
       });
       if (toggle) {
-        setTimeout(() => {
-          this.closeButton.focus();
-        }, 200);
+        const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        if (openPanel) {
+          openPanel.setFocus();
+        }
+        else {
+          setTimeout(() => {
+            this.closeButton.focus();
+          }, 200);
+        }
       }
       else {
         setTimeout(() => {
@@ -30,6 +43,7 @@ export class DuetSlideout {
     this.onClick = (e) => {
       this.toggleMenu(e);
     };
+    this.language = getLanguage();
     this.theme = "";
     this.open = false;
     this.backgroundColor = "gray-lightest";
@@ -59,8 +73,8 @@ export class DuetSlideout {
       this.openButton = this.element.querySelector(":scope > [slot='toggle']");
     }
     if (this.openButton) {
-      this.openButton.setAttribute("aria-haspopup", "dialog");
-      this.openButton.setAttribute("aria-expanded", "false");
+      this.openButton.accessiblePopup = "true";
+      this.openButton.accessibleExpanded = false;
       this.openButton.addEventListener("click", e => {
         e.stopPropagation();
         e.preventDefault();
@@ -69,6 +83,29 @@ export class DuetSlideout {
       this.openButton = this.openButton;
     }
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
+  /**
+   * Component event handling.
+   */
+  handleKeyUp(ev) {
+    // When Esc is pressed
+    if (isEscapeKey(ev)) {
+      if (this.open) {
+        this.toggleMenu(ev);
+      }
+    }
+  }
+  /**
+   * Sets focus. Use this method instead of the global focus().
+   */
+  async setFocus(options) {
+    this.openButton.focus(options);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -77,6 +114,7 @@ export class DuetSlideout {
     const styles = {
       background: getColorByName(this.backgroundColor, this.theme),
     };
+    const exitTranslation = getLocaleString(this.exitLangObject);
     return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { class: {
         "desktop-bg": true,
         hidden: !this.open,
@@ -85,7 +123,7 @@ export class DuetSlideout {
       } }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
         dialog: true,
         hidden: !this.open,
-      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+      }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
         "slideout-close": true,
         active: this.open,
       }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", class: {
@@ -172,6 +210,11 @@ export class DuetSlideout {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get events() {
     return [{
         "method": "duetSlideoutEvent",
@@ -189,7 +232,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }
@@ -212,8 +255,39 @@ export class DuetSlideout {
           "text": "Toggles the slideout.",
           "tags": []
         }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus. Use this method instead of the global focus().",
+          "tags": []
+        }
       }
     };
   }
   static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "keyup",
+        "method": "handleKeyUp",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -3,7 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { getLocaleString } from "../../utils/language-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetSlideoutLang {
   constructor() {
     /**
@@ -14,6 +14,7 @@ export class DuetSlideoutLang {
       fi: "Valitse kieli",
       sv: "Välj språk",
     };
+    this.language = getLanguage();
     this.theme = "";
   }
   /**
@@ -22,13 +23,19 @@ export class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    connectLanguageChangeObserver(this);
+  }
+  disconnectedCallback() {
+    disconnectLanguageChangeObserver(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
     const langTranslation = getLocaleString(this.chooseLangObject);
-    return (h(Host, null, h("div", { class: "duet-slideout-lang" }, h("duet-visually-hidden", null, langTranslation), h("duet-icon", { name: "navigation-language", margin: "none", color: "secondary" }), h("slot", null))));
+    return (h(Host, null, h("div", { class: "duet-slideout-lang", "aria-role": "group", "aria-label": langTranslation }, h("duet-icon", { name: "navigation-language", margin: "none", color: "secondary" }), h("slot", null))));
   }
   static get is() { return "duet-slideout-lang"; }
   static get encapsulation() { return "shadow"; }
@@ -69,5 +76,10 @@ export class DuetSlideoutLang {
       }
     };
   }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
   static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css

@@ -44,6 +44,13 @@
 .duet-slideout-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+.duet-slideout-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-slideout-link:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
 .duet-slideout-link.active span {
   position: relative;
 }

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

@@ -31,7 +31,7 @@ export class DuetSlideoutLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [this.size]: true,
-      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
   }
   static get is() { return "duet-slideout-link"; }
   static get encapsulation() { return "shadow"; }