@nectary/components 5.42.1 → 5.42.3

package/bundle.js

@@ -3485,6 +3485,12 @@ class Pop extends NectaryElement {
     targetStyleValue: null,
     transformedAncestor: null
   };
+  static #dialogA11yAttrs = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-description"
+  ];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -3515,7 +3521,7 @@ class Pop extends NectaryElement {
     const { signal } = this.#controller;
     this.#keydownContext.listen(signal);
     this.#visibilityContext.listen(signal);
-    this.setAttribute("role", "dialog");
+    this.#syncDialogA11yAttrs();
     this.#$dialog.addEventListener("cancel", this.#onCancel, { signal });
     this.#$dialog.addEventListener("mousedown", this.#onBackdropMouseDown, { signal });
     this.addEventListener("-close", this.#onCloseReactHandler, { signal });
@@ -3536,7 +3542,12 @@ class Pop extends NectaryElement {
   static get observedAttributes() {
     return [
       "orientation",
-      "open"
+      "open",
+      "modal",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-description"
     ];
   }
   get allowScroll() {
@@ -3606,7 +3617,42 @@ class Pop extends NectaryElement {
         }
         break;
       }
+      case "modal": {
+        if (this.#$dialog.open) {
+          this.#syncDialogSemantics(this.#shouldUseModalSemantics());
+        }
+        break;
+      }
+      case "aria-label":
+      case "aria-labelledby":
+      case "aria-describedby":
+      case "aria-description": {
+        this.#syncDialogA11yAttrs();
+        break;
+      }
+    }
+  }
+  #syncDialogA11yAttrs() {
+    Pop.#dialogA11yAttrs.forEach((attrName) => {
+      const attrVal = this.getAttribute(attrName);
+      if (attrVal === null) {
+        this.#$dialog.removeAttribute(attrName);
+      } else {
+        this.#$dialog.setAttribute(attrName, attrVal);
+      }
+    });
+  }
+  #syncDialogSemantics(useDialogSemantics) {
+    if (useDialogSemantics) {
+      this.setAttribute("role", "dialog");
+      this.#$dialog.setAttribute("aria-modal", "true");
+      return;
     }
