@scania/tegel 1.26.0 → 1.27.0-allow-numbers-and-zero-values-beta.0

package/dist/esm/tds-link.entry.js

@@ -11,14 +11,28 @@ const TdsLink = class {
         this.standalone = false;
     }
     connectedCallback() {
-        this.host.children[0].classList.add('tds-link-component');
+        const links = this.host.querySelectorAll('a');
+        if (links.length > 1) {
+            console.warn('tds-link is only intended to wrap one <a> tag');
+        }
+        const link = links[0];
+        if (link) {
+            if (this.disabled) {
+                link.setAttribute('tabindex', '-1');
+                link.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                link.removeAttribute('tabindex');
+                link.removeAttribute('aria-disabled');
+            }
+        }
     }
     render() {
-        return (h("span", { key: '3fa509835f66a3128ee487b34b47c0efb9e73d82', class: {
+        return (h("span", { key: '1183de952c2fd6cb1193e9e0dec419f37bf07dee', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: 'd83160f7b9b04e0e0cd9bd9184a45ac8ac504744' })));
+            } }, h("slot", { key: 'e019a83d2335cd0a7d682e79a6bf0148452c3e71' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-message.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
-const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper.minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .wrapper.minimal .header{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .wrapper.minimal.error .header{color:var(--tds-negative)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .content .extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";
+const messageCss = ":host{--tds-message-background:var(--background-elevation-layer-03);}:host .tds-mode-variant-primary{--tds-message-background:var(--background-elevation-layer-03)}:host .tds-mode-variant-secondary{--tds-message-background:var(--background-elevation-layer-02)}:host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--system-danger-subtle);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
 const TdsMessageStyle0 = messageCss;
 
 const TdsMessage = class {
@@ -25,14 +26,25 @@ const TdsMessage = class {
         this.variant = 'information';
         this.noIcon = false;
         this.minimal = false;
+        this.tdsAlertDialog = 'dialog';
+        this.tdsAriaLabel = undefined;
+    }
+    getAriaLabel() {
+        if (this.header) {
+            return undefined;
+        }
+        const variantLabel = `${this.variant} message`;
+        return this.tdsAriaLabel || variantLabel;
     }
     render() {
-        return (h(Host, { key: 'efeee188e97e2562fa55dcd8217277cc69f80010' }, h("div", { key: '9d0f0fb52a4dfeb6912d141f8ee124d45c8ad382', class: {
+        const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
+        const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
+        return (h(Host, { key: 'b28d7e5de5b3cb612e78f83650fa5c0621107dda', role: this.tdsAlertDialog, "aria-labelledby": headerId, "aria-describedby": contentId, "aria-label": this.getAriaLabel() }, h("div", { key: 'a3d7470a99af752df3516009d39f7e1c4bbed096', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, !this.noIcon && h("tds-icon", { key: 'd5fac1d2e80a7082520e5d8286f8cc3b158108fc', name: this.getIconName(), size: "20px" }), h("div", { key: 'e476f032fb5b14f219406f520690ce06b5677096', class: `content` }, this.header && h("div", { key: 'f9e23723c651c0c4ebf0a4da389779f87367739f', class: "header" }, this.header), !this.minimal && (h("div", { key: '3aa181cccd7fecbeea251245c54c53990956b271', class: "extended-message" }, h("slot", { key: 'ba233143933785b13fdeeee0f4154d4ce481dfe6' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: '5ce066cccec225e2707e660f73396f24197d024d', "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'ec0101d39dd0354b163219b732fd9dfa9cd66e60', class: `content` }, this.header && (h("div", { key: '434be3923b805cc8bd77d232a8cdbf847f9793c8', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '14f5ead963e55d7e3bad6abc69e97ba9f994316f', class: "extended-message", id: contentId }, h("slot", { key: '37c61ef3a396e37a7cb130951d44af9454163699' })))))));
     }
 };
 TdsMessage.style = TdsMessageStyle0;

package/dist/esm/tds-modal.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { h as hasSlot } from './hasSlot-d52114d0.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
 const modalCss = ".tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;max-height:85vh;overflow-y:auto;pointer-events:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:var(--tds-spacing-element-16);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05) !important;letter-spacing:var(--tds-headline-05-ls) !important;margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);overflow-y:visible;padding:0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
 const TdsModalStyle0 = modalCss;
@@ -10,6 +11,7 @@ const TdsModal = class {
         this.tdsClose = createEvent(this, "tdsClose", 7);
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
+            this.returnFocusOnClose();
             if (!closeEvent.defaultPrevented) {
                 this.isShown = false;
             }
@@ -58,15 +60,26 @@ const TdsModal = class {
         this.referenceEl = undefined;
         this.show = undefined;
         this.closable = true;
+        this.tdsAlertDialog = 'dialog';
         this.isShown = false;
+        this.activeElementIndex = 0;
     }
     /** Shows the Modal.  */
     async showModal() {
         this.isShown = true;
+        // Set focus on first element when opened
+        requestAnimationFrame(() => {
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+                this.activeElementIndex = 0;
+            }
+        });
     }
     /** Closes the Modal. */
     async closeModal() {
         this.isShown = false;
+        this.returnFocusOnClose();
     }
     connectedCallback() {
         if (this.closable === undefined) {
@@ -104,6 +117,63 @@ const TdsModal = class {
             dismissButton.removeEventListener('click', this.handleClose);
         });
     }
+    returnFocusOnClose() {
+        var _a;
+        let referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
+        // If referenced element is a custom element eg: tds-button we find the interactive element inside
+        if (potentialReferenceElements.indexOf(referenceEl.tagName) < 0) {
+            referenceEl = referenceEl.querySelectorAll(potentialReferenceElements.join(','))[0];
+        }
+        referenceEl.focus();
+    }
+    getFocusableElements() {
+        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));
+        /** Focusable elements */
+        return [...focusableInShadowRoot, ...focusableInSlots];
+    }
+    handleFocusTrap(event) {
+        if (event.key === 'Escape' && this.isShown && !this.prevent) {
+            this.handleClose(event);
+            return;
+        }
+        // Only trap focus if the modal is open
+        if (!this.isShown)
+            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;
+        event.preventDefault();
+        // Going backwards (Shift + Tab) on the first element => move to last
+        if (event.shiftKey) {
+            this.activeElementIndex -= 1;
+            if (this.activeElementIndex === -1) {
+                this.activeElementIndex = focusableElements.length - 1;
+            }
+        }
+        // // Going forwards (Tab) on the last element => move to first
+        if (!event.shiftKey) {
+            this.activeElementIndex += 1;
+            if (this.activeElementIndex === focusableElements.length) {
+                this.activeElementIndex = 0;
+            }
+        }
+        const nextElement = focusableElements[this.activeElementIndex];
+        nextElement.focus();
+    }
     /** Adds an event listener to the dismiss buttons that closes the Modal. */
     setDismissButtons() {
         this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
@@ -113,10 +183,12 @@ const TdsModal = class {
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '3b815395be0ccab91eebda3ca785528de624d17e', class: {
+        const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
+        const bodyId = `tds-modal-body-${generateUniqueId()}`;
+        return (h(Host, { key: '398809ea45126dd70b95422f2f7a08a481a22d53', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '84c9952f862e5defe06c04040e7031e08c5caca3', class: "tds-modal-backdrop" }), h("div", { key: '42b3ea985203a582b3a3dee5250b4a4468a23d6f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '06e005618aeab759c01f7d556cc4357f0aed0e1d', class: "header" }, this.header && h("div", { key: 'bff8080a479c4ecef96eae35dc0f33cc3fadaa8c', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'dbec4b999fcda87c5c751a8cf3eb7b9f66e1ec43', name: "header" }), this.closable && (h("button", { key: 'bfbfe0d3419aa5e2a5fcbab7691560ed5619dd05', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '3bcd38d4234a689acd63bb82e21b270c2b0825f9', name: "cross", size: "20px" })))), h("div", { key: '2fc5756d3261dfa354ce3025dc9d8ff213c49ba1', class: "body" }, h("slot", { key: '389ac6e307873c9de7c36c0960ce578cdfaf88e4', name: "body" })), usesActionsSlot && h("slot", { key: 'c964f9d3999f26995543187c553adcc9ac392f2a', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '96e964cc4f3c6d9613fb53e340e0aa5dcd8b6d81', class: "tds-modal-backdrop" }), h("div", { key: 'af7ddc896ef35b6116ae70524d10c4b7b952e20a', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '9dfcf95fcc8925cd5c97f10f29edc6cef183a0ca', id: headerId, class: "header" }, this.header && h("div", { key: '42533c25b07e696a0c61504556150018f8d3583a', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'd9855a20e1763ad17d6c8b80df85796d8f6027a8', name: "header" }), this.closable && (h("button", { key: '3e99b76da7bcf39eaecbe2906e0674fd20ebe9a6', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'f6463437fb98ae280afe358d50a2f960914014ea', name: "cross", size: "20px" })))), h("div", { key: 'ba8ca2e65f5eac8103e6f3c431e3ae9aab2b5f72', id: bodyId, class: "body" }, h("slot", { key: '9e08cbdd00e1a60826588b15cb6ed23fc4b5b0d7', name: "body" })), usesActionsSlot && h("slot", { key: 'aeb50dfcbf6c12e80a8904d149bb15892c691d88', name: "actions" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-navigation-tab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
 const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color) !important;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:26px;bottom:26px;outline:2px solid var(--tds-blue-400)}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
 const TdsNavigationTabStyle0 = navigationTabCss;
@@ -13,10 +13,29 @@ const TdsNavigationTab = class {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: '58749f71c75a0026b58645df3ccaa6ebd5e5dc9f', role: "listitem" }, h("div", { key: 'ed4cc04c74a69470c95f9ec3ba034c7ad6b9f2d3', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'ee7c740413087d0da51bdfc8da4509d482f1faeb' }))));
+        return (h(Host, { key: '51152bf313a84cb937e7f49e87cc8dcd74ab0612' }, h("div", { key: '5d55db68f75e042dafe40da1b9e84d74f1cd8849', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '174108daa16d6fa68c04244af1843771a4df91f5' }))));
     }
+    get host() { return getElement(this); }
 };
 TdsNavigationTab.style = TdsNavigationTabStyle0;
 

package/dist/esm/tds-navigation-tabs.entry.js

@@ -64,6 +64,8 @@ const TdsNavigationTabs = class {
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
         this.leftPadding = 32;
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        this.tdsScrollRightAriaLabel = 'Scroll right';
         this.showLeftScroll = false;
         this.showRightScroll = false;
     }
@@ -170,15 +172,15 @@ const TdsNavigationTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '0ca3544da4ef897b44bd2f55b0dc03edf7921818', role: "list", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '3eff9e0fc6b416171d0928e3e1933fed626fb3ec', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '809fe9d34b03949edae1708b6dea7f0406afee80', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '866605f8695441d7817c07895bdffd5e3e7ba5ac', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '730023259356eec4ec037e56a495dfea4f8d469c', class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2d394ecb940cee024174932676c2a6c22622c853', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '5e601f5e4a3aa308e5a5a636fc08c7b32387dbd9', name: "chevron_left", size: "20px" })), h("slot", { key: '43c9228e6c328b4cc651a9ffbd7dd8dbbfd592fe', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7eca0796fed3a98043abbbe306c29eed10cd8c5d', class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '09386162127467a545e00f44130352afb9cfed03', name: "chevron_left", size: "20px" })), h("slot", { key: '3b3cd70ed645318d0661a3acbee3d2bc748314cf', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '1afb2dc9b261626db800593548d7e023e14cd39b', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9b84ae33c083f41ce6d8a83da1f1edb37c95de55', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '451a8ddc680799fd86e390d8aeab5c22c73f31ee', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {