@scania/tegel 1.28.1-tegelmodule.0 → 1.29.0-1.29.0-fix-spinner-alignment-beta.1

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.css

@@ -1,25 +1,25 @@
 /* Component variables aka overrides */
 :root {
-  --spinner-background-inverted: rgba(255, 255, 255, 1);
+  --spinner-background-inverted: rgb(255 255 255 / 100%);
 }
 
 :root,
 .scania,
 .scania .tds-mode-light {
-  --spinner-background: rgba(43, 112, 211, 1);
+  --spinner-background: rgb(43 112 211 / 100%);
 }
 
 .scania .tds-mode-dark {
-  --spinner-background: rgba(74, 137, 243, 1);
+  --spinner-background: rgb(74 137 243 / 100%);
 }
 
 .traton,
 .traton .tds-mode-light {
-  --spinner-background: rgba(0, 72, 82, 1);
+  --spinner-background: rgb(0 72 82 / 100%);
 }
 
 .traton .tds-mode-dark {
-  --spinner-background: rgba(194, 191, 182, 1);
+  --spinner-background: rgb(194 191 182 / 100%);
 }
 
 /* Component variables */
@@ -48,6 +48,7 @@
 }
 
 .tds-spinner-svg {
+  display: block;
   width: calc(var(--spinner-radius) * 2);
   height: calc(var(--spinner-radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);

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"; }

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

@@ -46,7 +46,7 @@ export class TdsStepper {
         });
     }
     render() {
-        return (h(Host, { key: '1e8a8233006dd3245e647140974b2284d3d00f1b' }, h("div", { key: '7641e3e3fd3b0a36427b62b6074ff4a281d7bb28', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '49f5ede099a422b04a5950269a2fa94816280ee1' }))));
+        return (h(Host, { key: '83520f04716c1a9314858780bcd31d63b6fd1192' }, h("div", { key: '5b024281e8bc253f9790b0670c7c1d78b897e49a', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '271835f2b05c6ec8ecf34433897848e23a02da03' }))));
     }
     static get is() { return "tds-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table/table.js

@@ -89,11 +89,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: '4d156fac32972a0493c44dc235134370f503c43c', class: {
+        return (h(Host, { key: '7a9b7fb545f7c4cd4c0f118910ce8af6d407851e', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: 'da2663a9406f0f5a68ba789fd9ae16e474f28b6e', style: this.getStyles(), class: {
+            } }, h("table", { key: '8a1c7e74c38a55e17d7cf322997f6690d6b29f3f', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -104,7 +104,7 @@ export class TdsTable {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '1fc2d3dc9a43c87adea2ad500f573838c23bd2ca' }))));
+            } }, h("slot", { key: 'a47351a50dbd07b15f969ffaeb75f62045693968' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body/table-body.js

@@ -60,12 +60,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '0e0b165d1fe72aecfb3ab6f5afcf2c19b917e389', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: 'f9472ae9b1dcad43aab101811dfe858dea4851e9', "data-selected-rows": this.multiselectArrayJSON, class: {
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, h("slot", { key: 'abc4a35c7c216a7becde1dba32f0a9eadb9364c4' })));
+            } }, h("slot", { key: '61a0ec649d2f7f51ca386c46335a6ae018c993d0' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -83,13 +83,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '1a20de405d23d807c9584791793ecc271354ef56', class: {
+        return (h(Host, { key: 'cfabd07f5fb68862ec1afe31679d492593e5a579', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-            }, style: dynamicStyles }, this.cellValue, h("slot", { key: '0954fdb9b7ab354dd9321602b6d4045afc72fc1f' })));
+            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'cb0466abad9e73f9daed8483304246deb79d37e8' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js

@@ -60,10 +60,28 @@ export class TdsTableBodyInputWrapper {
             input.addEventListener('blur', () => {
                 this.inputFocused = false;
             });
+            // Handle Enter key event
+            input.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    this.moveToNextEditableCell();
+                }
+            });
+        }
+    }
+    moveToNextEditableCell() {
+        const allEditableCells = Array.from(document.querySelectorAll('tds-table-body-input-wrapper'));
+        const currentIndex = allEditableCells.indexOf(this.host);
+        if (currentIndex !== -1 && currentIndex < allEditableCells.length - 1) {
+            const nextCell = allEditableCells[currentIndex + 1];
+            const nextInput = nextCell.querySelector('input');
+            if (nextInput) {
+                nextInput.focus();
+            }
         }
     }
     render() {
-        return (h(Host, { key: '83dc46604d7d5607e22684a405224afcb21c463d', class: {
+        return (h(Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -68,13 +68,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: 'fa5a532c518a73a9bc4fb3b94475bb6c7fb0530b', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (h("td", { key: 'dd524054a3b9db562b6ffb01a93175b4b8e8b5ff', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'ab960de6521b221af09a5ccdfc0142cd2bf1e72c', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '55a4c8f8397ca5d45676fbd3b9e3ab51ca5bc401' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -21,6 +21,7 @@ export class TdsTableBodyRowExpandable {
         this.expanded = undefined;
         this.overflow = 'auto';
         this.autoCollapse = false;
+        this.tdsAriaLabelExpandButton = '';
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -100,26 +101,26 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '6eaab9070f782ad29c6733f1a012eda6720d5f2c', class: {
+        return (h(Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '2dade2d71b2421e82ec4a78568d4a1b5b9d0bb60', class: {
+            } }, h("tr", { key: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '5748b3aeab6adc7f5c2bb322aa706464b845d798', class: {
+            }, part: "row" }, h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '185b91d4dd5c5ecf2c2f246474a3147b65deede0', class: "tds-table__expand-control-container" }, h("input", { key: 'eb4f25a58fab25fd686fac95b41425b49b2bf591', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '74c4bf376c53cdea707921610e383d3c4830f1a1', class: "tds-expendable-row-icon" }, h("svg", { key: '0b5a3c5fc2d86d4809d7a50153d835c06e61e5d4', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '009fac726b97fdf9d2b02b958ee6f62be275e65c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '06614199b6fde8f643e0bdb34e51e5874e66d689' })), h("tr", { key: '6980ce96e91be2e3b1b96c5115a1aad52aeedf94', class: {
+            } }, h("label", { key: 'c878be3429a3145b62b242f2e3d9c90ec0a74257', class: "tds-table__expand-control-container" }, h("input", { key: '6b99ef165e359012f83f7e298d9f83319493fc52', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'ec9e1aefc553362c0c3e15cb99118a9c2dfffd04', class: "tds-expendable-row-icon" }, h("svg", { key: '84b3270e5f1bfc7671adcea34d862fe0485f40a8', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'fc04209a4a2d35c19c7c74875c0ab302077abbf2', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '0c16341da217fbe920241a97b179335cb61e2364' })), h("tr", { key: 'a83ca5c30ec4945dfee096a408db4d1d240d3643', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'f539ee0187f3b5fa7600110d8655c78d1010afdf', class: {
+            }, part: "expand-row" }, h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '0af12e1435d9cce526565183f6281c99432d4de2', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: 'cbfdcaed15bb00884c8c5f54b9eb52aab0c6870a', name: "expand-row" }))))));
+            } }, h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -223,6 +224,24 @@ export class TdsTableBodyRowExpandable {
                 "attribute": "auto-collapse",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabelExpandButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the expand button, providing an accessible description"
+                },
+                "attribute": "tds-aria-label-expand-button",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/table/table-footer/table-footer.js

@@ -127,12 +127,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9b21be9df87785ac51f00fc0fc739fe4980d8d69', class: {
+        return (h(Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '3ec21be1dd53ab45ebeca5081a9c2f0597930dea', class: "tds-table__footer-row" }, h("td", { key: '739364c5f7417c3da2d8eefceb071e5c4df80e25', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'edb2e4cb6c893ad947feba4cdd4ca72c283bf6cf', class: "tds-table__pagination" }, h("div", { key: 'ab721dbd4e55d7e66b0ac1344a588e0d7e89ab6a', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'f77ccfd43490d91a4853f95177b37206ed091f4f', class: "rows-per-page" }, h("p", { key: 'a654e24545b62882588a765a1a6e9ff0929d7c85' }, "Rows per page"), h("tds-dropdown", { key: 'd72a44a2edb5ea7973bbeff68a7150d8f0b9cfdc', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '02d6c97e498e44ad70c86fd08cc665a8b89e2a07', class: "tds-table__footer-row" }, h("td", { key: 'e9d64ea0f3be240867d886973a40c557fe9899da', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '4a8f3f921a4e103a1a14e368a4702cd8f6ceb18b', class: "tds-table__pagination" }, h("div", { key: 'c536fb9916071677bf20f033ebb184d469aa0774', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '5a935d6c92a574e1ea0a081e955916526ec9da45', class: "rows-per-page" }, h("p", { key: 'ae9f908bc6803a814236a56e5801857a1989df54' }, "Rows per page"), h("tds-dropdown", { key: '1bcac2201accc7d613250c8f38b77ddc04bfb463', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: '74b3ca1895fac9a5f6c40c54cb3802d995a5af64', class: "tds-table__page-selector" }, h("input", { key: 'b1d32a9f834b09dd10c8d160c16d0c4acaa334b3', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '10eec5a6d55728121629358a669b4528a84b20b2', class: "tds-table__footer-text" }, "of ", h("span", { key: '74a89f18a367946a695f6df45cb879f755b52127' }, this.pages), " pages"), h("button", { key: '57c4e14b227692166ff22eb70ffd91f387156a0c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '85af6d8297fb4d4a16d9569d3b32df843ecb9238', name: "skip_backwards", size: "20px" })), h("button", { key: 'ecbc0e6c623f0e34e0143a5525f85dad0a4ea503', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'd5c9f208529b0c2780f615e83eaa561287e45b57', name: "chevron_left", size: "20px" })), h("button", { key: '7451440c861a8e707dbe3ed138cd480403c9e063', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '09b034dca95d82c3eb1b0738e256580ed60c0be3', name: "chevron_right", size: "20px" })), h("button", { key: 'ed5ebd4705683f7a0693a31c4ced121d1f54f660', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: 'b96224ea1fd759bb944066fbb73bddd64e52ce1d', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header/table-header.js

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: 'e503496c4c86dd5ea411ac950195047efe2abd68', class: {
+        return (h(Host, { key: '6c1cc431846a627cab836e62a551f9f5d6558a9d', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '249ad4aee1ea1bf9ed989afcce31706f829f2372' }, this.multiselect && (h("th", { key: '4766432503a95018ab3af151d13a7cfe431bec20', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'e92d809b3c0e8aeab578c1d744def9dd2bfe9975', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'aed850f2651fcc65baa2d82ac7d33b59b502cedd', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'bb89288d56a3911eced41933ab32015c8e333722', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '505c660ccdeec2b563bad55322666c4b69222b7e' }))));
+            } }, h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -31,7 +31,7 @@ export class TdsTableHeaderCell {
         };
         this.headerCellContent = () => {
             if (this.sortable) {
-                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState } }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
+                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState }, "aria-label": this.tdsAriaLabelSortButton }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { svgTitle: "sorting", class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { svgTitle: "arrow down", class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
             }
             return (h("p", { class: {
                     'tds-table__header-text': true,
@@ -50,6 +50,7 @@ export class TdsTableHeaderCell {
         this.sortable = false;
         this.textAlign = 'left';
         this.disablePadding = false;
+        this.tdsAriaLabelSortButton = '';
         this.textAlignState = undefined;
         this.sortingDirection = undefined;
         this.sortedByMyKey = false;
@@ -104,8 +105,15 @@ export class TdsTableHeaderCell {
         this.enableToolbarDesign =
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
+    getAriaSort() {
+        if (this.sortingDirection === 'asc')
+            return 'ascending';
+        if (this.sortingDirection === 'desc')
+            return 'descending';
+        return 'none';
+    }
     render() {
-        return (h(Host, { key: '5bfbed888fd12522741f991542a308772799ceee', class: {
+        return (h(Host, { key: 'f128527938679fe448019802ea76cda1a57d75be', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -116,7 +124,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
+            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -236,6 +244,24 @@ export class TdsTableHeaderCell {
                 "attribute": "disable-padding",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabelSortButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the sort button, providing an accessible description"
+                },
+                "attribute": "tds-aria-label-sort-button",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }