@nectary/components 5.42.1 → 5.42.2

package/bundle.js

@@ -6695,7 +6695,7 @@ class Input extends NectaryElement {
         break;
       }
       case "aria-label": {
-        this.#$input.ariaLabel = newVal;
+        updateAttribute(this.#$input, "aria-label", newVal);
         break;
       }
     }
@@ -7219,6 +7219,9 @@ const getPopOrientation = (orientation) => {
 const templateHTML$S = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template$S = document.createElement("template");
+const isFocusableContent = (element) => {
+  return typeof element?.focusOnOpen === "function";
+};
 template$S.innerHTML = templateHTML$S;
 class Popover extends NectaryElement {
   #$pop;
@@ -7276,6 +7279,7 @@ class Popover extends NectaryElement {
       "open",
       "modal",
       "allow-scroll",
+      "focus-content-on-open",
       "tip",
       "aria-label",
       "aria-description"
@@ -7306,6 +7310,10 @@ class Popover extends NectaryElement {
         updateBooleanAttribute(this, name, isAttrTrue(newVal));
         break;
       }
+      case "focus-content-on-open": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
       case "modal":
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
@@ -7335,6 +7343,12 @@ class Popover extends NectaryElement {
   get allowScroll() {
     return getBooleanAttribute(this, "allow-scroll");
   }
+  set focusContentOnOpen(shouldFocus) {
+    updateBooleanAttribute(this, "focus-content-on-open", shouldFocus);
+  }
+  get focusContentOnOpen() {
+    return getBooleanAttribute(this, "focus-content-on-open");
+  }
   set open(isOpen) {
     updateBooleanAttribute(this, "open", isOpen);
   }
@@ -7369,6 +7383,12 @@ class Popover extends NectaryElement {
     }
     return elements[0];
   }
+  #focusSlottedContentOnOpen() {
+    const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
+    if (isFocusableContent(slottedContent)) {
+      slottedContent.focusOnOpen();
+    }
+  }
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
@@ -7385,6 +7405,10 @@ class Popover extends NectaryElement {
     if (e.detail) {
       this.#updateTipOrientation();
       this.#updateContentMaxWidth();
+      if (this.focusContentOnOpen) {
+        this.#$content.getBoundingClientRect();
+        this.#focusSlottedContentOnOpen();
+      }
     } else {
       this.#resetTipOrientation();
     }
@@ -15309,8 +15333,9 @@ class SelectMenuOption extends NectaryElement {
 }
 defineCustomElement("sinch-select-menu-option", SelectMenuOption);
 const isSelectMenuOption = (el) => el.localName === "sinch-select-menu-option";
-const templateHTML$h = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+const templateHTML$h = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search" aria-label="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="listbox" tabindex="-1"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
+const DEFAULT_SEARCH_LABEL = "Search";
 const template$h = document.createElement("template");
 template$h.innerHTML = templateHTML$h;
 class SelectMenu extends NectaryElement {
@@ -15337,13 +15362,14 @@ class SelectMenu extends NectaryElement {
     this.#searchDebounce = debounceTimeout(200)(this.#updateSearchValue);
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute("role", "listbox");
-    this.#internals.role = "listbox";
+    this.setAttribute("role", "group");
     this.tabIndex = 0;
+    this.#syncListboxLabel();
     this.addEventListener("keydown", this.#onListboxKeyDown, options);
     this.addEventListener("focus", this.#onFocus, options);
     this.addEventListener("blur", this.#onListboxBlur, options);
@@ -15388,6 +15414,7 @@ class SelectMenu extends NectaryElement {
     this.#searchDebounce.cancel();
     this.#controller.abort();
     this.#controller = null;
+    super.disconnectedCallback();
   }
   formAssociatedCallback() {
     setFormValue(this.#internals, CSVToFormData(this.name, this.value));
@@ -15412,6 +15439,8 @@ class SelectMenu extends NectaryElement {
       "rows",
       "multiple",
       "searchable",
+      "aria-label",
+      "aria-labelledby",
       // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchValue
       "search-value",
       // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchPlaceholder
@@ -15425,17 +15454,24 @@ class SelectMenu extends NectaryElement {
       case "multiple": {
         this.#onValueChange(this.value);
         updateExplicitBooleanAttribute(
-          this,
+          this.#$listbox,
           "aria-multiselectable",
           isAttrTrue(newVal)
         );
-        this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
         break;
       }
       case "searchable": {
         this.#onOptionSlotChange();
         break;
       }
+      case "aria-label": {
+        this.#syncListboxLabel();
+        break;
+      }
+      case "aria-labelledby": {
+        this.#syncListboxLabel();
+        break;
+      }
       case "search-autocomplete": {
         updateAttribute(this.#$search, "autocomplete", newVal);
         break;
@@ -15449,7 +15485,7 @@ class SelectMenu extends NectaryElement {
         break;
       }
       case "search-placeholder": {
-        updateAttribute(this.#$search, "placeholder", newVal);
+        this.#updateSearchPlaceholder(newVal);
         break;
       }
       case "search-value": {
@@ -15497,6 +15533,18 @@ class SelectMenu extends NectaryElement {
     const searchableAttribute = this.getAttribute("searchable");
     return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
   }
+  get "aria-label"() {
+    return getAttribute(this, "aria-label");
+  }
+  set "aria-label"(value) {
+    updateAttribute(this, "aria-label", value);
+  }
+  get "aria-labelledby"() {
+    return getAttribute(this, "aria-labelledby");
+  }
+  set "aria-labelledby"(value) {
+    updateAttribute(this, "aria-labelledby", value);
+  }
   set "search-autocomplete"(autocomplete) {
     updateAttribute(this.#$search, "autocomplete", autocomplete);
   }
@@ -15504,7 +15552,7 @@ class SelectMenu extends NectaryElement {
     return getAttribute(this.#$search, "autocomplete", "");
   }
   set "search-placeholder"(placeholder) {
-    updateAttribute(this.#$search, "placeholder", placeholder);
+    this.#updateSearchPlaceholder(placeholder);
   }
   get "search-placeholder"() {
     return getAttribute(this.#$search, "placeholder", "");
@@ -15519,12 +15567,22 @@ class SelectMenu extends NectaryElement {
   get focusable() {
     return true;
   }
+  focusOnOpen() {
+    this.#focusActiveSearch();
+  }
   #onFocus = () => {
-    const isSearchActive = hasClass(this.#$search, "active");
-    if (isSearchActive) {
-      this.#$search.focus();
+    if (getDeepActiveElement(this.ownerDocument) !== this) {
+      return;
     }
+    this.#focusActiveSearch();
   };
+  #focusActiveSearch() {
+    if (!this.isDomConnected || !hasClass(this.#$search, "active")) {
+      return;
+    }
+    this.#$search.getBoundingClientRect();
+    this.#$search.focus();
+  }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
@@ -15589,7 +15647,7 @@ class SelectMenu extends NectaryElement {
   #onContextVisibility = (e) => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
-      this.#onFocus();
+      this.#focusActiveSearch();
     } else {
       this.#selectOption(null);
     }
@@ -15627,7 +15685,30 @@ class SelectMenu extends NectaryElement {
       this.#dispatchChangeEvent(option);
     }
   };
+  #syncListboxLabel = () => {
+    const labelledby = getAttribute(this, "aria-labelledby");
+    const label = labelledby === null ? getAttribute(this, "aria-label") : null;
+    updateAttribute(this.#$listbox, "aria-labelledby", labelledby);
+    updateAttribute(this.#$listbox, "aria-label", label);
+  };
+  #updateSearchPlaceholder(placeholder) {
+    const currentPlaceholder = getAttribute(this.#$search, "placeholder");
+    const currentLabel = getAttribute(this.#$search, "aria-label");
+    const isManagedLabel = currentLabel === null || currentLabel === DEFAULT_SEARCH_LABEL || currentLabel === currentPlaceholder;
+    updateAttribute(this.#$search, "placeholder", placeholder);
+    if (isManagedLabel) {
+      updateAttribute(this.#$search, "aria-label", placeholder === null || placeholder === "" ? DEFAULT_SEARCH_LABEL : placeholder);
+    }
+  }
+  #syncListboxChildren = () => {
+    for (const $element of this.#$optionSlot.assignedElements()) {
+      if (!isSelectMenuOption($element) && getAttribute($element, "aria-hidden") !== "true") {
+        updateAttribute($element, "aria-hidden", "true");
+      }
+    }
+  };
   #onOptionSlotChange = () => {
+    this.#syncListboxChildren();
     if (this.hasAttribute("rows")) {
       this.#updateListboxMaxHeight();
     }

package/input/index.js

@@ -301,7 +301,7 @@ class Input extends NectaryElement {
         break;
       }
       case "aria-label": {
-        this.#$input.ariaLabel = newVal;
+        updateAttribute(this.#$input, "aria-label", newVal);
         break;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.42.1",
+  "version": "5.42.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/popover/index.d.ts

@@ -13,6 +13,8 @@ export declare class Popover extends NectaryElement {
     get modal(): boolean;
     set allowScroll(allow: boolean);
     get allowScroll(): boolean;
+    set focusContentOnOpen(shouldFocus: boolean);
+    get focusContentOnOpen(): boolean;
     set open(isOpen: boolean);
     get open(): boolean;
     set tip(hasTip: boolean);

package/popover/index.js

@@ -8,6 +8,9 @@ import { getPopOrientation, orientationValues } from "./utils.js";
 const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation=left]) #content-wrapper{padding-top:0;padding-right:4px}:host([orientation=right]) #content-wrapper{padding-top:0;padding-left:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}:host([orientation=left][tip]) #content-wrapper{padding-top:0;padding-right:12px}:host([orientation=right][tip]) #content-wrapper{padding-top:0;padding-left:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(-90deg);top:calc(50%);left:calc(100% - 13px)}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:calc(50%);left:13px}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template = document.createElement("template");
+const isFocusableContent = (element) => {
+  return typeof element?.focusOnOpen === "function";
+};
 template.innerHTML = templateHTML;
 class Popover extends NectaryElement {
   #$pop;
@@ -65,6 +68,7 @@ class Popover extends NectaryElement {
       "open",
       "modal",
       "allow-scroll",
+      "focus-content-on-open",
       "tip",
       "aria-label",
       "aria-description"
@@ -95,6 +99,10 @@ class Popover extends NectaryElement {
         updateBooleanAttribute(this, name, isAttrTrue(newVal));
         break;
       }
+      case "focus-content-on-open": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
       case "modal":
       case "open": {
         updateAttribute(this.#$pop, name, newVal);
@@ -124,6 +132,12 @@ class Popover extends NectaryElement {
   get allowScroll() {
     return getBooleanAttribute(this, "allow-scroll");
   }
+  set focusContentOnOpen(shouldFocus) {
+    updateBooleanAttribute(this, "focus-content-on-open", shouldFocus);
+  }
+  get focusContentOnOpen() {
+    return getBooleanAttribute(this, "focus-content-on-open");
+  }
   set open(isOpen) {
     updateBooleanAttribute(this, "open", isOpen);
   }
@@ -158,6 +172,12 @@ class Popover extends NectaryElement {
     }
     return elements[0];
   }
+  #focusSlottedContentOnOpen() {
+    const slottedContent = this.#getFirstAssignedElementInSlot(this.#$contentSlot);
+    if (isFocusableContent(slottedContent)) {
+      slottedContent.focusOnOpen();
+    }
+  }
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
@@ -174,6 +194,10 @@ class Popover extends NectaryElement {
     if (e.detail) {
       this.#updateTipOrientation();
       this.#updateContentMaxWidth();
+      if (this.focusContentOnOpen) {
+        this.#$content.getBoundingClientRect();
+        this.#focusSlottedContentOnOpen();
+      }
     } else {
       this.#resetTipOrientation();
     }

package/popover/types.d.ts

@@ -3,6 +3,8 @@ export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left'
 export type TSinchPopoverProps = {
     /** Allow scrolling of the page when popover is open */
     'allow-scroll'?: boolean;
+    /** Let slotted content opt into handling focus when the popover opens */
+    'focus-content-on-open'?: boolean;
     /** Open/close state */
     open: boolean;
     /** Orientation, where it *points to* from origin */

package/select-menu/index.d.ts

@@ -2,8 +2,9 @@ import '../input';
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
+import type { Focusable } from '../types';
 export * from './types';
-export declare class SelectMenu extends NectaryElement {
+export declare class SelectMenu extends NectaryElement implements Focusable {
     #private;
     static formAssociated: boolean;
     constructor();
@@ -24,6 +25,10 @@ export declare class SelectMenu extends NectaryElement {
     get multiple(): boolean;
     set searchable(isSearchable: boolean | null | undefined);
     get searchable(): boolean | null | undefined;
+    get 'aria-label'(): string | null;
+    set 'aria-label'(value: string | null);
+    get 'aria-labelledby'(): string | null;
+    set 'aria-labelledby'(value: string | null);
     set 'search-autocomplete'(autocomplete: string);
     get 'search-autocomplete'(): string;
     set 'search-placeholder'(placeholder: string);
@@ -31,4 +36,5 @@ export declare class SelectMenu extends NectaryElement {
     set 'search-value'(value: string);
     get 'search-value'(): string;
     get focusable(): boolean;
+    focusOnOpen(): void;
 }

package/select-menu/index.js

@@ -4,14 +4,15 @@ import "../text/index.js";
 import { isSelectMenuOption } from "../select-menu-option/utils.js";
 import { subscribeContext } from "../utils/context.js";
 import { unpackCsv, getFirstCsvValue, updateCsv } from "../utils/csv.js";
-import { getBooleanAttribute, updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, getAttribute, updateIntegerAttribute, getIntegerAttribute, updateBooleanAttribute, hasClass, setClass, attrValueToPixels } from "../utils/dom.js";
+import { getBooleanAttribute, updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, getAttribute, updateIntegerAttribute, getIntegerAttribute, updateBooleanAttribute, getDeepActiveElement, hasClass, setClass, attrValueToPixels } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { debounceTimeout } from "../utils/debounce.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { setFormValue, CSVToFormData } from "../utils/form.js";
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search" aria-label="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="listbox" tabindex="-1"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
+const DEFAULT_SEARCH_LABEL = "Search";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SelectMenu extends NectaryElement {
@@ -38,13 +39,14 @@ class SelectMenu extends NectaryElement {
     this.#searchDebounce = debounceTimeout(200)(this.#updateSearchValue);
   }
   connectedCallback() {
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute("role", "listbox");
-    this.#internals.role = "listbox";
+    this.setAttribute("role", "group");
     this.tabIndex = 0;
+    this.#syncListboxLabel();
     this.addEventListener("keydown", this.#onListboxKeyDown, options);
     this.addEventListener("focus", this.#onFocus, options);
     this.addEventListener("blur", this.#onListboxBlur, options);
@@ -89,6 +91,7 @@ class SelectMenu extends NectaryElement {
     this.#searchDebounce.cancel();
     this.#controller.abort();
     this.#controller = null;
+    super.disconnectedCallback();
   }
   formAssociatedCallback() {
     setFormValue(this.#internals, CSVToFormData(this.name, this.value));
@@ -113,6 +116,8 @@ class SelectMenu extends NectaryElement {
       "rows",
       "multiple",
       "searchable",
+      "aria-label",
+      "aria-labelledby",
       // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchValue
       "search-value",
       // eslint-disable-next-line @nectary/observed-attribute-accessor -- baseline backlog: missing set searchPlaceholder
@@ -126,17 +131,24 @@ class SelectMenu extends NectaryElement {
       case "multiple": {
         this.#onValueChange(this.value);
         updateExplicitBooleanAttribute(
-          this,
+          this.#$listbox,
           "aria-multiselectable",
           isAttrTrue(newVal)
         );
-        this.#internals.ariaMultiSelectable = isAttrTrue(newVal).toString();
         break;
       }
       case "searchable": {
         this.#onOptionSlotChange();
         break;
       }
+      case "aria-label": {
+        this.#syncListboxLabel();
+        break;
+      }
+      case "aria-labelledby": {
+        this.#syncListboxLabel();
+        break;
+      }
       case "search-autocomplete": {
         updateAttribute(this.#$search, "autocomplete", newVal);
         break;
@@ -150,7 +162,7 @@ class SelectMenu extends NectaryElement {
         break;
       }
       case "search-placeholder": {
-        updateAttribute(this.#$search, "placeholder", newVal);
+        this.#updateSearchPlaceholder(newVal);
         break;
       }
       case "search-value": {
@@ -198,6 +210,18 @@ class SelectMenu extends NectaryElement {
     const searchableAttribute = this.getAttribute("searchable");
     return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
   }
+  get "aria-label"() {
+    return getAttribute(this, "aria-label");
+  }
+  set "aria-label"(value) {
+    updateAttribute(this, "aria-label", value);
+  }
+  get "aria-labelledby"() {
+    return getAttribute(this, "aria-labelledby");
+  }
+  set "aria-labelledby"(value) {
+    updateAttribute(this, "aria-labelledby", value);
+  }
   set "search-autocomplete"(autocomplete) {
     updateAttribute(this.#$search, "autocomplete", autocomplete);
   }
@@ -205,7 +229,7 @@ class SelectMenu extends NectaryElement {
     return getAttribute(this.#$search, "autocomplete", "");
   }
   set "search-placeholder"(placeholder) {
-    updateAttribute(this.#$search, "placeholder", placeholder);
+    this.#updateSearchPlaceholder(placeholder);
   }
   get "search-placeholder"() {
     return getAttribute(this.#$search, "placeholder", "");
@@ -220,12 +244,22 @@ class SelectMenu extends NectaryElement {
   get focusable() {
     return true;
   }
+  focusOnOpen() {
+    this.#focusActiveSearch();
+  }
   #onFocus = () => {
-    const isSearchActive = hasClass(this.#$search, "active");
-    if (isSearchActive) {
-      this.#$search.focus();
+    if (getDeepActiveElement(this.ownerDocument) !== this) {
+      return;
     }
+    this.#focusActiveSearch();
   };
+  #focusActiveSearch() {
+    if (!this.isDomConnected || !hasClass(this.#$search, "active")) {
+      return;
+    }
+    this.#$search.getBoundingClientRect();
+    this.#$search.focus();
+  }
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
@@ -290,7 +324,7 @@ class SelectMenu extends NectaryElement {
   #onContextVisibility = (e) => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
-      this.#onFocus();
+      this.#focusActiveSearch();
     } else {
       this.#selectOption(null);
     }
@@ -328,7 +362,30 @@ class SelectMenu extends NectaryElement {
       this.#dispatchChangeEvent(option);
     }
   };
+  #syncListboxLabel = () => {
+    const labelledby = getAttribute(this, "aria-labelledby");
+    const label = labelledby === null ? getAttribute(this, "aria-label") : null;
+    updateAttribute(this.#$listbox, "aria-labelledby", labelledby);
+    updateAttribute(this.#$listbox, "aria-label", label);
+  };
+  #updateSearchPlaceholder(placeholder) {
+    const currentPlaceholder = getAttribute(this.#$search, "placeholder");
+    const currentLabel = getAttribute(this.#$search, "aria-label");
+    const isManagedLabel = currentLabel === null || currentLabel === DEFAULT_SEARCH_LABEL || currentLabel === currentPlaceholder;
+    updateAttribute(this.#$search, "placeholder", placeholder);
+    if (isManagedLabel) {
+      updateAttribute(this.#$search, "aria-label", placeholder === null || placeholder === "" ? DEFAULT_SEARCH_LABEL : placeholder);
+    }
+  }
+  #syncListboxChildren = () => {
+    for (const $element of this.#$optionSlot.assignedElements()) {
+      if (!isSelectMenuOption($element) && getAttribute($element, "aria-hidden") !== "true") {
+        updateAttribute($element, "aria-hidden", "true");
+      }
+    }
+  };
   #onOptionSlotChange = () => {
+    this.#syncListboxChildren();
     if (this.hasAttribute("rows")) {
       this.#updateListboxMaxHeight();
     }

package/select-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { Focusable, NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchSelectMenuProps = {
     /** Identification for uncontrolled form submissions */
     name?: string;
@@ -18,6 +18,8 @@ export type TSinchSelectMenuProps = {
     'search-placeholder'?: string;
     /** Label that is used for a11y */
     'aria-label': string;
+    /** Element ID reference that labels the listbox */
+    'aria-labelledby'?: string;
 };
 export type TSinchSelectMenuEvents = {
     /** Change value handler */
@@ -33,10 +35,12 @@ export type TSinchSelectMenuStyle = {
     '--sinch-comp-select-menu-font-not-found-text'?: string;
     '--sinch-comp-select-menu-font-max-height'?: string;
 };
+export type TSinchSelectMenuMethods = Focusable;
 export type TSinchSelectMenu = {
     props: TSinchSelectMenuProps;
     events: TSinchSelectMenuEvents;
     style: TSinchSelectMenuStyle;
+    methods: TSinchSelectMenuMethods;
 };
 export type TSinchSelectMenuElement = NectaryComponentVanillaByType<TSinchSelectMenu>;
 export type TSinchSelectMenuReact = NectaryComponentReactByType<TSinchSelectMenu>;

package/types.d.ts

@@ -6,6 +6,10 @@ export type TRect = {
     width: number;
     height: number;
 };
+export interface Focusable {
+    /** Called by containers that let slotted content choose where focus lands after opening. */
+    focusOnOpen(): void;
+}
 export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> & ExtendEventListeners<Required<SafeSelect<T, 'events'>>> & SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> & Required<CamelCaseify<SafeSelect<T, 'props'>>> & Required<SafeSelect<T, 'methods'>>;
 export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = PatchReactEvents<WebComponentReactBaseProp<NectaryComponentVanillaByType<T>>, ReactifyEvents<SafeSelect<T, 'events'>>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
     style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;