@globalpayments/vega 2.95.0 → 2.97.0

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/link-type-handler.js

@@ -0,0 +1,49 @@
+export const urlLinkTypeHandler = {
+  key: 'url',
+  defaultFallbackProtocol: undefined,
+  /** @inheritDoc */
+  getRequiredValue: (record) => { var _a; return (_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : ''; },
+  /** @inheritDoc */
+  getTextValue: (formValues) => formValues.text || '',
+  /** @inheritDoc */
+  getFallbackText: () => '',
+  /** @inheritDoc */
+  buildFinalUrl: (formValues, { normalizeUrl }) => normalizeUrl(formValues.url || ''),
+  /** @inheritDoc */
+  getInitialFormValues: (record, { normalizeUrl }) => {
+    var _a, _b;
+    return ({
+      text: (_a = record === null || record === void 0 ? void 0 : record.text) !== null && _a !== void 0 ? _a : '',
+      url: normalizeUrl((_b = record === null || record === void 0 ? void 0 : record.url) !== null && _b !== void 0 ? _b : ''),
+    });
+  },
+};
+export const emailLinkTypeHandler = {
+  key: 'email',
+  defaultFallbackProtocol: 'mailto:',
+  /** @inheritDoc */
+  getRequiredValue: (record, { parseMailtoUrl }) => {
+    var _a;
+    const { emailAddress } = parseMailtoUrl((_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : '');
+    return emailAddress;
+  },
+  /** @inheritDoc */
+  getTextValue: (formValues) => formValues.text || '',
+  /** @inheritDoc */
+  getFallbackText: (formValues) => formValues.emailAddress || '',
+  /** @inheritDoc */
+  buildFinalUrl: (formValues, { buildEmailUrl }) => buildEmailUrl(formValues.emailAddress || '', formValues.messageSubject || '', formValues.messageBody || ''),
+  /** @inheritDoc */
+  getInitialFormValues: (record, { parseMailtoUrl }) => {
+    var _a, _b;
+    const { emailAddress, subject, body } = parseMailtoUrl((_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : '');
+    return {
+      text: (_b = record === null || record === void 0 ? void 0 : record.text) !== null && _b !== void 0 ? _b : '',
+      emailAddress,
+      messageSubject: subject,
+      messageBody: body,
+    };
+  },
+};
+export const LINK_TYPE_HANDLERS = [urlLinkTypeHandler, emailLinkTypeHandler];
+export const LINK_TYPE_HANDLER_MAP = new Map(LINK_TYPE_HANDLERS.map((handler) => [handler.key, handler]));

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/vega-rich-text-link-editor-renderer.js

@@ -5,79 +5,80 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import { VegaInternalComponentDidRender, VegaInternalPopoverUpdateTarget, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import ChangeManager from '../../../../../helpers/change-manager/change-manager';
-import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
-import { findParent } from '../../../../../utils/ui';
-import { VegaRTELinkExtension } from '../../../extensions/link/link-extension';
-import { normalizeUrlByDefaultProtocol } from '../../../extensions/link/utils';
+import { VegaClick, VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { RTE_EMAIL_LINK_TYPE_KEY } from '../../../constants/constant';
 export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.handleKeyDown = (e) => {
-      if (e.key === 'Enter') {
-        void this.formRef.getValue().then(({ text, url }) => {
-          const normalizedUrl = this.normalizeUrlByDefaultProtocol(url);
-          if (normalizedUrl.length > 0) {
-            this.changeEventEmitter.emit({
-              action: 'link',
-              payload: { text: text || normalizedUrl, url: normalizedUrl },
-            });
-            void this.popoverRef.hide();
+    this.handlePopoverRef = (ref) => {
+      this.popoverRef = ref;
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => this.linkEditorController.handlePopoverShow());
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+        this.linkEditorController.handlePopoverHide();
+      });
+    };
+    this.handleButtonGroupRef = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
+        switch (detail) {
+          case 'edit': {
+            this.linkEditorController.handleEditAction();
+            return;
+          }
+          case 'unlink': {
+            void this.linkEditorController.handleUnlinkAction();
           }
-        });
+        }
+      });
+    };
+    this.handleFormRef = (ref) => {
+      this.formRef = ref;
+    };
+    this.handleUrlInputRef = (ref) => {
+      if (ref) {
+        this.urlInputRef = ref;
       }
     };
-  }
-  /**
-   * Component lifecycle - [componentDidLoad]{@link VegaRichTextLinkEditor.componentDidLoad}
-   */
-  componentDidLoad() {
-    this.updatePopoverTarget();
-  }
-  /**
-   * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
-   */
-  componentDidRender() {
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
-  }
-  watchStatusChange() {
-    if (this.status === 'linkEdit') {
-      setTimeout(() => {
-        void this.urlInputRef.doFocus();
+    this.handleTextInputRef = (ref) => {
+      this.textInputRef = ref;
+    };
+    this.handleLinkFieldKeyDown = (e) => {
+      this.linkEditorController.handleKeyDown(e);
+    };
+    this.handleUrlVegaChange = (e) => {
+      this.linkEditorController.handleUrlVegaChange(e);
+    };
+    this.handleLinkTypeSelectRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (payload) => {
+        void this.linkEditorController.handleLinkTypeChange(payload);
       });
-    }
-  }
-  watchTargetChange() {
-    this.updatePopoverTarget();
+    };
+    this.handleCancelButtonRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+        void this.getPopoverRef().hide();
+      });
+    };
+    this.handleSubmitButtonRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+        void this.linkEditorController.submitLink();
+      });
+    };
   }
   getPopoverRef() {
     return this.popoverRef;
   }
+  getFormRef() {
+    return this.formRef;
+  }
+  getUrlInputRef() {
+    return this.urlInputRef;
+  }
+  getTextInputRef() {
+    return this.textInputRef;
+  }
   render() {
-    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
-        this.popoverRef = ref;
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
-          var _a, _b, _c;
-          if (this.status === 'linkEdit') {
-            void this.urlInputRef.doFocus();
-          }
-          void this.formRef.setValue({
-            text: (_a = this.record) === null || _a === void 0 ? void 0 : _a.text,
-            url: this.normalizeUrlByDefaultProtocol((_c = (_b = this.record) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''),
-          });
-        });
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
-          void this.formRef.reset();
-          if (this.resetStatusAfterHide) {
-            this.status = 'editOrUnlinkSelection';
-          }
-        });
-      } },
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: this.handlePopoverRef },
       h("span", { slot: "popover-content" },
         h("slot", null)),
       h("div", { slot: "popover" },
@@ -86,71 +87,78 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
   }
   renderLinkUnlinkContent() {
     return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
-      h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
-            switch (detail) {
-              case 'edit': {
-                this.status = 'linkEdit';
-                return;
-              }
-              case 'unlink': {
-                this.changeEventEmitter.emit({ action: 'unlink' });
-                void this.popoverRef.hide();
-              }
-            }
-          });
-        } },
+      h("vega-button-group", { size: "small", variant: "tertiary", ref: this.handleButtonGroupRef, onKeyDown: this.handleLinkFieldKeyDown },
         h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
         h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
   }
   renderLinkEditContent() {
     return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
-      h("vega-form", { ref: (ref) => (this.formRef = ref) },
-        h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
-          h("vega-input", { "data-vega-form": "url", ref: (ref) => {
-              this.urlInputRef = ref;
-            }, size: "small", label: this.translationSlimmer.t('URL'), onKeyDown: this.handleKeyDown }),
-          h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+      h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+        this.renderLinkTypeSelector(),
+        h("vega-form", { ref: this.handleFormRef },
+          h("vega-flex", { direction: "col", gap: "size-16" },
+            this.renderTextInput(),
+            this.renderCurrentLinkTypeEditFields())),
+        this.renderActionButtons())));
+  }
+  renderCurrentLinkTypeEditFields() {
+    switch (this.linkEditorStateManager.getSelectedLinkTypeKey()) {
+      case RTE_EMAIL_LINK_TYPE_KEY:
+        return this.renderEmailLinkEditFields();
+      default:
+        return this.renderUrlLinkEditFields();
+    }
+  }
+  renderTextInput() {
+    return (h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", ref: this.handleTextInputRef, onKeyDown: this.handleLinkFieldKeyDown }));
   }
-  updatePopoverTarget() {
-    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), this.target);
+  renderEmailLinkEditFields() {
+    return [
+      h("vega-input", { key: "emailAddress", "data-vega-form": "emailAddress", required: true, ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('E-Mail Address'), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
+      h("vega-input", { key: "messageSubject", size: "small", label: this.translationSlimmer.t('Message Subject'), "data-vega-form": "messageSubject", onKeyDown: this.handleLinkFieldKeyDown }),
+      h("vega-textarea", { key: "messageBody", label: this.translationSlimmer.t('Message Body'), "data-vega-form": "messageBody", rows: 4, resizable: false }),
+    ];
   }
-  normalizeUrlByDefaultProtocol(url) {
-    const rteHost = findParent(this.host, 'vega-rich-text-editor');
-    const linkConfig = VegaRTELinkExtension.configStore.get(rteHost) || {};
-    return normalizeUrlByDefaultProtocol(url, linkConfig.defaultProtocol);
+  renderUrlLinkEditFields() {
+    return [
+      h("vega-input", { key: "url", "data-vega-form": "url", ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('URL'), required: this.linkTypeConfigController.hasConfiguredLinkTypes(), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
+    ];
+  }
+  renderLinkTypeSelector() {
+    if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
+      return null;
+    }
+    return (h("vega-input-select", { label: this.translationSlimmer.t('Link Type'), size: "small", source: this.linkTypeConfigController
+        .getConfiguredLinkTypes()
+        .map((item) => ({
+        id: item.key,
+        displayName: this.translationSlimmer.t(item.label),
+      })), vegaDropdownProps: { searchable: false }, value: this.linkEditorStateManager.getSelectedLinkTypeKey(), ref: this.handleLinkTypeSelectRef }));
+  }
+  renderActionButtons() {
+    if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
+      return null;
+    }
+    return (h("vega-flex", { style: { width: '100%' }, gap: "size-8", alignItems: "center", justifyContent: "end" },
+      h("vega-button", { variant: "secondary", label: this.translationSlimmer.t('Cancel'), ref: this.handleCancelButtonRef }),
+      h("vega-button", { label: this.translationSlimmer.t('Submit'), disabled: this.linkEditorStateManager.getIsSubmitDisabled(), ref: this.handleSubmitButtonRef })));
   }
 }
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
 __decorate([
-  MapToComponentField({ writable: true })
+  MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "linkEditorController", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "linkTypeConfigController", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);
-__decorate([
-  MapToComponentMethod('componentDidLoad')
-], VegaRichTextLinkEditorRenderer.prototype, "componentDidLoad", null);
-__decorate([
-  MapToComponentMethod('componentDidRender')
-], VegaRichTextLinkEditorRenderer.prototype, "componentDidRender", null);
-__decorate([
-  MapToComponentMethod('watchStatusChange')
-], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
-__decorate([
-  MapToComponentMethod('watchTargetChange')
-], VegaRichTextLinkEditorRenderer.prototype, "watchTargetChange", null);
+], VegaRichTextLinkEditorRenderer.prototype, "linkEditorStateManager", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/utils/link-url-normalizer.js

@@ -0,0 +1,80 @@
+import { normalizeUrlByDefaultProtocol as normalizeUrlByProtocol } from '../../../extensions/link/utils';
+/**
+ * Normalizes link URLs and mailto values for the link editor.
+ */
+export class LinkUrlNormalizer {
+  /**
+   * Normalizes a URL with the provided default protocol.
+   *
+   * @param {string} url - URL to normalize.
+   * @param {string} defaultProtocol - Default protocol to apply.
+   * @returns {string} The normalized URL.
+   */
+  normalizeUrlByDefaultProtocol(url, defaultProtocol) {
+    return normalizeUrlByProtocol(url, defaultProtocol);
+  }
+  /**
+   * Parses a mailto URL into its structured parts.
+   *
+   * @param {string} url - Mailto URL to parse.
+   * @returns {MailtoUrlParts} The parsed mailto parts.
+   */
+  parseMailtoUrl(url) {
+    var _a, _b;
+    if (!url) {
+      return { emailAddress: '', subject: '', body: '' };
+    }
+    const withoutProtocol = url.startsWith('mailto:') ? url.slice('mailto:'.length) : url;
+    const questionIndex = withoutProtocol.indexOf('?');
+    if (questionIndex === -1) {
+      return {
+        emailAddress: this.decodeURIComponentSafely(withoutProtocol),
+        subject: '',
+        body: '',
+      };
+    }
+    const emailAddress = this.decodeURIComponentSafely(withoutProtocol.slice(0, questionIndex));
+    const params = new URLSearchParams(withoutProtocol.slice(questionIndex + 1));
+    return {
+      emailAddress,
+      subject: (_a = params.get('subject')) !== null && _a !== void 0 ? _a : '',
+      body: (_b = params.get('body')) !== null && _b !== void 0 ? _b : '',
+    };
+  }
+  /**
+   * Builds a mailto URL from the provided fields.
+   *
+   * @param {string} emailAddress - Email address value.
+   * @param {string} subject - Subject value.
+   * @param {string} body - Body value.
+   * @returns {string} The generated mailto URL.
+   */
+  buildEmailLinkUrl(emailAddress, subject, body) {
+    const normalizedEmailAddress = (emailAddress || '').trim().replace(/^(mailto:)+/i, '');
+    if (normalizedEmailAddress.length === 0) {
+      return '';
+    }
+    const queryParams = [];
+    if ((subject || '').trim().length > 0) {
+      queryParams.push(`subject=${encodeURIComponent(subject.trim())}`);
+    }
+    if ((body || '').trim().length > 0) {
+      queryParams.push(`body=${encodeURIComponent(body.trim())}`);
+    }
+    return `mailto:${normalizedEmailAddress}${queryParams.length > 0 ? `?${queryParams.join('&')}` : ''}`;
+  }
+  /**
+   * Decodes a URI component without throwing on malformed input.
+   *
+   * @param {string} value - Encoded value.
+   * @returns {string} The decoded value.
+   */
+  decodeURIComponentSafely(value) {
+    try {
+      return decodeURIComponent(value);
+    }
+    catch (_a) {
+      return value;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/vega-rich-text-link-editor.js

@@ -9,6 +9,9 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaRichTextLinkEditorRenderer } from './slimmers/renderers/vega-rich-text-link-editor-renderer';
+import { LinkEditorController } from './slimmers/controllers/link-editor-controller';
+import { LinkTypeConfigController } from './slimmers/controllers/link-type-config-controller';
+import { LinkEditorStateManager } from './slimmers/controllers/link-editor-state-manager';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
@@ -24,6 +27,9 @@ export class VegaRichTextLinkEditor {
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();
+    this.linkEditorController = new LinkEditorController();
+    this.linkTypeConfigController = new LinkTypeConfigController();
+    this.linkEditorStateManager = new LinkEditorStateManager();
     this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextLinkEditor, VegaChange);
     /**
      * Specifies the status of the link editor
@@ -53,6 +59,15 @@ export class VegaRichTextLinkEditor {
   async show() {
     await this.renderer.getPopoverRef().show();
   }
+  /**
+   * Provide a method to hide the link editor popover
+   *
+   * @vegaVersion 2.97.0
+   */
+  async hide() {
+    var _a;
+    await ((_a = this.renderer.getPopoverRef()) === null || _a === void 0 ? void 0 : _a.hide());
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
@@ -96,7 +111,7 @@ export class VegaRichTextLinkEditor {
       "mutable": false,
       "complexType": {
         "original": "VegaRTELinkEditorRecord",
-        "resolved": "{ text: string; url: string; }",
+        "resolved": "{ linkType?: string; text: string; url: string; }",
         "references": {
           "VegaRTELinkEditorRecord": {
             "location": "import",
@@ -224,6 +239,25 @@ export class VegaRichTextLinkEditor {
             "text": "2.34.0"
           }]
       }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Provide a method to hide the link editor popover",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }]
+      }
     }
   }; }
   static get elementRef() { return "host"; }
@@ -247,6 +281,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextLinkEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkEditorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkTypeConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkEditorStateManager", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextLinkEditor.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-section-title/slimmers/a11y-tree/build-section-title-a11y-tree.js

@@ -0,0 +1,54 @@
+import { A11yHeadingNode, A11yIconNode } from '../../../../helpers/a11y-tree/a11y-node-dto';
+/**
+ * Build the semantic A11y Tree for a `vega-section-title` instance.
+ *
+ * The structure uses a presentation wrapper so the container is transparent to
+ * assistive technology — the heading is the semantic anchor:
+ *
+ * ```
+ * presentation  "st-root"    (role=none — AT-transparent wrapper)
+ *   ├── heading "st-heading"  (titleText, level=2 by default)
+ *   └── icon    "st-icon"     (decorative — only when an icon prop is set)
+ * ```
+ *
+ * Description text is not wired into the A11y tree. It is exposed as plain
+ * visible text in the component's shadow DOM, read by screen readers via normal
+ * linear traversal. This avoids three VoiceOver regressions introduced when the
+ * container carried `role="group"` with `aria-label` + `aria-describedby`:
+ *
+ * - Bug 1 (Safari): webkit folded the description into the heading `aria-label`,
+ *   so focusing the H2 announced both title AND description together.
+ * - Bug 2 (Chrome, no description): `role="group"` created an extra navigation
+ *   boundary and announced the title twice (group label + heading).
+ * - Bug 3 (Chrome, with description): description read twice — once via the
+ *   hidden `aria-describedby` span on the group, once via the visible div.
+ *
+ * **No inline ARIA / no double projection**: this function must NOT set
+ * `aria-*` or `role` attributes directly on the component. The A11y Tree
+ * slimmer (`A11yTreeSlimmer`) calls `applyA11yTree()` on every render to
+ * project the semantic intent through the chosen strategy.
+ *
+ * @param {BuildArgs} args - Section-title fields used to author the semantic tree.
+ * @returns {A11yNode} The semantic A11y Tree root for the section title.
+ */
+export function buildSectionTitleA11yTree(args) {
+  var _a;
+  const children = [];
+  // Only add heading if titleText is provided; avoid empty heading elements
+  // that cause cross-browser inconsistencies (Chrome skips them, Firefox may
+  // announce an empty group). The A11y Tree projection (via strategy) onto
+  // shadow DOM handles all ARIA semantics; no host-level ARIA is used.
+  if (args.titleText) {
+    children.push(new A11yHeadingNode('st-heading', {
+      level: (_a = args.headingLevel) !== null && _a !== void 0 ? _a : 2,
+    }).toA11yNode());
+  }
+  if (args.icon) {
+    children.push(new A11yIconNode('st-icon').toA11yNode());
+  }
+  return {
+    id: 'st-root',
+    role: 'none',
+    children,
+  };
+}

package/dist/collection/components/vega-section-title/slimmers/renderers/vega-section-title-renderer.js

@@ -8,13 +8,13 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaSectionTitleRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { "aria-hidden": "true", "align-items": "start", "justify-content": "start", gap: "size-8", class: this.size === 'small' ? 'section-title-small' : undefined },
+    return (h("vega-flex", { "data-a11y-id": "st-root", "align-items": "start", "justify-content": "start", gap: "size-8", class: this.size === 'small' ? 'section-title-small' : undefined },
       this.renderPrefixIcon(),
       this.renderText()));
   }
   renderPrefixIcon() {
     return (this.icon &&
-      this.iconAlign === 'left' && h("div", { class: "section-title-icon-container" }, this.renderIcon()));
+      this.iconAlign === 'left' && (h("div", { "data-a11y-id": "st-icon", class: "section-title-icon-container" }, this.renderIcon())));
   }
   renderText() {
     return (h("vega-flex", { class: "vega-flex-grow", direction: "col", "align-items": "start", "justify-content": "start", gap: "size-4" },
@@ -23,7 +23,7 @@ export class VegaSectionTitleRenderer extends VegaSlimmer {
   }
   renderTitle() {
     return (h("div", { class: "section-title-text vega-flex-grow" },
-      h("span", null, this.titleText),
+      h("span", { "data-a11y-id": "st-heading" }, this.titleText),
       this.renderSuffixIcon()));
   }
   renderDescription() {
@@ -31,7 +31,7 @@ export class VegaSectionTitleRenderer extends VegaSlimmer {
   }
   renderSuffixIcon() {
     return (this.icon &&
-      this.iconAlign === 'right' && h("div", { class: "right-icon-container" }, this.renderIcon()));
+      this.iconAlign === 'right' && (h("div", { "data-a11y-id": "st-icon", class: "right-icon-container" }, this.renderIcon())));
   }
   renderIcon() {
     return (h("vega-icon", { icon: this.icon, color: this.iconColor, size: this.size === 'small' ? 'size-16' : 'size-20', class: "vega-flex-shrink-0" }));

package/dist/collection/components/vega-section-title/vega-section-title.js

@@ -9,6 +9,8 @@ import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaSectionTitleRenderer } from './slimmers/renderers/vega-section-title-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { A11yTreeSlimmer } from '../../helpers/slimmers/a11y-tree-slimmer';
+import { buildSectionTitleA11yTree } from './slimmers/a11y-tree/build-section-title-a11y-tree';
 /**
  * @vegaVersion 2.1.0
  */
@@ -17,6 +19,18 @@ export class VegaSectionTitle {
     this.globalSlimmers = {};
     this.renderer = new VegaSectionTitleRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Projects the component's semantic accessibility intent onto the shadow
+     * DOM via the A11y Tree foundation. Replaces the previous inline `role` /
+     * `aria-label` on the host element so ARIA is authored once, in
+     * `buildSectionTitleA11yTree`, and projected through the browser-engine
+     * strategy layer (no double projection).
+     */
+    this.a11yTreeSlimmer = new A11yTreeSlimmer((host) => buildSectionTitleA11yTree({
+      titleText: host.titleText,
+      icon: host.icon,
+      iconAlign: host.iconAlign,
+    }));
     /**
      * Specifies the text content of the title displayed
      *    within the section title.
@@ -45,8 +59,7 @@ export class VegaSectionTitle {
     this.size = 'default';
   }
   render() {
-    const ariaLabel = [this.titleText, this.description].filter(Boolean).join(', ');
-    return sanitizeVegaComponent(h(Host, { role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel || undefined }, this.renderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
   static get is() { return "vega-section-title"; }
   static get encapsulation() { return "shadow"; }
@@ -208,3 +221,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaSectionTitle.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSectionTitle.prototype, "a11yTreeSlimmer", void 0);