+    this.removeAttribute("role");
+    this.#$dialog.removeAttribute("aria-modal");
+  }
+  #shouldUseModalSemantics(transformedAncestor = this.#openSession.transformedAncestor) {
+    return this.modal && transformedAncestor === null;
   }
   #getTargetRect() {
     let item = getFirstSlotElement(this.#$targetSlot, true);
@@ -3682,7 +3728,7 @@ class Pop extends NectaryElement {
     }
     const transformedAncestor = getTransformedAncestor(this);
     const effectiveAllowScroll = this.allowScroll || transformedAncestor != null;
-    const shouldUseModal = this.modal && transformedAncestor == null;
+    const shouldUseModal = this.#shouldUseModalSemantics(transformedAncestor);
     const openAsModal = shouldUseModal || !effectiveAllowScroll;
     this.#openSession = {
       effectiveAllowScroll,
@@ -3690,6 +3736,8 @@ class Pop extends NectaryElement {
       targetStyleValue: null,
       transformedAncestor
     };
+    this.#syncDialogA11yAttrs();
+    this.#syncDialogSemantics(shouldUseModal);
     this.#$targetSlot.addEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.setAttribute("tabindex", "-1");
     this.#$focus.style.display = "block";
@@ -3800,6 +3848,7 @@ class Pop extends NectaryElement {
       targetStyleValue: null,
       transformedAncestor: null
     };
+    this.#syncDialogSemantics(false);
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
@@ -4166,6 +4215,7 @@ class Tooltip extends NectaryElement {
     updateAttribute(this.#$pop, "orientation", getPopOrientation$1(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
+    this.#updatePopAriaLabel();
     this.#updateText();
   }
   disconnectedCallback() {
@@ -4211,6 +4261,7 @@ class Tooltip extends NectaryElement {
     switch (name) {
       case "text": {
         this.#updateText();
+        this.#updatePopAriaLabel();
         break;
       }
       case "orientation": {
@@ -4233,7 +4284,11 @@ class Tooltip extends NectaryElement {
       }
       case "aria-label":
       case "aria-description": {
-        updateAttribute(this.#$pop, name, newVal);
+        if (name === "aria-label") {
+          this.#updatePopAriaLabel();
+        } else {
+          updateAttribute(this.#$pop, name, newVal);
+        }
         break;
       }
       case "show-outside-viewport": {
@@ -4809,6 +4864,13 @@ class Tooltip extends NectaryElement {
       this.#subscribeMouseEnterEvent();
     }
   }
+  #updatePopAriaLabel() {
+    const rawAriaLabel = getAttribute(this, "aria-label");
+    const explicitAriaLabel = rawAriaLabel !== null && rawAriaLabel.trim().length > 0 ? rawAriaLabel.trim() : null;
+    const fallbackAriaLabel = this.text ?? "";
+    const ariaLabel = explicitAriaLabel ?? (fallbackAriaLabel.length === 0 ? null : fallbackAriaLabel);
+    updateAttribute(this.#$pop, "aria-label", ariaLabel);
+  }
   #subscribeMouseEnterEvent() {
     if (!this.isDomConnected || this.#isSubscribed) {
       return;
@@ -6695,7 +6757,7 @@ class Input extends NectaryElement {
         break;
       }
       case "aria-label": {
-        this.#$input.ariaLabel = newVal;
+        updateAttribute(this.#$input, "aria-label", newVal);
         break;
       }
     }
@@ -7219,6 +7281,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 +7341,7 @@ class Popover extends NectaryElement {
       "open",
       "modal",
       "allow-scroll",
+      "focus-content-on-open",
       "tip",
       "aria-label",
       "aria-description"
@@ -7306,6 +7372,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 +7405,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 +7445,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 +7467,10 @@ class Popover extends NectaryElement {
     if (e.detail) {
       this.#updateTipOrientation();
       this.#updateContentMaxWidth();
+      if (this.focusContentOnOpen) {
+        this.#$content.getBoundingClientRect();
+        this.#focusSlottedContentOnOpen();
+      }
     } else {
       this.#resetTipOrientation();
     }
@@ -9558,7 +9644,7 @@ class HelpTooltip extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["aria-label", "text", "width", "orientation"];
+    return ["aria-label", "text", "orientation"];
   }
   attributeChangedCallback(name, _, newVal) {
     updateAttribute(this.#$tooltip, name, newVal);
@@ -9569,12 +9655,6 @@ class HelpTooltip extends NectaryElement {
   set text(value) {
     updateAttribute(this, "text", value);
   }
-  get width() {
-    return getIntegerAttribute(this, "width");
-  }
-  set width(value) {
-    updateIntegerAttribute(this, "width", value);
-  }
   get orientation() {
     return getAttribute(this, "orientation", "top");
   }
@@ -15309,8 +15389,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 +15418,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 +15470,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 +15495,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 +15510,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 +15541,7 @@ class SelectMenu extends NectaryElement {
         break;
       }
       case "search-placeholder": {
-        updateAttribute(this.#$search, "placeholder", newVal);
+        this.#updateSearchPlaceholder(newVal);
         break;
       }
       case "search-value": {
@@ -15497,6 +15589,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 +15608,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 +15623,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 +15703,7 @@ class SelectMenu extends NectaryElement {
   #onContextVisibility = (e) => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
-      this.#onFocus();
+      this.#focusActiveSearch();
     } else {
       this.#selectOption(null);
     }
@@ -15627,7 +15741,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/help-tooltip/index.d.ts

@@ -11,8 +11,6 @@ export declare class HelpTooltip extends NectaryElement {
     attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
     get text(): string;
     set text(value: string);
-    get width(): number | undefined;
-    set width(value: number | undefined);
     get orientation(): string;
     set orientation(value: string);
     get footprintRect(): import("../types").TRect;

package/help-tooltip/index.js

@@ -1,6 +1,6 @@
 import "../tooltip/index.js";
 import "../icon/index.js";
-import { updateAttribute, getAttribute, getIntegerAttribute, updateIntegerAttribute } from "../utils/dom.js";
+import { updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon></sinch-tooltip>';
@@ -30,7 +30,7 @@ class HelpTooltip extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["aria-label", "text", "width", "orientation"];
+    return ["aria-label", "text", "orientation"];
   }
   attributeChangedCallback(name, _, newVal) {
     updateAttribute(this.#$tooltip, name, newVal);
@@ -41,12 +41,6 @@ class HelpTooltip extends NectaryElement {
   set text(value) {
     updateAttribute(this, "text", value);
   }
-  get width() {
-    return getIntegerAttribute(this, "width");
-  }
-  set width(value) {
-    updateIntegerAttribute(this, "width", value);
-  }
   get orientation() {
     return getAttribute(this, "orientation", "top");
   }

package/help-tooltip/types.d.ts

@@ -1,6 +1,15 @@
-import type { TSinchTooltipProps } from '../tooltip/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
-export type TSinchHelpTooltipProps = TSinchTooltipProps;
+import type { TSinchTooltipOrientation } from '../tooltip/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+export type TSinchHelpTooltipProps = {
+    /** Accessible name for the tooltip content */
+    'aria-label'?: string;
+    /** Text */
+    text: string;
+    /** Orientation, where it *points to* from origin */
+    orientation?: TSinchTooltipOrientation;
+    readonly footprintRect?: TRect;
+    readonly tooltipRect?: TRect;
+};
 export type TSinchHelpTooltipStyle = {
     '--sinch-global-size-icon'?: string;
 };

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.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -35,6 +35,12 @@ class Pop extends NectaryElement {
     targetStyleValue: null,
     transformedAncestor: null
   };
+  static #dialogA11yAttrs = [
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-description"
+  ];
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -65,7 +71,7 @@ class Pop extends NectaryElement {
     const { signal } = this.#controller;
     this.#keydownContext.listen(signal);
     this.#visibilityContext.listen(signal);
-    this.setAttribute("role", "dialog");
+    this.#syncDialogA11yAttrs();
     this.#$dialog.addEventListener("cancel", this.#onCancel, { signal });
     this.#$dialog.addEventListener("mousedown", this.#onBackdropMouseDown, { signal });
     this.addEventListener("-close", this.#onCloseReactHandler, { signal });
@@ -86,7 +92,12 @@ class Pop extends NectaryElement {
   static get observedAttributes() {
     return [
       "orientation",
-      "open"
+      "open",
+      "modal",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-description"
     ];
   }
   get allowScroll() {
@@ -156,8 +167,43 @@ class Pop extends NectaryElement {
         }
         break;
       }
+      case "modal": {
+        if (this.#$dialog.open) {
+          this.#syncDialogSemantics(this.#shouldUseModalSemantics());
+        }
+        break;
+      }
+      case "aria-label":
+      case "aria-labelledby":
+      case "aria-describedby":
+      case "aria-description": {
+        this.#syncDialogA11yAttrs();
+        break;
+      }
     }
   }
+  #syncDialogA11yAttrs() {
+    Pop.#dialogA11yAttrs.forEach((attrName) => {
+      const attrVal = this.getAttribute(attrName);
+      if (attrVal === null) {
+        this.#$dialog.removeAttribute(attrName);
+      } else {
+        this.#$dialog.setAttribute(attrName, attrVal);
+      }
+    });
+  }
+  #syncDialogSemantics(useDialogSemantics) {
+    if (useDialogSemantics) {
+      this.setAttribute("role", "dialog");
+      this.#$dialog.setAttribute("aria-modal", "true");
+      return;
+    }
+    this.removeAttribute("role");
+    this.#$dialog.removeAttribute("aria-modal");
+  }
+  #shouldUseModalSemantics(transformedAncestor = this.#openSession.transformedAncestor) {
+    return this.modal && transformedAncestor === null;
+  }
   #getTargetRect() {
     let item = getFirstSlotElement(this.#$targetSlot, true);
     if (item === null && this.#$dialog.open) {
@@ -232,7 +278,7 @@ class Pop extends NectaryElement {
     }
     const transformedAncestor = getTransformedAncestor(this);
     const effectiveAllowScroll = this.allowScroll || transformedAncestor != null;
-    const shouldUseModal = this.modal && transformedAncestor == null;
+    const shouldUseModal = this.#shouldUseModalSemantics(transformedAncestor);
     const openAsModal = shouldUseModal || !effectiveAllowScroll;
     this.#openSession = {
       effectiveAllowScroll,
@@ -240,6 +286,8 @@ class Pop extends NectaryElement {
       targetStyleValue: null,
       transformedAncestor
     };
+    this.#syncDialogA11yAttrs();
+    this.#syncDialogSemantics(shouldUseModal);
     this.#$targetSlot.addEventListener("blur", this.#stopEventPropagation, true);
     this.#$focus.setAttribute("tabindex", "-1");
     this.#$focus.style.display = "block";
@@ -350,6 +398,7 @@ class Pop extends NectaryElement {
       targetStyleValue: null,
       transformedAncestor: null
     };
+    this.#syncDialogSemantics(false);
   }
   #onResize = () => {
     this.#resizeThrottle.fn();

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/tooltip/index.js

@@ -94,6 +94,7 @@ class Tooltip extends NectaryElement {
     updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
     updateBooleanAttribute(this.#$pop, "hide-outside-viewport", !this.showOutsideViewport);
     updateBooleanAttribute(this.#$pop, "disable-focus-restore", true);
+    this.#updatePopAriaLabel();
     this.#updateText();
   }
   disconnectedCallback() {
@@ -139,6 +140,7 @@ class Tooltip extends NectaryElement {
     switch (name) {
       case "text": {
         this.#updateText();
+        this.#updatePopAriaLabel();
         break;
       }
       case "orientation": {
@@ -161,7 +163,11 @@ class Tooltip extends NectaryElement {
       }
       case "aria-label":
       case "aria-description": {
-        updateAttribute(this.#$pop, name, newVal);
+        if (name === "aria-label") {
+          this.#updatePopAriaLabel();
+        } else {
+          updateAttribute(this.#$pop, name, newVal);
+        }
         break;
       }
       case "show-outside-viewport": {
@@ -737,6 +743,13 @@ class Tooltip extends NectaryElement {
       this.#subscribeMouseEnterEvent();
     }
   }
+  #updatePopAriaLabel() {
+    const rawAriaLabel = getAttribute(this, "aria-label");
+    const explicitAriaLabel = rawAriaLabel !== null && rawAriaLabel.trim().length > 0 ? rawAriaLabel.trim() : null;
+    const fallbackAriaLabel = this.text ?? "";
+    const ariaLabel = explicitAriaLabel ?? (fallbackAriaLabel.length === 0 ? null : fallbackAriaLabel);
+    updateAttribute(this.#$pop, "aria-label", ariaLabel);
+  }
   #subscribeMouseEnterEvent() {
     if (!this.isDomConnected || this.#isSubscribed) {
       return;

package/tooltip/types.d.ts

@@ -20,6 +20,10 @@ export type TSinchTooltipProps = {
      * to true can have unexpected behavior in dialogs
      */
     'allow-scroll'?: boolean;
+    /** Overrides the accessible name of the tooltip popup. Falls back to `text` when absent or empty. */
+    'aria-label'?: string;
+    /** Sets the aria-description on the tooltip popup */
+    'aria-description'?: string;
 };
 export type TSinchTooltipEvents = {
     /** Show event handler */

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;