@scania/tegel 1.28.0 → 1.28.1-fix-text-field-label-click-focus-beta.0

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -28,6 +28,12 @@ export class TdsSideMenuDropdown {
     onEventBlur() {
         this.setHoverStateClosed();
     }
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open = !this.open;
+        }
+    }
     setHoverStateOpen() {
         this.hoverState = { isHovered: true, updatedAt: Date.now() };
     }
@@ -50,13 +56,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: 'f794fb5b7ed319fc513804df11b2f6122a38138c' }, h("div", { key: 'e451cc6decc88a314354f246c7c9a899473a5b0a', class: {
+        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '1cbb052c9a65d8a560447354342955b1de246c82', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, h("button", { key: '1b39ec0c0eba39609a3e263fe8a30d7529a1ba68' }, h("slot", { key: '61432ad1590e34b3f736f49a4b882aa52b8ccd1d', name: "icon" }), !this.collapsed && (h(Fragment, { key: '8d1b5f053c630c142926fc6853312728f4edaaa3' }, this.buttonLabel, h("slot", { key: '204b4e1426221221a2bff1267d20ee5ccc6808dc', name: "label" }), h("tds-icon", { key: 'f06e41abf9ea5f2c5c0609034ba67acebafdd6db', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: 'bdb81ba6f524ed42def95629f647bcb051a09af2', class: "menu" }, this.collapsed && (h("h3", { key: '5ab3130f41e0ddcc6bc518d18ff884d877d6f6ec', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '209d7c4b63fde57eeed388c4e74e9b95e92fc946', name: "label" }))), h("slot", { key: '0585ade48d3cedee0761b0afcbecf72d2203f72b' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -183,6 +189,12 @@ export class TdsSideMenuDropdown {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: 'dbe0a35cff13d1eaa2eea5afd744084b75ab4dd7', role: "list" }, h("div", { key: 'a0e7e86f42d1f95df8fd8e123458e26da589d979', class: {
+        return (h(Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'e569d7bfbdcaeb80a00efe21ab52690733475574' }))));
+            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -28,12 +28,12 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: 'd3e238a1c5727f0b58e96883b0318fbeaf549e24', role: "listitem" }, h("div", { key: '4cbcc88749079ff1300c4182e68cecc69ce6bddf', class: {
+        return (h(Host, { key: '3cef6b5d19a0fbfe5df1d10addb1f3f53921040e', role: "listitem" }, h("div", { key: '34de00792e93179c489110027288043bf3262c6e', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'a2e2349fd9c1eb9fc34ebe77ed84b48878d649ea' }))));
+            } }, h("slot", { key: '70d607d2dcbe976273e58cbab79772b186d07a35' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.js

@@ -54,12 +54,12 @@ export class TdsSideMenuItem {
         this.updateSlottedElements();
     }
     render() {
-        return (h(Host, { key: '47e9325f6606cb06ce21676b12b9123bb5147501' }, h("div", { key: 'b0309c6d2242d862a3c91fe0f8e94af73af915d5', class: {
+        return (h(Host, { key: '0c9290486534fe72176fd531e9c1946358984c3a' }, h("div", { key: 'e215756bc01214c4de39702eec972ccb84a58d2d', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'f96fa0078d9d2da5f76edb05d91cb5eb19dd01fb' }))));
+            } }, h("slot", { key: 'c461a28519b6632322b872b71407ee82ed82a950' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: '8aca5ce28c04cf2a6d5862a60f33ad73ee39ace9' }, h("div", { key: '302378bd95a8e54049c42e033a82cd4b82c18a5a' })));
+        return (h(Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.js

@@ -10,7 +10,7 @@ export class TdsSideMenuUser {
         this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, { key: 'a2e676265c9785f8a5b7b8a5215993e6e2e32920' }, h("tds-side-menu-user-image", { key: 'fb701c03e2eaa91219fc9cb73c6f4c74eb8283e8', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '9843e8b1007289ff4195f72582c0999069d1dd39', name: "image" })), h("tds-side-menu-user-label", { key: 'e6f60cd03846a92e7174a08b1e6513f91e71f919', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.js

@@ -12,7 +12,7 @@ export class TdsSideMenuUserImage {
         this.alt = undefined;
     }
     render() {
-        return (h(Host, { key: 'ea8f9c51aefab60fd2c32cee1be0344ec3fc6751' }, h("slot", { key: 'ae8fb3c065544aeb6c4737789e1dfefd5eb3a947' }), this.src && h("img", { key: '7b0b888ccaef7e1f40e82eb46c3bc09b78c92d0f', src: this.src, alt: this.alt })));
+        return (h(Host, { key: '62b6a38f0705b052cb4d5b9379bc77662f66c505' }, h("slot", { key: '99aeba48272e512ce419a934cb4147052a5e0190' }), this.src && h("img", { key: '352e0a3f93558b298835afbfe72193cdbebcffa4', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.js

@@ -5,7 +5,7 @@ export class TdsSideMenuUserLabel {
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '7bac8221992109403d3f0506b7f0125a0b77b6d4' }, this.heading, this.subheading && h("div", { key: 'b9137e36496fb7fc10da067ea61596da2a38fa9d', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu.css

@@ -148,4 +148,14 @@ aside .tds-side-menu-wrapper::-webkit-scrollbar-button {
     scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
     scrollbar-width: var(--tds-scrollbar-width-standard);
   }
+}
+aside [role=navigation] {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+aside li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }

package/dist/collection/components/side-menu/side-menu.js

@@ -25,6 +25,12 @@ export class TdsSideMenu {
         this.isUpperSlotEmpty = false;
         this.isCollapsed = false;
         this.initialCollapsedState = false;
+        this.activeElementIndex = 0;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            this.open = false;
+        }
     }
     connectedCallback() {
         this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
@@ -54,20 +60,93 @@ export class TdsSideMenu {
         });
         this.isCollapsed = newVal;
     }
+    onOpenChange(newVal) {
+        if (newVal) {
+            // When menu opens, focus the first interactive element
+            setTimeout(() => {
+                const focusableElements = this.getFocusableElements();
+                if (focusableElements.length > 0) {
+                    this.activeElementIndex = 0;
+                    focusableElements[0].focus();
+                }
+            }, 100);
+        }
+        else {
+            // When menu closes, focus the hamburger button
+            const hamburgerComponent = document.querySelector('tds-header-hamburger');
+            if (hamburgerComponent && hamburgerComponent.shadowRoot) {
+                const hamburgerButton = hamburgerComponent.shadowRoot.querySelector('button');
+                if (hamburgerButton) {
+                    hamburgerButton.focus();
+                }
+            }
+        }
+    }
+    getFocusableElements() {
+        var _a;
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
+        const closeBtn = (_a = this.host
+            .querySelector('[slot="close-button"]')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button');
+        let focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
+        if (closeBtn)
+            focusableElements.push(closeBtn);
+        /** Focusable elements */
+        return focusableElements;
+    }
+    handleFocusTrap(event) {
+        // Only trap focus if the menu is open
+        if (!this.open)
+            return;
+        // We care only about the Tab key
+        if (event.key !== 'Tab')
+            return;
+        const focusableElements = this.getFocusableElements();
+        // If there are no focusable elements
+        if (focusableElements.length === 0)
+            return;
+        // Prevent default tab behavior
+        event.preventDefault();
+        // Going backwards (Shift + Tab) on the first element => move to last
+        if (event.shiftKey) {
+            this.activeElementIndex -= 1;
+            if (this.activeElementIndex < 0) {
+                this.activeElementIndex = focusableElements.length - 1;
+            }
+        }
+        // Going forwards (Tab) on the last element => move to first
+        else {
+            this.activeElementIndex += 1;
+            if (this.activeElementIndex >= focusableElements.length) {
+                this.activeElementIndex = 0;
+            }
+        }
+        // Focus the next element
+        const nextElement = focusableElements[this.activeElementIndex];
+        nextElement.focus();
+    }
     collapsedSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (h(Host, { key: 'ed2a20dcd884744ac411ea9e51903f0fb8120c90', role: "navigation", class: {
+        return (h(Host, { key: '2c0eb423b3d2017d5872251ede6f72803e9ef801', class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            } }, h("div", { key: 'bf4c5f42a4ee78f5e6af782bcf4382a5d5978f3c', class: {
+            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: 'c97b41b370acad34053e859d5462bf0065df8c37', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, h("slot", { key: '7ba1a82ae21a7c2a22c2a470c67ed5acc0dfcad9', name: "overlay" }), h("aside", { key: 'c794132de394376c6b525cee5c1e58939c9159b5', class: `menu` }, h("slot", { key: 'ebd07545d79267ea3daa8a931eca6e46431a8993', name: "close-button" }), h("div", { key: '4d19ee85e6ae60ad4a745169e3690d022db26871', class: "tds-side-menu-wrapper" }, h("ul", { key: '055d5d0004aecbfa6abf5ff83025ce147b941ce0', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", { key: 'e8e8827959284214c469edd16b8b2ccb7e0f2daa' })), h("ul", { key: 'c1b4f82c9446e11c4d454336690c4b71998bdffd', class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { key: 'ee1d129567b8c11b9355dfbfebffa76674f8d281', name: "end" }))), h("slot", { key: '3b320259f8ea48744d3698e7271931671810f1b9', name: "sticky-end" })))));
+            } }, h("slot", { key: 'fbeb52ca602ec7277c7f9f61e4b7888a9c061f54', name: "overlay" }), h("aside", { key: '80056ecb45a908d9df923b37f1cd08bd1c104845', class: `menu` }, h("div", { key: 'b5683b57e67bd3d87d9cbfb697d9efbd17971dcc', role: "navigation" }, h("slot", { key: '21906bb776f9e967fd9a3cd377862bfa80311436', name: "close-button" }), h("div", { key: '7f6f34765d5b2fb63200fac39cded13fbf8154bf', class: "tds-side-menu-wrapper" }, h("ul", { key: '4a84684539fafcdf1e0d547ff73b288122e2e59e', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: '1b059f2100a6d28c4663c7251d2403b6abec3bc9' }, h("slot", { key: '851db0c06001297a09ed8a3931d095fe16269c0b' }))), h("ul", { key: '653046a5df1ebedb34b3a3745ea147a7cde82e00', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '7f79b3852859db84455d9d0b706a7bda1e057c4f' }, h("slot", { key: 'fdc0d6cd8000bb665ddcf4e1330a418ae75b1d12', name: "end" })))), h("slot", { key: 'a23279772a62b667ac167aaec1bfc908420c809d', name: "sticky-end" }))))));
     }
     static get is() { return "tds-side-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -85,7 +164,7 @@ export class TdsSideMenu {
         return {
             "open": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -143,7 +222,8 @@ export class TdsSideMenu {
         return {
             "isUpperSlotEmpty": {},
             "isCollapsed": {},
-            "initialCollapsedState": {}
+            "initialCollapsedState": {},
+            "activeElementIndex": {}
         };
     }
     static get events() {
@@ -223,10 +303,25 @@ export class TdsSideMenu {
         return [{
                 "propName": "collapsed",
                 "methodName": "onCollapsedChange"
+            }, {
+                "propName": "open",
+                "methodName": "onOpenChange"
             }];
     }
     static get listeners() {
         return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleFocusTrap",
+                "target": "window",
+                "capture": true,
+                "passive": false
+            }, {
                 "name": "internalTdsCollapse",
                 "method": "collapsedSideMenuEventHandler",
                 "target": "body",

package/dist/collection/components/slider/slider.css

@@ -8,6 +8,17 @@ tds-slider * {
 tds-slider input[type=range].tds-slider-native-element {
   display: none;
 }
+tds-slider .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 
 .tds-slider-wrapper {
   width: 100%;
@@ -16,6 +27,12 @@ tds-slider input[type=range].tds-slider-native-element {
   pointer-events: none;
 }
 
+.tds-slider-wrapper:focus-within {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: 2px;
+  border-radius: var(--tds-spacing-element-4);
+}
+
 .tds-slider {
   width: 100%;
   display: flex;

package/dist/collection/components/slider/slider.js

@@ -17,6 +17,8 @@ export class TdsSlider {
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
         this.resetEventListenerAdded = false;
+        this.ariaLiveElement = null;
+        this.announcementDebounceTimeout = null;
         this.resetToInitialValue = () => {
             this.forceValueUpdate(this.initialValue);
             this.reset();
@@ -36,7 +38,9 @@ export class TdsSlider {
         this.name = '';
         this.thumbSize = 'lg';
         this.snap = false;
+        this.tdsAriaLabel = '';
         this.sliderId = generateUniqueId();
+        this.tdsReadOnlyAriaLabel = '';
     }
     /** Public method to re-initialise the slider if some configuration props are changed */
     async reset() {
@@ -49,11 +53,21 @@ export class TdsSlider {
             case 'ArrowDown':
             case '-':
                 this.stepLeft(event);
+                this.announceValueChange();
                 break;
             case 'ArrowRight':
             case 'ArrowUp':
             case '+':
                 this.stepRight(event);
+                this.announceValueChange();
+                break;
+            case 'Home':
+                this.setToMinValue();
+                this.announceValueChange();
+                break;
+            case 'End':
+                this.setToMaxValue();
+                this.announceValueChange();
                 break;
             default:
                 break;
@@ -70,6 +84,9 @@ export class TdsSlider {
         }
         this.thumbGrabbed = false;
         this.thumbInnerElement.classList.remove('pressed');
+        if (this.thumbElement) {
+            this.thumbElement.setAttribute('aria-grabbed', 'false');
+        }
         this.updateValue(event);
         this.trackElement.focus();
     }
@@ -84,6 +101,18 @@ export class TdsSlider {
         this.value = newValue;
         this.updateTrack();
     }
+    setToMinValue() {
+        if (this.readOnly || this.disabled) {
+            return;
+        }
+        this.forceValueUpdate(this.min);
+    }
+    setToMaxValue() {
+        if (this.readOnly || this.disabled) {
+            return;
+        }
+        this.forceValueUpdate(this.max);
+    }
     updateSupposedValueSlot(localLeft) {
         const numTicks = parseInt(this.ticks);
         const trackWidth = this.getTrackWidth();
@@ -129,6 +158,15 @@ export class TdsSlider {
             this.trackFillElement.style.width = `${percentageFilled}%`;
         }
     }
+    announceValueChange() {
+        if (!this.ariaLiveElement)
+            return;
+        // Debounce announcements to prevent too many rapid announcements
+        clearTimeout(this.announcementDebounceTimeout);
+        this.announcementDebounceTimeout = setTimeout(() => {
+            this.ariaLiveElement.textContent = `${this.label ? this.label + ' ' : ''}${this.value} of ${this.max}`;
+        }, 50);
+    }
     updateValue(event) {
         const trackWidth = this.getTrackWidth();
         const min = parseFloat(this.min);
@@ -147,17 +185,29 @@ export class TdsSlider {
             this.value = Math.round(calculatedValue).toString();
         }
         this.updateTrack();
+        // Update ARIA attributes
+        if (this.thumbElement) {
+            this.thumbElement.setAttribute('aria-valuenow', this.value);
+            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
+        }
         this.tdsInput.emit({ value: this.value });
         /* Emit event after user has finished dragging the thumb */
         if (event.type === 'touchend' || event.type === 'mouseup') {
             this.tdsChange.emit({ value: this.value });
+            this.announceValueChange();
         }
     }
     forceValueUpdate(newValue) {
         this.calculateThumbLeftFromValue(newValue);
         this.value = newValue;
+        // Update ARIA attributes
+        if (this.thumbElement) {
+            this.thumbElement.setAttribute('aria-valuenow', this.value);
+            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
+        }
         this.tdsChange.emit({ value: this.value });
         this.updateTrack();
+        this.announceValueChange();
     }
     constrainThumb(x) {
         const width = this.getTrackWidth();
@@ -186,6 +236,7 @@ export class TdsSlider {
         this.updateSupposedValueSlot(this.thumbLeft);
         if (this.thumbElement) {
             this.thumbElement.style.left = `${this.thumbLeft}px`;
+            this.thumbElement.setAttribute('aria-valuenow', this.value);
         }
     }
     /** Updates the slider value based on the current input value */
@@ -219,6 +270,9 @@ export class TdsSlider {
         }
         this.thumbGrabbed = true;
         this.thumbInnerElement.classList.add('pressed');
+        if (this.thumbElement) {
+            this.thumbElement.setAttribute('aria-grabbed', 'true');
+        }
     }
     calculateInputSizeFromMax() {
         return this.max.length;
@@ -304,6 +358,13 @@ export class TdsSlider {
         if (!this.initialValue) {
             this.initialValue = this.value;
         }
+        // Set initial aria attributes
+        if (this.thumbElement) {
+            this.thumbElement.setAttribute('aria-valuenow', this.value);
+            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
+            // Ensure the thumb can receive focus via keyboard
+            this.thumbElement.tabIndex = this.disabled ? -1 : 0;
+        }
     }
     componentDidRender() {
         // Only add the event listener once:
@@ -315,31 +376,41 @@ export class TdsSlider {
             }
         }
     }
-    disconnectedCallback() {
+    connectedCallback() {
+        if (this.readOnly && !this.tdsReadOnlyAriaLabel) {
+            console.warn('tds-slider: tdsAriaLabel is reccomended when readonly is true');
+        }
         if (this.resetEventListenerAdded && this.formElement) {
             this.formElement.removeEventListener('reset', this.resetToInitialValue);
             this.resetEventListenerAdded = false;
         }
     }
     render() {
-        return (h("div", { key: '0bc25504b575817a7fb374dcedf021bca0c31e1d', class: {
+        const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
+        return (h("div", { key: 'ae3c809f6515fd13d7a793093bbae92f58f5564f', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '5d415abddae83b6faea5c1c7fc7a7fedbc2484aa', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '55d2251ecc7ff0cc30ff39be15cb065932976c2a', class: {
+            } }, h("input", { key: 'da5c23da29030150199cb0ecf0831ea37bdee587', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '1f772fd989ae370bb3324814514b85ce4c1b9b76', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+                this.ariaLiveElement = el;
+            } }), h("div", { key: '1fa7632ba2f333ff9465a4c0e191b913e07c4151', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: 'b43f34bbc7cbd7f8082ce17ef0f2b115fb5b41aa', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '30fcbd13672af1648cc74f48c6df7a1378f9f538', class: "tds-slider__input-values" }, h("div", { key: '5d41657b4ad6d062beba9fd0db6b709056245ec4', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '2ccc0bf2341ade649edfc24212ac5b2b59b21385', class: "tds-slider__controls" }, h("div", { key: 'ce7dcfd5686aadb18115926142e82f313951eb2f', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '6e6e6e990cac821b21b7f23690bf26d1a973525a', name: "minus", size: "16px" })))), h("div", { key: 'e64d393d7fe8abf33aa7a75ce7db93ab64f5fcab', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '85d36d8b772609e6cf72de94bf28ad0342d3558a', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '057feca60e9d4f5ba96f8ad83e937955c48b9ca4', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'de922947c8ec868eb652bebd508237f085a2b78a', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '7c5a0db184f8cb084ee8f6a3c6f55d657a07c001', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'dc3ff32d52c287383abcb697d8986759b5b36cda', class: "tds-slider__input-values" }, h("div", { key: '5fd2e123dcd760a3b51a14d73b8659e3fbf119c0', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '36e64d4a59ee41db8bca2b8ca4a230089a31c720', class: "tds-slider__controls" }, h("div", { key: '8c6d28a4fbce3e4182380c107c82807cb723857a', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '9eed66d33d28e9347c29b168f749762505673bf3', name: "minus", size: "16px" })))), h("div", { key: '79811abd81171a7ebc1ccae29fe44680c397bbe6', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'fd6fd8c10e31396fdfab4b84cd9c5776273472b2', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '458184b314a2b335aac32d6b7cf06bf8589c0724', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'a335e4acbf68e5da66d9933b49ae004832ba7c52', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '0318d2221c4b2c5ce460113111d18f63113ac4ec', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
+                if (this.thumbElement) {
+                    this.thumbElement.focus();
+                }
+            } }, h("div", { key: 'c6b2f77f3e2292e9a5d8fa8e04b5e7b86a96660c', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'ad87dc2827bb7ccd306d87f675654ae40a74aeb0', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '37eb10d60292ee19ef938055e088867cb7bddb0a', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: 'a25f6c8f4f79a4395bf3f0e380546089407dde98', class: "tds-slider__value" }, this.value, h("svg", { key: 'eca8aa480f914cb7984efef83ccec4dde9a907b8', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '64dded325632c7178df7ca035cfbd61403d6b7d0', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '19e520735e16de7defc900e836c3303668a6a68b', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'e5a39e8a3ec0b9acb8afa685f6c29385c78683a4', class: "tds-slider__value" }, this.value, h("svg", { key: '93606eddab33f49a3efb0dd646f974ddba6a4bc3', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3c6ca10c001f16da9a7e1f1bef893e4814984914', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '249ffe32d90c760c507c6b32bd5a658eeab8dc71', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '1ec5dab77cbe54a237cb5e951043378b18b25fe3', class: "tds-slider__input-values" }, h("div", { key: '8ce027db6a886c2aa2308b7f189cc9da69406146', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'a71a82d159456a59c2c92136d6b6c83faba5fdbf', class: "tds-slider__input-field-wrapper" }, h("input", { key: 'c6ef62b23580b1b6b41b7a35f9e1e7d98267b42d', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '61acb8a3bd20557d89adcdb58eb08b0692be20ac', class: "tds-slider__controls" }, h("div", { key: '74d3353d1edc9406e51f29038e737d0558d983a7', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '44ba3b91c185b97b7f5aeedf48155a24eb0f721f', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'a0687a2bfbc33fd5670b2aaa1e84c9bce67936cd', class: "tds-slider__input-values" }, h("div", { key: '9525015fb94d886ea4047e9af88f3030fb1c7647', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '7b8c7970d0e9e8ce8a061ddc17d09fa4acf9d9ae', class: "tds-slider__input-field-wrapper" }, h("input", { key: '84f1a30c962e0db6143fa6066fa525e00c0d7a7b', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'ab1e745fffc531b52cf2e50a279a9efb31ec2b9d', class: "tds-slider__controls" }, h("div", { key: '4f80f207d1f15e67c7e56319cd543ee9869ecc36', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'cf33d13ccce6d7c6cbda844e0dfac431bb429ce0', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -624,6 +695,24 @@ export class TdsSlider {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria-label for the slider control."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "sliderId": {
                 "type": "string",
                 "mutable": false,
@@ -641,6 +730,24 @@ export class TdsSlider {
                 "attribute": "slider-id",
                 "reflect": false,
                 "defaultValue": "generateUniqueId()"
+            },
+            "tdsReadOnlyAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the read only aria label for the input field"
+                },
+                "attribute": "tds-read-only-aria-label",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/spinner/spinner.js

@@ -5,7 +5,7 @@ export class TdsSpinner {
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: '95f9c4ff6ad75e990e037debeb13b20f4f9d0b81', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '901c96e841db8498d6fe5f0ec42d10afabd02a84', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'a71da609265f82835d116bf7836521948355d2fd', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: '2d27b4a94cd9dc205e11f18ecc6b249572912eac', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'a372dada808ed13b8c2c6ef4de9c559f59d9e9f2', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '153f00da5e87ba55dc569b511cd184f93c1740c7', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/stepper/step/step.js

@@ -40,7 +40,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '52d3dba71d4c2168b01ded26bcee31f8f80ffa16' }, h("div", { key: 'da5bc2ef45609d027885a03a3d34e21ee1eed015', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'a0f65e54f04848d7440c7427ac42e820c51ae609', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '51011c20479712a9caa7719975032482c2191977', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '5556c301e1119a09e0e8c63ac46af11d88f98c23', name: "label" }))))));
+        return (h(Host, { key: '871df74d99ed0bdf15fa82e0c2980b08b94735a8' }, h("div", { key: 'da3e220cb580c9d6d9f885fb2bca158f4af053a0', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'afb3083a29870f209eb2e8352e961a35e45e2a63', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '275fde3b68c573853bdb5b3bff3728b4abb56920', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'cdeaf4679e9c57173e641b0d09943374c92421bc', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }