@nectary/components 5.42.2 → 5.42.4

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;
@@ -9582,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);
@@ -9593,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");
   }
@@ -17101,7 +17157,7 @@ const getShortestCssDeg = (currentDeg, nextDeg) => {
   }
   return currentDeg + diff;
 };
-const templateHTML$3 = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-label="Hour selector" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-label="Minute selector" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML$3 = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template$3 = document.createElement("template");
 template$3.innerHTML = templateHTML$3;
 const PICKER_RADIUS = 216 / 2;
@@ -17221,7 +17277,16 @@ class TimePicker extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "ampm", "submit-aria-label", "no-submit"];
+    return [
+      "value",
+      "ampm",
+      "submit-aria-label",
+      "hour-meter-aria-label",
+      "minute-meter-aria-label",
+      "hour-needle-aria-label",
+      "minute-needle-aria-label",
+      "no-submit"
+    ];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (isAttrEqual(prevValue, newVal)) {
@@ -17247,6 +17312,22 @@ class TimePicker extends NectaryElement {
         updateAttribute(this.#$submitButton, "aria-label", newVal);
         break;
       }
+      case "hour-meter-aria-label": {
+        updateAttribute(this.#$headerHours, "aria-label", newVal);
+        break;
+      }
+      case "minute-meter-aria-label": {
+        updateAttribute(this.#$headerMinutes, "aria-label", newVal);
+        break;
+      }
+      case "hour-needle-aria-label": {
+        updateAttribute(this.#$needleHour, "aria-label", newVal);
+        break;
+      }
+      case "minute-needle-aria-label": {
+        updateAttribute(this.#$needleMinute, "aria-label", newVal);
+        break;
+      }
       case "no-submit": {
         const isNoSubmit = isAttrTrue(newVal);
         updateBooleanAttribute(this, "no-submit", isNoSubmit);
@@ -17273,6 +17354,30 @@ class TimePicker extends NectaryElement {
   get submitAriaLabel() {
     return getAttribute(this, "submit-aria-label", "");
   }
+  set hourMeterAriaLabel(value) {
+    updateAttribute(this, "hour-meter-aria-label", value);
+  }
+  get hourMeterAriaLabel() {
+    return getAttribute(this, "hour-meter-aria-label", "");
+  }
+  set minuteMeterAriaLabel(value) {
+    updateAttribute(this, "minute-meter-aria-label", value);
+  }
+  get minuteMeterAriaLabel() {
+    return getAttribute(this, "minute-meter-aria-label", "");
+  }
+  set hourNeedleAriaLabel(value) {
+    updateAttribute(this, "hour-needle-aria-label", value);
+  }
+  get hourNeedleAriaLabel() {
+    return getAttribute(this, "hour-needle-aria-label", "");
+  }
+  set minuteNeedleAriaLabel(value) {
+    updateAttribute(this, "minute-needle-aria-label", value);
+  }
+  get minuteNeedleAriaLabel() {
+    return getAttribute(this, "minute-needle-aria-label", "");
+  }
   set noSubmit(value) {
     updateBooleanAttribute(this, "no-submit", value);
   }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.42.2",
+  "version": "5.42.4",
   "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/time-picker/index.d.ts

@@ -17,6 +17,14 @@ export declare class TimePicker extends NectaryElement {
     get ampm(): boolean;
     set submitAriaLabel(value: string);
     get submitAriaLabel(): string;
+    set hourMeterAriaLabel(value: string);
+    get hourMeterAriaLabel(): string;
+    set minuteMeterAriaLabel(value: string);
+    get minuteMeterAriaLabel(): string;
+    set hourNeedleAriaLabel(value: string);
+    get hourNeedleAriaLabel(): string;
+    set minuteNeedleAriaLabel(value: string);
+    get minuteNeedleAriaLabel(): string;
     set noSubmit(value: boolean);
     get noSubmit(): boolean;
     get submitButtonRect(): TRect;

package/time-picker/index.js

@@ -6,7 +6,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { stringifyHourFace, stringifyMinute, parseTime, hourToIndex, stringifyHour, getNeedleRotationDeg, getShortestCssDeg, stringifyTime } from "./utils.js";
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-label="Hour selector" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-label="Minute selector" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const PICKER_RADIUS = 216 / 2;
@@ -126,7 +126,16 @@ class TimePicker extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["value", "ampm", "submit-aria-label", "no-submit"];
+    return [
+      "value",
+      "ampm",
+      "submit-aria-label",
+      "hour-meter-aria-label",
+      "minute-meter-aria-label",
+      "hour-needle-aria-label",
+      "minute-needle-aria-label",
+      "no-submit"
+    ];
   }
   attributeChangedCallback(name, prevValue, newVal) {
     if (isAttrEqual(prevValue, newVal)) {
@@ -152,6 +161,22 @@ class TimePicker extends NectaryElement {
         updateAttribute(this.#$submitButton, "aria-label", newVal);
         break;
       }
+      case "hour-meter-aria-label": {
+        updateAttribute(this.#$headerHours, "aria-label", newVal);
+        break;
+      }
+      case "minute-meter-aria-label": {
+        updateAttribute(this.#$headerMinutes, "aria-label", newVal);
+        break;
+      }
+      case "hour-needle-aria-label": {
+        updateAttribute(this.#$needleHour, "aria-label", newVal);
+        break;
+      }
+      case "minute-needle-aria-label": {
+        updateAttribute(this.#$needleMinute, "aria-label", newVal);
+        break;
+      }
       case "no-submit": {
         const isNoSubmit = isAttrTrue(newVal);
         updateBooleanAttribute(this, "no-submit", isNoSubmit);
@@ -178,6 +203,30 @@ class TimePicker extends NectaryElement {
   get submitAriaLabel() {
     return getAttribute(this, "submit-aria-label", "");
   }
+  set hourMeterAriaLabel(value) {
+    updateAttribute(this, "hour-meter-aria-label", value);
+  }
+  get hourMeterAriaLabel() {
+    return getAttribute(this, "hour-meter-aria-label", "");
+  }
+  set minuteMeterAriaLabel(value) {
+    updateAttribute(this, "minute-meter-aria-label", value);
+  }
+  get minuteMeterAriaLabel() {
+    return getAttribute(this, "minute-meter-aria-label", "");
+  }
+  set hourNeedleAriaLabel(value) {
+    updateAttribute(this, "hour-needle-aria-label", value);
+  }
+  get hourNeedleAriaLabel() {
+    return getAttribute(this, "hour-needle-aria-label", "");
+  }
+  set minuteNeedleAriaLabel(value) {
+    updateAttribute(this, "minute-needle-aria-label", value);
+  }
+  get minuteNeedleAriaLabel() {
+    return getAttribute(this, "minute-needle-aria-label", "");
+  }
   set noSubmit(value) {
     updateBooleanAttribute(this, "no-submit", value);
   }

package/time-picker/types.d.ts

@@ -10,6 +10,14 @@ export type TSinchTimePickerProps = {
     'no-submit'?: boolean;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
+    /** Hours meter label that is used for a11y */
+    'hour-meter-aria-label': string;
+    /** Minutes meter label that is used for a11y */
+    'minute-meter-aria-label': string;
+    /** Hour needle slider label that is used for a11y */
+    'hour-needle-aria-label': string;
+    /** Minute needle slider label that is used for a11y */
+    'minute-needle-aria-label': string;
     readonly submitButtonRect?: TRect;
     readonly amButtonRect?: TRect | null;
     readonly pmButtonRect?: TRect | null;

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 */