@scania/tegel 1.26.0 → 1.27.0-toast-aria-live.0

package/dist/collection/components/link/link.js

@@ -9,14 +9,28 @@ export class TdsLink {
         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' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.css

@@ -1,3 +1,17 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+:host {
+  /* Default values */
+  --tds-message-background: var(--background-elevation-layer-03);
+  /* Variant values */
+}
+: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;
@@ -5,43 +19,45 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-information);
+  border-left: 4px solid var(--system-info-default);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-information);
+  color: var(--system-info-default);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-positive);
+  border-left: 4px solid var(--system-success-default);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-positive);
+  color: var(--system-success-default);
 }
 :host .wrapper.error {
-  background-color: var(--tds-message-type-error-background);
-  border-left: 4px solid var(--tds-negative);
+  background-color: var(--system-danger-subtle);
+  border-left: 4px solid var(--system-danger-default);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-negative);
+  color: var(--system-danger-default);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-warning);
+  border-left: 4px solid var(--system-warning-default);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--tds-warning);
+  color: var(--system-warning-default);
 }
 :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);
+  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(--tds-negative);
+  color: var(--system-danger-default);
 }
 :host tds-icon {
   padding-right: 16px;
@@ -50,21 +66,23 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  color: var(--tds-message-color);
+  color: var(--foreground-text-strong);
   padding: 2px 0;
 }
 :host .content .header {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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(--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);
+  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);
 }

package/dist/collection/components/message/message.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
  */
@@ -23,14 +24,25 @@ export class TdsMessage {
         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' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }
@@ -134,6 +146,41 @@ export class TdsMessage {
                 "attribute": "minimal",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/modal/modal.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot header - Slot for header text
  * @slot body - Slot for main content of modal
@@ -9,6 +10,7 @@ export class TdsModal {
     constructor() {
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
+            this.returnFocusOnClose();
             if (!closeEvent.defaultPrevented) {
                 this.isShown = false;
             }
@@ -57,15 +59,26 @@ export class TdsModal {
         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) {
@@ -103,6 +116,63 @@ export class TdsModal {
             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) => {
@@ -112,10 +182,12 @@ export class TdsModal {
     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" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -273,12 +345,31 @@ export class TdsModal {
                 "attribute": "closable",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
             }
         };
     }
     static get states() {
         return {
-            "isShown": {}
+            "isShown": {},
+            "activeElementIndex": {}
         };
     }
     static get events() {
@@ -372,4 +463,13 @@ export class TdsModal {
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleFocusTrap",
+                "target": "window",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }