@sbb-esta/lyne-elements-dev 5.13.1-dev.1794294068 → 5.13.1-dev.1794307456

package/custom-elements.json

@@ -5101,7 +5101,7 @@
                   }
                 }
               ],
-              "description": "Add a language change handler."
+              "description": "Add a language change handler.\nTODO: Refactor to EventTarget."
             },
             {
               "kind": "method",
@@ -6139,6 +6139,22 @@
             "text": "Record<string, string>"
           },
           "default": "{ de: 'Jahre', en: 'years', fr: 'ans', it: 'anni', }"
+        },
+        {
+          "kind": "variable",
+          "name": "i18nButton",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{ de: 'Schaltfläche', en: 'Button', fr: 'Bouton', it: 'Pulsante', }"
+        },
+        {
+          "kind": "variable",
+          "name": "i18nAutocompleteActionsHint",
+          "type": {
+            "text": "Record<string, string>"
+          },
+          "default": "{ de: 'Drücken Sie Pfeil links oder rechts für verfügbare Aktionen', en: 'Press arrow left or right for available actions', fr: 'Appuyez sur les flèches gauche ou droite pour les actions disponibles', it: 'Usare i tasti freccia destra o sinistra per le azioni disponibili', }"
         }
       ],
       "exports": [
@@ -6997,6 +7013,22 @@
             "name": "i18nLogo125AnniversaryYears",
             "module": "core/i18n/i18n.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "i18nButton",
+          "declaration": {
+            "name": "i18nButton",
+            "module": "core/i18n/i18n.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "i18nAutocompleteActionsHint",
+          "declaration": {
+            "name": "i18nAutocompleteActionsHint",
+            "module": "core/i18n/i18n.js"
+          }
         }
       ]
     },
@@ -30812,7 +30844,8 @@
               }
             }
           ],
-          "description": "Add meaningful aria attributes to trigger element of role='combobox'"
+          "description": "Add meaningful aria attributes to trigger element of role='combobox'",
+          "deprecated": "true"
         },
         {
           "kind": "function",
@@ -30831,7 +30864,8 @@
               }
             }
           ],
-          "description": "Remove aria attributes from trigger elements."
+          "description": "Remove aria attributes from trigger elements.",
+          "deprecated": "true"
         }
       ],
       "exports": [
@@ -66655,6 +66689,7 @@
                 "text": "string"
               },
               "privacy": "protected",
+              "deprecated": "*",
               "readonly": true
             },
             {
@@ -66663,15 +66698,9 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "panelRole",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "''",
+              "deprecated": "*"
             },
             {
               "kind": "field",
@@ -67010,6 +67039,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "handleOptionChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_setNextActiveOptionIfAutoActiveFirstOption",
@@ -67772,6 +67811,7 @@
             "name": "SbbOpenCloseBaseElement",
             "module": "core.js"
           },
+          "deprecated": "Will be inlined into autocompelte with next major release.",
           "classGenerics": "T = string"
         }
       ],
@@ -67828,7 +67868,7 @@
               "kind": "field",
               "name": "role",
               "type": {
-                "text": "string"
+                "text": "ElementInternals['role'] | undefined"
               },
               "privacy": "public",
               "static": true,
@@ -67836,8 +67876,7 @@
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               },
-              "readonly": true,
-              "default": "'button'"
+              "readonly": true
             },
             {
               "kind": "field",
@@ -67859,6 +67898,30 @@
               "description": "Gets the parent SbbOptGroupElement, if present.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_languageController",
+              "privacy": "private",
+              "default": "new SbbLanguageController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "_textContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "elements",
+                  "type": {
+                    "text": "readonly Element[] | null | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "isDisabledExternally",
@@ -68428,13 +68491,14 @@
             },
             {
               "kind": "field",
-              "name": "['_$sbbElement$']",
+              "name": "role",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
               "privacy": "public",
               "static": true,
-              "default": "true",
+              "readonly": true,
+              "default": "'group'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
@@ -68442,12 +68506,36 @@
             },
             {
               "kind": "field",
-              "name": "elementDependencies",
+              "name": "_assignedDescription",
               "type": {
-                "text": "SbbElementType[] | undefined"
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_languageController",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_updateAriaDescription",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "['_$sbbElement$']",
+              "type": {
+                "text": "boolean"
               },
               "privacy": "public",
               "static": true,
+              "default": "true",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
@@ -68455,9 +68543,9 @@
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "elementDependencies",
               "type": {
-                "text": "ElementInternals['role'] | undefined"
+                "text": "SbbElementType[] | undefined"
               },
               "privacy": "public",
               "static": true,
@@ -68779,7 +68867,7 @@
               "kind": "field",
               "name": "role",
               "type": {
-                "text": "ElementInternals['role'] | undefined"
+                "text": "string"
               },
               "privacy": "public",
               "static": true,
@@ -68787,33 +68875,8 @@
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               },
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "generatedId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "`sbb-autocomplete-${++nextId}`",
-              "inheritedFrom": {
-                "name": "SbbAutocompleteBaseElement",
-                "module": "autocomplete/autocomplete/autocomplete-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "panelRole",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "'listbox'",
-              "inheritedFrom": {
-                "name": "SbbAutocompleteBaseElement",
-                "module": "autocomplete/autocomplete/autocomplete-base-element.js"
-              }
+              "readonly": true,
+              "default": "'listbox'"
             },
             {
               "kind": "field",
@@ -68920,6 +68983,20 @@
                 "module": "autocomplete/autocomplete/autocomplete-base-element.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleOptionChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "kind": "method",
               "name": "_setNextHorizontalActiveElement",
@@ -69215,12 +69292,27 @@
                 "text": "string"
               },
               "privacy": "protected",
+              "deprecated": "*",
               "readonly": true,
               "inheritedFrom": {
                 "name": "SbbAutocompleteBaseElement",
                 "module": "autocomplete/autocomplete/autocomplete-base-element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "generatedId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''",
+              "deprecated": "*",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "activeOption",

package/development/autocomplete/autocomplete/autocomplete-base-element.d.ts

@@ -12,6 +12,7 @@ declare const SbbAutocompleteBaseElement_base: import("../../core.ts").AbstractC
  *
  * @event {Event} change - The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
  * @event {InputEvent} input - The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.
+ * @deprecated Will be inlined into autocompelte with next major release.
  */
 export declare abstract class SbbAutocompleteBaseElement<T = string> extends SbbAutocompleteBaseElement_base {
     static styles: CSSResultGroup;
@@ -67,9 +68,10 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
     /** Returns the trigger element. */
     get triggerElement(): HTMLInputElement | null;
     private _triggerElement?;
+    /** @deprecated **/
     protected get overlayId(): string;
-    protected abstract generatedId: string;
-    protected abstract panelRole: string;
+    /** @deprecated **/
+    protected generatedId: string;
     protected activeOption: SbbOptionBaseElement<T> | null;
     protected pendingAutoSelectedOption: SbbOptionBaseElement<T> | null;
     private _resizeObserver;
@@ -116,6 +118,7 @@ export declare abstract class SbbAutocompleteBaseElement<T = string> extends Sbb
     /** Set the option value within the input element */
     private _setInputValue;
     private _handleSlotchange;
+    protected handleOptionChange(): void;
     private _setNextActiveOptionIfAutoActiveFirstOption;
     /** The autocomplete should inherit 'readonly' state from the trigger. */
     private _readonly;

package/development/autocomplete/autocomplete/autocomplete.component.d.ts

@@ -13,9 +13,7 @@ import { SbbAutocompleteBaseElement } from './autocomplete-base-element.ts';
  */
 export declare class SbbAutocompleteElement<T = string> extends SbbAutocompleteBaseElement<T> {
     static readonly elementName: string;
-    static readonly role: string | null;
-    protected generatedId: string;
-    protected panelRole: string;
+    static readonly role = "listbox";
     /** Index of the active element within the active option's row (0 = option, >0 = a button). */
     private _activeColumnIndex;
     protected get options(): SbbOptionElement<T>[];
@@ -27,6 +25,7 @@ export declare class SbbAutocompleteElement<T = string> extends SbbAutocompleteB
      */
     protected selectByKeyboard(event: KeyboardEvent): void;
     protected setNextActiveOption(event?: KeyboardEvent): void;
+    protected handleOptionChange(): void;
     /**
      * Moves the active element horizontally within the active option's `sbb-autocomplete-row`,
      * between the option itself and its `sbb-autocomplete-button`s.

package/development/autocomplete/autocomplete-button/autocomplete-button.component.d.ts

@@ -9,18 +9,20 @@ declare const SbbAutocompleteButtonElement_base: import("../../core.ts").Abstrac
  */
 export declare class SbbAutocompleteButtonElement extends SbbAutocompleteButtonElement_base {
     static readonly elementName: string;
-    static readonly role = "button";
+    static readonly role: string;
     static styles: CSSResultGroup;
     /** Gets the SbbOptionElement on the same row of the button. */
     get option(): SbbOptionElement | null;
     /** Gets the parent SbbOptGroupElement, if present. */
     get optgroup(): SbbOptGroupElement | null;
+    private _languageController;
     constructor();
     /**
      * Whether the button is currently active.
      * @internal
      */
     setActive(value: boolean): void;
+    private _textContent;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     connectedCallback(): void;
     protected isDisabledExternally(): boolean;

package/development/autocomplete/autocomplete-row/autocomplete-row.component.d.ts

@@ -7,8 +7,12 @@ import { SbbElement } from '../../core.ts';
  */
 export declare class SbbAutocompleteRowElement extends SbbElement {
     static readonly elementName: string;
+    static readonly role: string;
     static styles: CSSResultGroup;
+    private _assignedDescription?;
+    private _languageController;
     constructor();
+    private _updateAriaDescription;
     protected render(): TemplateResult;
 }
 declare global {

package/development/autocomplete.pure.js

@@ -1,9 +1,9 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
-import { html, isServer, nothing, unsafeCSS } from "lit";
+import { html, isServer, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
-import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, forceType, getNextElementIndex, idReference, isAndroid, isEventOnElement, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, scrollbarStyles, setAriaComboBoxAttributes, setOverlayPosition } from "./core.js";
+import { SbbActionBaseElement, SbbDisabledMixin, SbbElement, SbbEscapableOverlayController, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbPropertyWatcherController, appendAriaElements, forceType, getNextElementIndex, i18nAutocompleteActionsHint, i18nButton, idReference, isAndroid, isEventOnElement, isIOS, isMacOS, isSafari, isZeroAnimationDuration, popoverResetStyles, removeAriaComboBoxAttributes, sbbLiveAnnouncer, scrollbarStyles, setOverlayPosition } from "./core.js";
 import { optionPanelStyles } from "./option.pure.js";
 import { miniButtonStyle } from "./button.pure.js";
 import { SbbIconNameMixin } from "./icon.pure.js";
@@ -12,11 +12,6 @@ import { SbbIconNameMixin } from "./icon.pure.js";
 var autocomplete_base_element_default = ":host {\n  display: none;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  display: block;\n}\n";
 
 // src/elements/autocomplete/autocomplete/autocomplete-base-element.ts
-/**
-* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
-*/
-const ariaRoleOnHost$1 = isSafari;
 var SbbInputAutocompleteEvent = class extends Event {
 	get option() {
 		return this._option;
@@ -34,6 +29,7 @@ var SbbInputAutocompleteEvent = class extends Event {
 *
 * @event {Event} change - The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
 * @event {InputEvent} input - The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.
+* @deprecated Will be inlined into autocompelte with next major release.
 */
 let SbbAutocompleteBaseElement = (() => {
 	let _classSuper = SbbNegativeMixin(SbbOpenCloseBaseElement);
@@ -366,8 +362,9 @@ let SbbAutocompleteBaseElement = (() => {
 		get triggerElement() {
 			return this._triggerElement ?? null;
 		}
+		/** @deprecated **/
 		get overlayId() {
-			return `${this.id}-overlay`;
+			return this.id;
 		}
 		constructor() {
 			super();
@@ -382,6 +379,8 @@ let SbbAutocompleteBaseElement = (() => {
 			this.#requireSelection_accessor_storage = (__runInitializers(this, _autoSelectActiveOptionOnBlur_extraInitializers), __runInitializers(this, _requireSelection_initializers, false));
 			this.#position_accessor_storage = (__runInitializers(this, _requireSelection_extraInitializers), __runInitializers(this, _position_initializers, "auto"));
 			this._triggerElement = __runInitializers(this, _position_extraInitializers);
+			/** @deprecated **/
+			this.generatedId = "";
 			this.activeOption = null;
 			this.pendingAutoSelectedOption = null;
 			this._resizeObserver = new ResizeController(this, {
@@ -458,7 +457,7 @@ let SbbAutocompleteBaseElement = (() => {
 		connectedCallback() {
 			this.popover = "manual";
 			super.connectedCallback();
-			this.id ||= this.generatedId;
+			this.tabIndex = -1;
 			if (this.hasUpdated) this._componentSetup();
 			this.syncNegative();
 		}
@@ -536,7 +535,9 @@ let SbbAutocompleteBaseElement = (() => {
 				if (this._optionsCount > 0 && this.options.length === 0) this.close();
 			} else if (document?.activeElement === this.triggerElement && this._optionsCount === 0 && this.options.length > 0) this.open();
 			this._optionsCount = this.options.length;
+			this.handleOptionChange();
 		}
+		handleOptionChange() {}
 		_setNextActiveOptionIfAutoActiveFirstOption() {
 			if (this.autoActiveFirstOption) {
 				this.resetActiveElement();
@@ -680,9 +681,6 @@ let SbbAutocompleteBaseElement = (() => {
       <div class="sbb-option-panel__overlay-container">
         <div
           class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
-          role=${!ariaRoleOnHost$1 ? this.panelRole : nothing}
-          id=${!ariaRoleOnHost$1 ? this.overlayId : nothing}
-          tabindex="-1"
           @animationend=${this._onAnimationEnd}
           ${ref((overlayRef) => this._overlay = overlayRef)}
         >
@@ -705,7 +703,7 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 		this.elementName = "sbb-autocomplete-button";
 	}
 	static {
-		this.role = "button";
+		this.role = isSafari ? "button" : "option";
 	}
 	static {
 		this.styles = [miniButtonStyle];
@@ -720,7 +718,14 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 	}
 	constructor() {
 		super();
+		this._languageController = new SbbLanguageController(this);
 		this.internals.states.add("button");
+		if (!isSafari) {
+			this.internals.ariaRoleDescription = "";
+			const updateDescription = () => this.internals.ariaDescription = i18nButton[this._languageController.current];
+			updateDescription();
+			this._languageController.withHandler(updateDescription);
+		}
 		if (!isServer) {
 			this.setupBaseEventHandlers();
 			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), { disabled: () => this._updateInternals() }));
@@ -733,6 +738,18 @@ var SbbAutocompleteButtonElement = class extends SbbDisabledMixin(SbbNegativeMix
 	*/
 	setActive(value) {
 		this.toggleState("focus-visible", value);
+		if (value && isSafari && isMacOS) {
+			const output = [];
+			if (this.ariaLabel) output.push(this.ariaLabel);
+			else if (this.ariaLabelledByElements?.length) output.push(this._textContent(this.ariaLabelledByElements));
+			if (this.ariaDescription) output.push(this.ariaDescription);
+			else if (this.ariaDescribedByElements?.length) output.push(this._textContent(this.ariaDescribedByElements));
+			output.push(i18nButton[this._languageController.current]);
+			sbbLiveAnnouncer.announce(output.join(", "), "assertive");
+		}
+	}
+	_textContent(elements) {
+		return elements?.map((el) => el.textContent.trim().replace(/\.$/, "")).join(". ") ?? "";
 	}
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
@@ -772,26 +789,42 @@ var SbbAutocompleteRowElement = class extends SbbElement {
 	static {
 		this.elementName = "sbb-autocomplete-row";
 	}
+	static {
+		this.role = "group";
+	}
 	static {
 		this.styles = [unsafeCSS(autocomplete_row_default)];
 	}
 	constructor() {
 		super();
+		this._languageController = new SbbLanguageController(this).withHandler(() => this._updateAriaDescription());
 		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this.toggleState("negative", e.negative) }));
 		this.addController(new SbbPropertyWatcherController(this, () => this.querySelector("sbb-option"), { disabled: (e) => this.toggleState("disabled", e.disabled) }));
 	}
+	_updateAriaDescription() {
+		if (isIOS || isAndroid) return;
+		const hasButton = !!this.querySelector("sbb-autocomplete-button");
+		const option = this.querySelector("sbb-option");
+		if (!option) return;
+		if (!option["internals"]) customElements.upgrade(option);
+		if (hasButton) option["internals"].ariaDescription = i18nAutocompleteActionsHint[this._languageController.current];
+		else if (!hasButton && option["internals"].ariaDescription) option["internals"].ariaDescription = null;
+		if (isSafari) {
+			if (hasButton && (!option.ariaDescription || this._assignedDescription && option.ariaDescription === this._assignedDescription && option.ariaDescription !== i18nAutocompleteActionsHint[this._languageController.current])) {
+				option.ariaDescription = i18nAutocompleteActionsHint[this._languageController.current];
+				this._assignedDescription = option.ariaDescription;
+			} else if (!hasButton && this._assignedDescription && option.ariaDescription === this._assignedDescription) {
+				option.ariaDescription = null;
+				this._assignedDescription = void 0;
+			}
+		}
+	}
 	render() {
-		return html`<slot></slot>`;
+		return html`<slot @slotchange=${this._updateAriaDescription}></slot>`;
 	}
 };
 
 // src/elements/autocomplete/autocomplete/autocomplete.component.ts
-let nextId = 0;
-/**
-* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
-* On the other hand, JAWS and NVDA need the role to be "closer" to the options, or else optgroups won't work.
-*/
-const ariaRoleOnHost = isSafari;
 /**
 * Combined with a native input, it displays a panel with a list of available options.
 *
@@ -806,8 +839,6 @@ const ariaRoleOnHost = isSafari;
 var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 	constructor() {
 		super(...arguments);
-		this.generatedId = `sbb-autocomplete-${++nextId}`;
-		this.panelRole = "listbox";
 		/** Index of the active element within the active option's row (0 = option, >0 = a button). */
 		this._activeColumnIndex = 0;
 	}
@@ -815,7 +846,7 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		this.elementName = "sbb-autocomplete";
 	}
 	static {
-		this.role = ariaRoleOnHost ? "listbox" : null;
+		this.role = "listbox";
 	}
 	get options() {
 		return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
@@ -866,6 +897,19 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		if (event) event.preventDefault();
 		if (this.autoSelectActiveOption && event) this.setPendingSelection(this.activeOption);
 	}
+	handleOptionChange() {
+		const options = this.options;
+		const optionsCount = `${options.length}`;
+		let position = 1;
+		for (const option of options) {
+			const buttons = Array.from(option.closest("sbb-autocomplete-row")?.querySelectorAll("sbb-autocomplete-button") ?? []);
+			for (const element of [option, ...buttons]) {
+				element["internals"].ariaSetSize = optionsCount;
+				element["internals"].ariaPosInSet = `${position}`;
+			}
+			position++;
+		}
+	}
 	/**
 	* Moves the active element horizontally within the active option's `sbb-autocomplete-row`,
 	* between the option itself and its `sbb-autocomplete-button`s.
@@ -900,7 +944,13 @@ var SbbAutocompleteElement = class extends SbbAutocompleteBaseElement {
 		if (this.triggerElement) this.triggerElement.ariaActiveDescendantElement = null;
 	}
 	setTriggerAttributes(element) {
-		setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false);
+		if (!element) return;
+		element.autocomplete = "off";
+		element.role = "combobox";
+		element.ariaAutoComplete = "list";
+		element.ariaHasPopup = "listbox";
+		element.ariaControlsElements = appendAriaElements(element.ariaControlsElements, this);
+		element.ariaExpanded = "false";
 	}
 };
 

package/development/core/controllers/language-controller.d.ts

@@ -23,7 +23,10 @@ export declare class SbbLanguageController implements ReactiveController {
     private _previousLanguage?;
     private _handlers;
     constructor(_host: ReactiveControllerHost);
-    /** Add a language change handler. */
+    /**
+     * Add a language change handler.
+     * TODO: Refactor to EventTarget.
+     */
     withHandler(handler: () => void): this;
     hostConnected(): void;
     hostDisconnected(): void;

package/development/core/i18n/i18n.d.ts

@@ -106,3 +106,5 @@ export declare const i18nSlide: Record<string, string>;
 export declare const i18nRemainingCharacters: Record<string, string>;
 export declare const i18nLogo125Anniversary: Record<string, string>;
 export declare const i18nLogo125AnniversaryYears: Record<string, string>;
+export declare const i18nButton: Record<string, string>;
+export declare const i18nAutocompleteActionsHint: Record<string, string>;

package/development/core/overlay/overlay-trigger-attributes.d.ts

@@ -9,9 +9,11 @@ export declare function setAriaOverlayTriggerProperties(overlay: HTMLElement, tr
 export declare function removeAriaOverlayTriggerProperties(trigger: HTMLElement | null | undefined): void;
 /**
  * Add meaningful aria attributes to trigger element of role='combobox'
+ * @deprecated
  */
 export declare function setAriaComboBoxAttributes(trigger: HTMLElement, overlayId: string, expanded: boolean, hasPopup?: 'listbox' | 'grid'): void;
 /**
  * Remove aria attributes from trigger elements.
+ * @deprecated
  */
 export declare function removeAriaComboBoxAttributes(trigger?: HTMLElement | null): void;