@heartlandone/vega 2.95.0 → 2.96.0

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/helper/abstract-list-keyboard-handler.js

@@ -0,0 +1,204 @@
+import { RTEListItemBlock } from '../../../../../dto/blocks/list-item-block';
+/**
+ * Abstract base for list keyboard (Tab / Shift+Tab) handlers.
+ * Provides shared selection-normalization utilities used by both the indent
+ * and outdent concrete handlers.
+ */
+export class AbstractListKeyboardHandler {
+  /**
+   * Filter the ordered selection down to only the "root" items —
+   * items whose ancestor is not also present in the selection.
+   *
+   * @param {RTEListItemBlock[]} selection - Ordered selected list items.
+   * @returns {RTEListItemBlock[]} Root items that do not have selected ancestors.
+   */
+  getOutdentRoots(selection) {
+    const selectedItems = new Set(selection);
+    return selection.filter((item) => !this.hasSelectedAncestor(item, selectedItems));
+  }
+  /**
+   * Check whether a list item has an ancestor that is also selected.
+   *
+   * @param {RTEListItemBlock} item - Item to inspect.
+   * @param {Set<RTEListItemBlock>} selectedItems - Selected items lookup set.
+   * @returns {boolean} True when an ancestor item is selected.
+   */
+  hasSelectedAncestor(item, selectedItems) {
+    var _a, _b;
+    let currentParent = (_a = item.parent) === null || _a === void 0 ? void 0 : _a.parent;
+    while (currentParent instanceof RTEListItemBlock) {
+      if (selectedItems.has(currentParent)) {
+        return true;
+      }
+      currentParent = (_b = currentParent.parent) === null || _b === void 0 ? void 0 : _b.parent;
+    }
+    return false;
+  }
+  /**
+   * Split an ordered flat list of items into groups that share the same
+   * parent list and are contiguous siblings.
+   *
+   * @param {RTEListItemBlock[]} selection - Ordered list-item selection.
+   * @returns {RTEListItemBlock[][]} Contiguous parent-based segments.
+   */
+  splitSelectionIntoParentSegments(selection) {
+    const segments = [];
+    let currentSegment = [];
+    selection.forEach((item) => {
+      if (currentSegment.length === 0) {
+        currentSegment.push(item);
+        return;
+      }
+      const previousItem = currentSegment[currentSegment.length - 1];
+      const isSameParent = previousItem.parent === item.parent;
+      const isContiguousSibling = isSameParent &&
+        item.parent.children.indexOf(item) - item.parent.children.indexOf(previousItem) === 1;
+      if (isContiguousSibling) {
+        currentSegment.push(item);
+        return;
+      }
+      segments.push(currentSegment);
+      currentSegment = [item];
+    });
+    if (currentSegment.length > 0) {
+      segments.push(currentSegment);
+    }
+    return segments;
+  }
+  /**
+   * Normalize the selection and split into parent-based contiguous segments.
+   * Returns null when the result is empty.
+   *
+   * @param {RTEBlock[]} selectedBlocks - Raw selected blocks.
+   * @returns {RTEListItemBlock[][] | null} Contiguous segments or null when invalid.
+   */
+  normalizeToSegments(selectedBlocks) {
+    const normalizedSelection = this.getOrderedListItems(selectedBlocks);
+    if (!normalizedSelection) {
+      return null;
+    }
+    const roots = this.getOutdentRoots(normalizedSelection);
+    const segments = this.splitSelectionIntoParentSegments(roots);
+    return segments.length ? segments : null;
+  }
+  /**
+   * Return the first and last RTETextNode spanning the provided blocks,
+   * or null when either boundary cannot be resolved.
+   *
+   * @param {RTEBlock[]} blocks - Blocks defining the range boundary.
+   * @returns {Nullable<[RTETextNode, RTETextNode]>} First and last boundary nodes.
+   */
+  getSelectionBoundary(blocks) {
+    var _a, _b, _c, _d;
+    const firstNode = (_b = (_a = blocks[0]) === null || _a === void 0 ? void 0 : _a.getFirstNode()) !== null && _b !== void 0 ? _b : null;
+    const lastNode = (_d = (_c = blocks[blocks.length - 1]) === null || _c === void 0 ? void 0 : _c.getLastNode()) !== null && _d !== void 0 ? _d : null;
+    if (!firstNode || !lastNode) {
+      return null;
+    }
+    return [firstNode, lastNode];
+  }
+  /**
+   * Normalize the raw selectedBlocks into an ordered list of RTEListItemBlocks,
+   * truncating at the first non-list block.  Returns null when no list items
+   * are present.
+   *
+   * @param {RTEBlock[]} selectedBlocks - Raw selected blocks.
+   * @returns {RTEListItemBlock[] | null} Ordered list items or null.
+   */
+  getOrderedListItems(selectedBlocks) {
+    const selectedListItems = this.getSelectedListItemsUntilFirstNonList(selectedBlocks);
+    if (!selectedListItems.length) {
+      return null;
+    }
+    return [...selectedListItems].sort((a, b) => this.compareTreePath(this.getTreePath(a), this.getTreePath(b)));
+  }
+  /**
+   * Collect contiguous selected list items until a non-list block is found.
+   *
+   * @param {RTEBlock[]} selectedBlocks - Raw selected blocks.
+   * @returns {RTEListItemBlock[]} Selected list items up to first non-list block.
+   */
+  getSelectedListItemsUntilFirstNonList(selectedBlocks) {
+    const selectedListItems = [];
+    for (const block of selectedBlocks) {
+      if (!(block instanceof RTEListItemBlock)) {
+        if (selectedListItems.length > 0) {
+          break;
+        }
+        return [];
+      }
+      selectedListItems.push(block);
+    }
+    return selectedListItems;
+  }
+  /**
+   * Build a hierarchical index path for a list item in the list tree.
+   *
+   * @param {RTEListItemBlock} item - Item whose tree path is being resolved.
+   * @returns {number[]} Tree index path from root to the item.
+   */
+  getTreePath(item) {
+    var _a;
+    const path = [];
+    const visitedLists = new Set();
+    let currentItem = item;
+    let currentList = item.parent;
+    while (currentList && this.hasChildren(currentList) && !visitedLists.has(currentList)) {
+      visitedLists.add(currentList);
+      const itemIndex = currentList.children.indexOf(currentItem);
+      if (itemIndex < 0) {
+        break;
+      }
+      path.unshift(itemIndex);
+      const listParent = currentList.parent;
+      if (listParent instanceof RTEListItemBlock) {
+        const nestListIndex = ((_a = listParent.nestList) !== null && _a !== void 0 ? _a : []).indexOf(currentList);
+        if (nestListIndex < 0) {
+          break;
+        }
+        path.unshift(nestListIndex);
+        currentItem = listParent;
+        currentList = listParent.parent;
+        continue;
+      }
+      let child = currentList;
+      let container = listParent;
+      while (container && this.hasChildren(container)) {
+        const childIndex = container.children.indexOf(child);
+        if (childIndex < 0) {
+          return path;
+        }
+        path.unshift(childIndex);
+        child = container;
+        container = container.parent;
+      }
+      break;
+    }
+    return path;
+  }
+  /**
+   * Compare two list-item tree paths.
+   *
+   * @param {number[]} a - First tree path.
+   * @param {number[]} b - Second tree path.
+   * @returns {number} Negative when a < b, positive when a > b, otherwise 0.
+   */
+  compareTreePath(a, b) {
+    const length = Math.min(a.length, b.length);
+    for (let i = 0; i < length; i++) {
+      if (a[i] !== b[i]) {
+        return a[i] - b[i];
+      }
+    }
+    return a.length - b.length;
+  }
+  /**
+   * Check whether a value exposes a children array.
+   *
+   * @param {unknown} entity - Candidate value.
+   * @returns {boolean} True when entity has children array.
+   */
+  hasChildren(entity) {
+    return !!entity && Array.isArray(entity.children);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/helper/list-shift-tab-outdent-handler.js

@@ -0,0 +1,42 @@
+import { RTEListItemBlock } from '../../../../../dto/blocks/list-item-block';
+import { UnnestListItemsAction } from '../../../../../dto/actions/unnest-list-items-action';
+import { TransformParagraphAction } from '../../../../../dto/actions/transform-paragraph-action';
+import { VegaRTEContent } from '../../../../../dto/content-state';
+import { RTEHtmlBlock } from '../../../../../dto/blocks/html-block';
+import { AbstractListKeyboardHandler } from './abstract-list-keyboard-handler';
+/**
+ * Handles Shift+Tab key list outdent.
+ * Normalizes the selection, then promotes each segment, either moving nested
+ * items or promoting top-level items to paragraphs.
+ */
+export class ListShiftTabOutdentHandler extends AbstractListKeyboardHandler {
+  /**
+   * @inheritDoc
+   */
+  execute(selectedBlocks) {
+    const segments = this.normalizeToSegments(selectedBlocks);
+    if (!segments) {
+      return null;
+    }
+    const segmentSelectionBoundaries = new Array(segments.length).fill(null);
+    for (let i = segments.length - 1; i >= 0; i--) {
+      const segment = segments[i];
+      const parentList = segment[0].parent;
+      if (parentList.parent instanceof VegaRTEContent || parentList.parent instanceof RTEHtmlBlock) {
+        // Capture boundary before action moves text nodes into new paragraphs
+        const boundary = this.getSelectionBoundary(segment);
+        parentList.apply(new TransformParagraphAction(segment));
+        segmentSelectionBoundaries[i] = boundary;
+        continue;
+      }
+      if (parentList.parent instanceof RTEListItemBlock) {
+        parentList.apply(new UnnestListItemsAction(segment));
+        segmentSelectionBoundaries[i] = this.getSelectionBoundary(segment);
+      }
+    }
+    if (segmentSelectionBoundaries.some(Boolean)) {
+      return segmentSelectionBoundaries;
+    }
+    return null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/helper/list-tab-indent-handler.js

@@ -0,0 +1,34 @@
+import { NestListItemsAction } from '../../../../../dto/actions/nest-list-items-action';
+import { AbstractListKeyboardHandler } from './abstract-list-keyboard-handler';
+/**
+ * Handles Tab key list indentation.
+ * Normalizes the selection, applies a command-style gate on the first
+ * eligible segment, then nests each qualifying segment.
+ */
+export class ListTabIndentHandler extends AbstractListKeyboardHandler {
+  /**
+   * @inheritDoc
+   */
+  execute(selectedBlocks) {
+    const segments = this.normalizeToSegments(selectedBlocks);
+    if (!segments) {
+      return null;
+    }
+    const firstSegment = segments[0];
+    const firstParentList = firstSegment[0].parent;
+    if (firstParentList.children.indexOf(firstSegment[0]) <= 0) {
+      return null;
+    }
+    const segmentSelectionBoundaries = new Array(segments.length).fill(null);
+    for (let i = segments.length - 1; i >= 0; i--) {
+      const segment = segments[i];
+      const parentList = segment[0].parent;
+      if (parentList.children.indexOf(segment[0]) <= 0) {
+        continue;
+      }
+      parentList.apply(new NestListItemsAction(segment));
+      segmentSelectionBoundaries[i] = this.getSelectionBoundary(segment);
+    }
+    return segmentSelectionBoundaries.some(Boolean) ? segmentSelectionBoundaries : null;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/list-keyboard-slimmer.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { ListTabIndentHandler } from './helper/list-tab-indent-handler';
+import { ListShiftTabOutdentHandler } from './helper/list-shift-tab-outdent-handler';
+const LIST_TOOLBAR_ITEMS = ['bullets', 'numbers', 'bulletsNumbers'];
+/**
+ * Handles list keyboard shortcuts (Tab/Shift+Tab) for list tooling.
+ */
+export class ListKeyboardSlimmer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isKeyboardListenerBound = false;
+    this.listTabIndentHandler = new ListTabIndentHandler();
+    this.listShiftTabOutdentHandler = new ListShiftTabOutdentHandler();
+    // Keyboard action execution
+    /**
+     * Handle Tab and Shift+Tab list keyboard interactions.
+     *
+     * @param {KeyboardEvent} e - Keyboard event to process.
+     * @returns {void}
+     */
+    this.handleListKeyboardAction = (e) => {
+      if (e.key !== 'Tab') {
+        return;
+      }
+      if (this.hasNonShiftModifierForTab(e)) {
+        return;
+      }
+      const selectedBlocks = this.selectionController.getSelectedBlocks();
+      const currentRange = this.selectionController.getCurrentRange().clone();
+      if (e.shiftKey) {
+        const selectionBoundaries = this.listShiftTabOutdentHandler.execute(selectedBlocks);
+        if (selectionBoundaries) {
+          e.preventDefault();
+          void this.valueController.flushChanges(this.value).then(() => {
+            this.restoreListSelection(selectionBoundaries, currentRange.startNode instanceof RTETextNode ? currentRange.startNode : null, currentRange.endNode instanceof RTETextNode ? currentRange.endNode : null, currentRange.startOffset, currentRange.endOffset);
+          });
+        }
+        return;
+      }
+      const selectionBoundaries = this.listTabIndentHandler.execute(selectedBlocks);
+      if (!selectionBoundaries) {
+        return;
+      }
+      e.preventDefault();
+      void this.valueController.flushChanges(this.value).then(() => {
+        this.restoreListSelection(selectionBoundaries, currentRange.startNode instanceof RTETextNode ? currentRange.startNode : null, currentRange.endNode instanceof RTETextNode ? currentRange.endNode : null, currentRange.startOffset, currentRange.endOffset);
+      });
+    };
+  }
+  // Listener lifecycle and gating
+  /**
+   * @inheritDoc
+   */
+  disconnectedCallback() {
+    this.removeListKeyboardListener();
+  }
+  /**
+   * @inheritDoc
+   */
+  componentDidLoad() {
+    this.syncListKeyboardListener();
+  }
+  /**
+   * Re-sync keyboard listener when toolbarItems prop changes at runtime,
+   * ensuring list shortcuts are bound/unbound as tools are added/removed.
+   */
+  watchToolbarItems() {
+    this.syncListKeyboardListener();
+  }
+  /**
+   * Synchronize the DOM keydown listener with the configured toolbar items.
+   */
+  syncListKeyboardListener() {
+    if (this.hasListToolbarConfigured()) {
+      this.addListKeyboardListener();
+      return;
+    }
+    this.removeListKeyboardListener();
+  }
+  /**
+   * Determine whether any list keyboard controls are enabled in the toolbar.
+   *
+   * @returns {boolean} True when any list toolbar item is configured.
+   */
+  hasListToolbarConfigured() {
+    const flatToolbarItems = this.toolbarItems.flat();
+    return flatToolbarItems.some((item) => LIST_TOOLBAR_ITEMS.includes(item));
+  }
+  /**
+   * Attach the keydown listener to the current editable element when available.
+   * Handles element ref changes by rebinding when the target element differs.
+   */
+  addListKeyboardListener() {
+    const editableElement = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    if (this.isKeyboardListenerBound && this.boundEditableElement === editableElement) {
+      return;
+    }
+    if (this.isKeyboardListenerBound) {
+      this.removeListKeyboardListener();
+    }
+    if (!editableElement) {
+      return;
+    }
+    editableElement.addEventListener('keydown', this.handleListKeyboardAction);
+    this.boundEditableElement = editableElement;
+    this.isKeyboardListenerBound = true;
+  }
+  /**
+   * Detach the keydown listener from the previously bound editable element.
+   */
+  removeListKeyboardListener() {
+    if (!this.isKeyboardListenerBound || !this.boundEditableElement) {
+      return;
+    }
+    this.boundEditableElement.removeEventListener('keydown', this.handleListKeyboardAction);
+    this.boundEditableElement = null;
+    this.isKeyboardListenerBound = false;
+  }
+  /**
+   * Check whether the Tab event includes modifiers other than Shift.
+   *
+   * @param {KeyboardEvent} e - Keyboard event to inspect.
+   * @returns {boolean} True when non-shift modifier keys are pressed.
+   */
+  hasNonShiftModifierForTab(e) {
+    return e.altKey || e.ctrlKey || e.metaKey || e.getModifierState('AltGraph');
+  }
+  /**
+   * Restore the logical selection after a list keyboard action completes.
+   *
+   * @param {Array<Nullable<[RTETextNode, RTETextNode]>>} selectionBoundaries - Boundaries produced by the handler.
+   * @param {Nullable<RTETextNode>} preferredStartNode - Preferred start node from prior selection.
+   * @param {Nullable<RTETextNode>} preferredEndNode - Preferred end node from prior selection.
+   * @param {number} startOffset - Preferred start offset.
+   * @param {number} endOffset - Preferred end offset.
+   * @returns {void}
+   */
+  restoreListSelection(selectionBoundaries, preferredStartNode, preferredEndNode, startOffset, endOffset) {
+    var _a, _b, _c, _d;
+    const firstBoundary = (_a = selectionBoundaries.find(Boolean)) !== null && _a !== void 0 ? _a : null;
+    const lastBoundary = (_b = [...selectionBoundaries].reverse().find(Boolean)) !== null && _b !== void 0 ? _b : null;
+    const firstNode = (_c = preferredStartNode !== null && preferredStartNode !== void 0 ? preferredStartNode : firstBoundary === null || firstBoundary === void 0 ? void 0 : firstBoundary[0]) !== null && _c !== void 0 ? _c : null;
+    const lastNode = (_d = preferredEndNode !== null && preferredEndNode !== void 0 ? preferredEndNode : lastBoundary === null || lastBoundary === void 0 ? void 0 : lastBoundary[1]) !== null && _d !== void 0 ? _d : null;
+    if (!firstNode || !lastNode) {
+      return;
+    }
+    this.selectionController.enqueueSelectionRangeFutureState(firstNode, Math.min(startOffset, firstNode.getRangeEndOffset()), lastNode, Math.min(endOffset, lastNode.getRangeEndOffset()), true);
+  }
+}
+__decorate([
+  MapToComponentField()
+], ListKeyboardSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ListKeyboardSlimmer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], ListKeyboardSlimmer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], ListKeyboardSlimmer.prototype, "toolbarItems", void 0);
+__decorate([
+  MapToComponentField()
+], ListKeyboardSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], ListKeyboardSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], ListKeyboardSlimmer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchToolbarItems')
+], ListKeyboardSlimmer.prototype, "watchToolbarItems", null);

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);