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

package/dist/collection/components/toast/toast.js

@@ -45,6 +45,8 @@ export class TdsToast {
         this.hidden = false;
         this.closable = true;
         this.toastRole = 'alert';
+        this.tdsCloseAriaLabel = undefined;
+        this.tdsAriaLive = 'polite';
     }
     /** Hides the Toast. */
     async hideToast() {
@@ -54,16 +56,21 @@ export class TdsToast {
     async showToast() {
         this.hidden = false;
     }
+    connectedCallback() {
+        if (!this.tdsCloseAriaLabel) {
+            console.warn('tds-toast: tdsCloseAriaLabel is required');
+        }
+    }
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '47e0159502e048c0359a5a17677f0456aa69a4da', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '9ebb217351e9fbdcb0bfef105969785e745bc184', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '6ae5a9da5c89de7a2336f48f495d61cc11286495', class: `
+            } }, h("div", { key: '361405e5f7b34ff4c450499ff5752ef3bb29c21a', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'c6ce5ea135bddef0ad0f7172ac8d7be6725a3597', name: this.getIconName(), size: "20px" }), h("div", { key: 'b3db26a1314c8a2d55c7d028cdc2f4951a738eaf', class: `content` }, h("div", { key: '3418ea02c85852fe548130c6c653a8dacdd9437a', class: "header-subheader" }, this.header && h("div", { key: '0a50b5e2a487be36a00ad89ad4f14cf1af83477d', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'df199798748ed7ade9cbda7f7ce798bb6f8fa995', name: "header" }), this.subheader && h("div", { key: '4978346a3726aea3af0aa7bb98487c36873045d3', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '49651b229907504dfca5aec35589595b421f6e1b', name: "subheader" })), usesActionsSlot && (h("div", { key: '6dbfa25c49118e92c2a254fb01156a95004f0738', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '85235296f757e0a6306d76ef83c855c3e9bb6cb4', name: "actions" })))), this.closable && (h("button", { key: 'd6946c5ff592b494be06dcb7b46dfc56b5eb5efc', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '51a93ef789343f24686183ba1747fc853e6d9e04', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: 'a905925f5a8825b0d4fdc278e2d958da31f24cc5', name: this.getIconName(), size: "20px" }), h("div", { key: 'c36eaed915074c188796476ccb6b3d48d1598272', class: `content` }, h("div", { key: 'd68b085fa0fd744f7e5b1f34e26fbb72c48ea65b', class: "header-subheader" }, this.header && h("div", { key: '7eb63f483c727f6dd21ea13f794f91daca138418', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '60393a0dd231897d27d01b2d8e5d0d563e917503', name: "header" }), this.subheader && h("div", { key: '4051a94947a9987f4c645c440de8f8cf4002911b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '1902bd9666847e51ac7bbc2f74d232f822d35127', name: "subheader" })), usesActionsSlot && (h("div", { key: '13c4debc87ca9b66f3c4155b6ccd7df39b9b98f6', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '05867f3250802cafe5a63d0583b626a819d5fdd9', name: "actions" })))), this.closable && (h("button", { key: 'da371c19b03e68d35e9a9251768cce8e3b5b23d9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'c09b9920715bec51cbc9b190e176578a2d1f0627', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -202,6 +209,41 @@ export class TdsToast {
                 "attribute": "toast-role",
                 "reflect": false,
                 "defaultValue": "'alert'"
+            },
+            "tdsCloseAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible name for the components close button"
+                },
+                "attribute": "tds-close-aria-label",
+                "reflect": false
+            },
+            "tdsAriaLive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA live for the Toast."
+                },
+                "attribute": "tds-aria-live",
+                "reflect": false,
+                "defaultValue": "'polite'"
             }
         };
     }

package/dist/collection/components/toggle/toggle.js

@@ -38,10 +38,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '8f8a77827f524c049aa004d15372a78e7fad41e2', class: "tds-toggle" }, this.headline && (h("div", { key: '8e254412e80362807046a893fc3f7c42a0c376ba', class: {
+        return (h("div", { key: '99809ab8c95f98930769fde49bb128c866fb4288', class: "tds-toggle" }, this.headline && (h("div", { key: '679f7488d0d0ec41e8c1c31234ffcc02fb7c811f', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: '47ed1307b67b61b1594006449fb1b4ccf6d031b8', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '75964d686710d6b4f8bbe365cc51c8aab3234d26', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'aeeaed1f37a160ce792df3f5115c75eaa0fd2c0a', name: "label" })))));
+            } }, this.headline)), h("input", { key: 'f08284dc8c171da0694a3b86c6ffb206861080cd', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: 'f5d7e6e3ac11cbc7b2eac4fcb2cebcd6f015c2bc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '686d693e4ec91573fe9c40eba7a67e7933f37dde', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -40,6 +40,12 @@ export class TdsTooltip {
         this.placement = 'bottom';
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
+        this.tdsAriaDescribedby = undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.show) {
+            this.show = false;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
@@ -52,16 +58,20 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '963a6dc4a3816d01ca9a1efc76ba06b98faba9f0' }, h("tds-popover-core", Object.assign({ key: '6bc8ffb25e5d31c2c3d9dda9867104990ae8ff18' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'tds-tooltip-show': this.show,
-            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
+            // @ts-ignore
+            onInternalTdsShow: () => {
                 this.show = true;
-            }, onInternalTdsClose: () => {
+            },
+            // @ts-ignore
+            onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '5df9224787bb470653278d121ceed41ea48b957a' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -263,8 +273,34 @@ export class TdsTooltip {
                 "attribute": "offset-distance",
                 "reflect": false,
                 "defaultValue": "8"
+            },
+            "tdsAriaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria-describedby attribute"
+                },
+                "attribute": "tds-aria-describedby",
+                "reflect": false
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,3 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
 export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();

package/dist/components/{p-c65351ab.js → p-14ab9663.js}

@@ -28,6 +28,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
+        this.tdsAriaLabel = undefined;
+        this.tdsAriaDescribedby = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -56,12 +58,17 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
             this.indeterminate = false;
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h("div", { key: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
+        return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
+            } }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -76,6 +83,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         "checked": [1540],
         "indeterminate": [1028],
         "value": [1],
+        "tdsAriaLabel": [1, "tds-aria-label"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"],
         "toggleCheckbox": [64]
     }, [[4, "reset", "handleFormReset"]], {
         "indeterminate": ["handleIndeterminateState"]

package/dist/components/p-17338bcb.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { i as inheritAttributes } from './p-3fe9cbbf.js';
+import { d as defineCustomElement$1 } from './p-e71e3b2e.js';
+
+const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
+const TdsTooltipStyle0 = tooltipCss;
+
+const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.popperjsExtraModifiers = [
+            {
+                name: 'positionCalc',
+                enabled: true,
+                phase: 'main',
+                fn: ({ state }) => {
+                    if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+                        this.border = 'top-left';
+                    }
+                    else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+                        this.border = 'top-right';
+                    }
+                    else if (state.placement === 'top-end' || state.placement === 'left-end') {
+                        this.border = 'bottom-right';
+                    }
+                    else if (state.placement === 'top-start' || state.placement === 'right-end') {
+                        this.border = 'bottom-left';
+                    }
+                    else if (state.placement === 'bottom' || state.placement === 'top') {
+                        this.border = 'default';
+                    }
+                },
+            },
+        ];
+        this.inheritedAttributes = [];
+        this.text = '';
+        this.selector = undefined;
+        this.referenceEl = undefined;
+        this.defaultShow = false;
+        this.mouseOverTooltip = false;
+        this.trigger = 'hover';
+        this.show = null;
+        this.placement = 'bottom';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.tdsAriaDescribedby = undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.show) {
+            this.show = false;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
+    }
+    determineTrigger() {
+        if (this.trigger === 'hover') {
+            return this.mouseOverTooltip ? 'hover-popover' : 'hover';
+        }
+        return this.trigger;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
+                'tds-tooltip': true,
+                [`tds-tooltip-${this.border}`]: true,
+                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+                'tds-tooltip-show': this.show,
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
+            // @ts-ignore
+            onInternalTdsShow: () => {
+                this.show = true;
+            },
+            // @ts-ignore
+            onInternalTdsClose: () => {
+                this.show = false;
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
+    }
+    get host() { return this; }
+    static get style() { return TdsTooltipStyle0; }
+}, [6, "tds-tooltip", {
+        "text": [1],
+        "selector": [1],
+        "referenceEl": [16],
+        "defaultShow": [4, "default-show"],
+        "mouseOverTooltip": [4, "mouse-over-tooltip"],
+        "trigger": [1],
+        "show": [1028],
+        "placement": [1],
+        "offsetSkidding": [2, "offset-skidding"],
+        "offsetDistance": [2, "offset-distance"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"]
+    }, [[8, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-tooltip", "tds-popover-core"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsTooltip);
+            }
+            break;
+        case "tds-popover-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TdsTooltip as T, defineCustomElement as d };

package/dist/components/{p-2a43e410.js → p-2d93a742.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { a as convertToString } from './p-b1d21573.js';
-import { d as defineCustomElement$2 } from './p-c65351ab.js';
-import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
+import { c as convertToString } from './p-a1181b1f.js';
+import { d as defineCustomElement$2 } from './p-14ab9663.js';
+import { d as defineCustomElement$1 } from './p-4487c541.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
 const TdsDropdownOptionStyle0 = dropdownOptionCss;
@@ -89,7 +89,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: 'f471d5238869b3a522b36d99d7549c1229cd83a2' }, h("div", { key: 'da9edccba96999b0ee40f8c599325774593de814', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -101,7 +101,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }