@nectary/components 5.42.2 → 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,8 +3617,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) {
@@ -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");
   }

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