@heartlandone/vega 2.84.0 → 2.86.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-setting-popover-renderer.js

@@ -6,16 +6,19 @@ import { RowOperationEventHandler } from '../setting-event-handlers/row-operatio
 import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-operation';
 import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverShow } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
 import { MergeCellsOperationEventHandler } from '../setting-event-handlers/merge-cells-operation';
 import { SplitCellOperationEventHandler } from '../setting-event-handlers/split-cell-operation';
 import { TablePopoverBaseRenderer } from './table-popover-base-renderer';
+import { RTETableColorManager } from '../utils/table-color-manager';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
 /**
- * Centralizes the popover rendering and interaction logic for table settings.
+ * Shared popover renderer for table settings.
  */
 export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
-  constructor() {
-    super(...arguments);
+  constructor(renderContext) {
+    super(renderContext);
     this.settingHandlers = [
       new RowOperationEventHandler(),
       new CaptionOperationEventHandler(),
@@ -24,38 +27,38 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       new SplitCellOperationEventHandler(),
     ];
     /**
-     * Show table setting popover when table is clicked.
-     * Only the popover belonging to the nearest table will be shown,
-     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     * Re-targets and shows the table setting popover for the clicked table.
      *
-     * @param {MouseEvent} event - The MouseEvent that triggered the table action
-     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     * @param {MouseEvent} event - The MouseEvent that triggered the click.
+     * @param {RTETableBlock} tableBlock - The clicked table's block data.
+     * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
      */
-    this.handleTableClick = (event, trigger) => {
+    this.handleTableClick = (event, tableBlock, getTableRef) => {
       const target = event.target;
       const ownTrigger = target.closest('table');
-      if (trigger !== ownTrigger) {
-        void this.popoverRef.hide();
-        void this.tableDynamicPopover.hide();
+      if (ownTrigger !== getTableRef()) {
         return;
       }
+      // Prevent the click from bubbling to ancestor tables. When this is a nested
+      // table click, the ancestor table still has the popover's stale click
+      // listener attached (from when it was the popover's target), which would
+      // toggle the popover off immediately after we show it.
+      event.stopPropagation();
+      this.reTarget(tableBlock, getTableRef);
       void this.tableDynamicPopover.hide();
-      if (!this.popoverShow) {
-        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
-        void this.popoverRef.show();
-      }
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+      void this.popoverRef.show(true);
     };
     /**
      * Sync the selected cells from the table selection to the table setting component.
      */
     this.syncSelectedCells = () => {
       if (this.tableSettingRef) {
-        const selectedCells = this.getTableSelectedCells();
-        this.tableSettingRef.selectedCells = selectedCells;
+        this.tableSettingRef.selectedCells = this.getTableSelectedCells();
       }
     };
     /**
-     * Receive setting menu click events.
+     * Handles setting menu click events.
      *
      * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
      */
@@ -63,7 +66,7 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
       if (handler) {
         const extensionContext = this.getTableExtensionContext();
-        extensionContext && handler.execute(event.detail, extensionContext, this.tableData);
+        extensionContext && handler.execute(event.detail, extensionContext, this.tableBlock);
         if (event.detail[0] === TableSettingType.CAPTION) {
           this.updateTableSettingCaption();
         }
@@ -78,59 +81,69 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
      */
     this.handleTableSettingPopoverShow = () => {
       this.syncSelectedCells();
-      this.popoverShow = true;
     };
+    this.tableDynamicPopover = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), renderContext);
   }
   /**
-   * Render the popover host and inject the table-setting component with refs wired up.
-   *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {RTETableBlock} renderData - The table block to render.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
-   *  the secondary table popover (for example, table-properties-specific settings).
-   * @returns {VegaRTERenderResult} The rendered popover structure.
+   * Destroys the dynamic popover renderer and removes the container from the DOM.
    */
-  render(h, renderData, getTableRef, tableDynamicPopover) {
-    this.tableData = renderData;
-    this.tableDynamicPopover = tableDynamicPopover;
-    return h('vega-popover', {
-      trigger: 'click',
-      isScreenPosition: true,
-      class: 'rte-table-setting-popover',
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (popover) => {
-        this.popoverRef = popover;
-        if (this.popoverRef) {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
-        }
-      },
-    }, [
-      h('div', { slot: 'popover' }, [
-        h('vega-rich-text-table-setting', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (ref) => {
-            this.tableSettingRef = ref;
-            if (ref) {
-              ref.target = getTableRef();
-            }
-          },
-          selectedCells: this.getTableSelectedCells(),
-          onVegaClick: this.handleSettingMenuClick,
-        }),
-      ]),
-    ]);
+  destroy() {
+    this.tableDynamicPopover.destroy();
+    if (this.popoverContainer) {
+      this.popoverContainer.remove();
+    }
+  }
+  /**
+   * Builds the popover DOM and appends it to the RTE host. Idempotent: subsequent calls are no-ops.
+   */
+  render() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument && this.renderContext) {
+      this.popoverContainer = safeDocument.createElement('div');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.renderContext.host.appendChild(this.popoverContainer);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const tableCellPopover = this.tableDynamicPopover.render();
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-setting-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      const tableSetting = safeDocument.createElement('vega-rich-text-table-setting');
+      tableSetting.addEventListener('vegaClick', this.handleSettingMenuClick);
+      slotDiv.appendChild(tableSetting);
+      popover.appendChild(slotDiv);
+      this.popoverContainer.appendChild(popover);
+      this.popoverContainer.appendChild(tableCellPopover);
+      this.popoverRef = popover;
+      this.tableSettingRef = tableSetting;
+    }
   }
   /**
-   * Updates the table setting component caption state to match the given table data.
+   * Updates the table setting component caption state to match the current table data.
    */
   updateTableSettingCaption() {
-    const hasCaption = this.tableData.hasCaption();
+    const hasCaption = this.tableBlock.hasCaption();
     if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
       this.tableSettingRef.hasCaption = hasCaption;
     }
   }
+  /**
+   * Re-targets the shared popovers to the given table.
+   *
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
+   */
+  reTarget(tableBlock, getTableRef) {
+    if (this.tableSettingRef) {
+      this.tableBlock = tableBlock;
+      this.tableSettingRef.target = getTableRef();
+      this.tableSettingRef.selectedCells = this.getTableSelectedCells();
+      this.tableDynamicPopover.reTarget(tableBlock, getTableRef);
+    }
+  }
   /**
    * Collects and returns the currently selected table cells.
    *

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-extension.js

@@ -138,6 +138,7 @@ export class VegaRTETableExtension extends VegaRTEExtension {
    * @inheritDoc
    */
   destroyExtension() {
+    this.tableBlockRenderer.destroy();
     this.tableSelection.destroy();
   }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/table-toolbar-button-renderer.js

@@ -18,6 +18,7 @@ export class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
     return createTablePopoverRenderer.render(h, super.renderButton(h, editorContext, {
       showArrowIcon: true,
       icon: 'rte-table',
+      tooltip: { text: 'Insert table' },
     }));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-toolbar-button-renderer.js

@@ -20,7 +20,11 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
    */
   render(createElement, editorContext) {
     return this.renderDropdown(createElement, editorContext, {}, [
-      this.renderButton(createElement, editorContext, { label: 'Tokens', showArrowIcon: true }),
+      this.renderButton(createElement, editorContext, {
+        label: 'Tokens',
+        showArrowIcon: true,
+        tooltip: { text: 'Insert token' },
+      }),
       this.renderDropdownListTemplate(createElement, this.tokenList),
     ]);
   }

package/dist/collection/components/vega-selection-tile/slimmers/renderers/vega-selection-tile-renderer.js

@@ -6,25 +6,83 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 export class VegaSelectionTileRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Activation handler invoked from the host's `@Listen('click')` listener
+     * (registered on the host element itself). The host carries
+     * `role="radio"`/`"checkbox"`, `tabindex`, and the activation listeners,
+     * so this is the only interactive node per tile. VoiceOver's VO+Space
+     * dispatches a synthetic click on the focused host, which reaches this
+     * function through `VegaSelectionTile.onHostClick()`.
+     */
+    this.activate = () => {
+      if (this.disabled) {
+        return;
+      }
+      if (!(this.selectType === 'radio' && this.checked)) {
+        this.checkedController.onCheck(!this.checked);
+      }
+    };
+    this.handleTileKeydown = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      // eslint-disable-next-line spellcheck/spell-checker
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        this.activate();
+      }
+    };
+  }
   getSelectorContainerRef() {
     return this.selectorContainerRef;
   }
+  // Accessible name for the host's `aria-label`. Public because the
+  // component renders the host and needs to call this to compute the
+  // host's `aria-label` value (see `VegaSelectionTile.render`).
+  //
+  // Fallback chain: titleText (+ note) → trimmed host light-DOM text
+  // (covers `content`/`prefix` slots) → `value`. `note` is appended so
+  // VoiceOver announces both the title and the supporting line
+  // (e.g. "Basic Plan, $9 / month") when traversing tiles with VO+→/VO+←;
+  // the visual subtree is `aria-hidden`, so without this the note would
+  // never reach the accessibility tree.
+  //
+  // The parent group's label is intentionally NOT prepended here: the
+  // group renderer exposes its label as an independently focusable AT
+  // stop, so duplicating it on every tile would make AT users hear the
+  // group label N+1 times.
+  getAccessibleName() {
+    if (this.titleText) {
+      return this.note ? `${this.titleText}, ${this.note}` : this.titleText;
+    }
+    // Prefer `innerText` so adjacent inline/block elements are separated
+    // by whitespace (e.g. `<div>Pro Plan<span>Popular</span></div>` reads
+    // as "Pro Plan Popular" instead of "Pro PlanPopular" from raw
+    // `textContent` concatenation). Fall back to `textContent` for
+    // environments (e.g. jsdom) that do not implement `innerText`, and
+    // to `''` to satisfy the `string | null` type of `textContent`.
+    const raw = this.host.innerText || this.host.textContent || '';
+    const slotText = raw.replace(/\s+/g, ' ').trim();
+    return slotText || this.value || '';
+  }
   render() {
+    // ARIA semantics (role/aria-*), focus (tabindex), and activation
+    // handlers live on the COMPONENT HOST (see `VegaSelectionTile.render`
+    // and the `@Listen('click')`/`@Listen('keydown')` methods on the
+    // component class), not on this inner element. Keeping role + tabindex
+    // off this element is what prevents Firefox/VoiceOver from triple-
+    // announcing each tile (host group wrapper + inner role=radio + host
+    // close). This element is now purely a layout/styling wrapper.
     return (h("vega-flex", { "align-items": "start", "justify-content": "start", gap: "size-16", class: {
         'selection-tile': true,
         'disabled': this.disabled,
         'checked': this.checked,
         'error': this.showError,
-      }, "aria-label": this.titleText || 'No label defined', tabIndex: this.disabled ? -1 : 0, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: () => {
-        if (!(this.selectType === 'radio' && this.checked)) {
-          this.checkedController.onCheck(!this.checked);
-        }
-      }, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("div", { class: "vega-flex-grow" }, this.renderContent()),
+      } },
+      h("div", { class: "vega-flex-grow", "aria-hidden": "true" }, this.renderContent()),
       this.renderSelect()));
   }
   renderContent() {
@@ -51,7 +109,7 @@ export class VegaSelectionTileRenderer extends VegaSlimmer {
       this.note && h("div", { class: "selection-tile-note" }, this.note)));
   }
   renderSelect() {
-    return (h("vega-flex", { "align-items": "start", class: "vega-flex-shrink-0 selection-tile-select", ref: (ref) => (this.selectorContainerRef = ref) }, this.selectType === 'checkbox' ? this.renderCheckbox() : this.renderRadio()));
+    return (h("vega-flex", Object.assign({ "align-items": "start", class: "vega-flex-shrink-0 selection-tile-select", "aria-hidden": "true" }, { inert: true }, { ref: (ref) => (this.selectorContainerRef = ref) }), this.selectType === 'checkbox' ? this.renderCheckbox() : this.renderRadio()));
   }
   renderCheckbox() {
     return h("vega-checkbox", { size: "small", disabled: this.disabled, checked: this.checked });
@@ -90,6 +148,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "showError", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSelectionTileRenderer.prototype, "value", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileRenderer.prototype, "checkedController", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/slimmers/renderers/vega-selection-tile-group-renderer.js

@@ -17,16 +17,37 @@ export class VegaSelectionTileGroupRenderer extends VegaSlimmer {
       this.renderHint()));
   }
   renderLabel() {
-    return (this.label && (h("div", { class: "vega-label" },
-      h("label", { "aria-label": this.label },
-        this.label,
-        this.renderRequire()))));
+    return (this.label && (
+    // The label is exposed as its own focusable VoiceOver stop:
+    // `tabindex="0"` puts it in the tab / VO swipe order, and
+    // `aria-label` provides a clean accessible name that includes
+    // "required" as a spoken word.
+    //
+    // The visible text + asterisk are wrapped in an
+    // `aria-hidden="true"` span so VoiceOver does not descend into
+    // the children and create extra swipe stops on the raw text
+    // or the decorative "*" — the `aria-label` above is the
+    // single thing AT users hear for this stop.
+    h("div", { class: "vega-label" },
+      h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.required ? `${this.label} (required)` : this.label },
+        h("span", { "aria-hidden": "true" },
+          this.label,
+          this.renderRequire())))));
   }
   renderRequire() {
-    return this.required && h("span", { class: "vega-require" }, "*");
+    return (this.required && (h("span", { class: "vega-require", "aria-hidden": "true" }, "*")));
   }
   renderContainer() {
-    return (h("div", { class: "container", ref: (e) => (this.groupContainerRef = e) },
+    return (
+    // The container intentionally drops `role="radiogroup"`/`role="group"`
+    // (and the group-level `aria-*` attributes those roles would imply)
+    // so VoiceOver does not treat the container as a separate stop ahead
+    // of the first tile. The group label above is now the single AT
+    // stop that announces the group's purpose; child tiles are reached
+    // directly after it without a wrapper announcement.
+    h("div", { class: "container", ref: (e) => (this.groupContainerRef = e) },
       h("vega-flex", { direction: this.layout === 'horizontal' ? 'row' : 'col', gap: "size-12" },
         h("slot", { 
           /* eslint-disable-next-line react/jsx-no-bind */
@@ -39,8 +60,18 @@ export class VegaSelectionTileGroupRenderer extends VegaSlimmer {
           () => this.itemsController.syncTileArrayAndValue() }))));
   }
   renderHint() {
-    return (this.hint && (h("div", { class: "vega-hint" },
-      h("label", null, this.hint))));
+    return (this.hint && (
+    // Mirrors `renderLabel`: the hint is exposed as its own
+    // focusable VoiceOver stop after the tile list, so AT users
+    // can swipe to it and hear the supporting copy. The visible
+    // text is wrapped in an `aria-hidden` span so VO only speaks
+    // the `aria-label` once instead of also descending into the
+    // child text node.
+    h("div", { class: "vega-hint" },
+      h("span", { 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabindex: 0, "aria-label": this.hint },
+        h("span", { "aria-hidden": "true" }, this.hint)))));
   }
 }
 __decorate([
@@ -58,9 +89,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "layout", void 0);
-__decorate([
-  MapToComponentField()
-], VegaSelectionTileGroupRenderer.prototype, "selectType", void 0);
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileGroupRenderer.prototype, "itemsController", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.css

@@ -55,6 +55,7 @@
   line-height: 22px;
   letter-spacing: 0px;
   margin-bottom: 16px;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   :host .vega-label {
@@ -83,9 +84,6 @@
     letter-spacing: 0px;
   }
 }
-:host .vega-label label {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-}
 :host .vega-label .vega-require {
   color: rgba(var(--v-text-error, 189, 41, 71, 1));
   margin-left: 4px;

package/dist/collection/components/vega-selection-tile/vega-selection-tile.css

@@ -34,12 +34,6 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
   background-color: rgba(var(--v-bg-tile-hover, 245, 247, 247, 1));
 }
-:host .selection-tile:not(.disabled):focus-visible {
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile:not(.disabled).checked {
   background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
   border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
@@ -49,12 +43,6 @@
   border: 2px solid rgba(var(--v-border-tile-selected-hover, 4, 112, 236, 1));
   background-color: rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1));
 }
-:host .selection-tile:not(.disabled).checked:focus-visible {
-  border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
-  background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile:not(.disabled).error {
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
@@ -63,12 +51,6 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
   background-color: rgba(var(--v-bg-tile-hover, 245, 247, 247, 1));
 }
-:host .selection-tile:not(.disabled).error:focus-visible {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
-  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
-}
 :host .selection-tile.disabled {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
@@ -158,4 +140,27 @@
 :host .selection-tile .selection-tile-select vega-checkbox,
 :host .selection-tile .selection-tile-select vega-radio {
   margin-top: 4px;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile.checked {
+  border: 2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-tile-selected, 242, 247, 255, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+:host(:focus-visible:not([aria-disabled=true])) .selection-tile.error {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+  background-color: rgba(var(--v-bg-tile, 252, 252, 252, 1));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
 }

package/dist/collection/components/vega-selection-tile/vega-selection-tile.js

@@ -70,9 +70,53 @@ export class VegaSelectionTile {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selectType = 'radio';
+    // Host-level activation listeners are attached via vDOM listeners
+    // (`onClick` / `onKeyDown` on the `<Host>` element below). Stencil's
+    // vDOM listeners use `addEventListener` under the hood, NOT the
+    // `onclick`/`onkeydown` IDL properties, so:
+    //   1. A consumer doing `tileEl.onclick = fn` cannot overwrite or
+    //      remove our listener.
+    //   2. A consumer attaching their own `addEventListener('click', ...)`
+    //      coexists with ours and fires alongside it (DOM event spec).
+    // So consumer code can observe / augment activation but cannot silently
+    // break it. Only `event.stopImmediatePropagation()` in a handler that
+    // runs before ours would suppress it -- an explicit opt-out, not a
+    // surprise override.
+    this.onHostClick = () => {
+      this.renderer.activate();
+    };
+    this.onHostKeyDown = (event) => {
+      this.renderer.handleTileKeydown(event);
+    };
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: { 'distribute-evenly': this.distributeEvenly } }, this.renderer.render()), this.host);
+    // ARIA semantics, focus, and activation handlers ALL live on the host.
+    //
+    // Why not `role="presentation"` on the host + role on an inner shadow
+    // element? Per ARIA 1.2, `role="presentation"`/`role="none"` is dropped
+    // ("presentation conflict resolution") whenever the element has any
+    // focusable descendants in the flat tree. Putting `tabindex="0"` on an
+    // inner shadow element therefore demotes the host's presentation role,
+    // and Firefox -- which enforces this rule strictly -- exposes the host
+    // as a generic/group wrapper around the inner radio. VoiceOver then
+    // triple-announces each tile:
+    //   1. "<title>, group"               (host wrapper)
+    //   2. "<title>, <note>, radio button" (inner role=radio)
+    //   3. "end of <title>, group"        (host wrapper close)
+    // Safari/Chrome happen to flatten the host out, masking the bug.
+    // Collapsing role + tabindex + aria-* onto the host eliminates the
+    // wrapper entirely -- the host *is* the radio/checkbox.
+    //
+    // NOTE on the `title` HTML attribute: `@Prop({ attribute: 'title' })
+    // titleText` observes the `title` attribute, so we deliberately do
+    // NOT pass `title={null}` to the Host -- doing so would strip the
+    // attribute at render time, which would then trigger Stencil's
+    // attribute observer and wipe `titleText` itself. The HTML `title`
+    // attribute stays on the host as a harmless tooltip; the explicit
+    // `aria-label` we emit takes precedence as the accessible name per
+    // the W3C accessible name computation, so VoiceOver/NVDA announce
+    // `aria-label` (which folds in the note line), not the tooltip text.
+    return sanitizeVegaComponent(h(Host, { role: this.selectType === 'checkbox' ? 'checkbox' : 'radio', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.renderer.getAccessibleName() || undefined, tabindex: this.disabled ? -1 : 0, class: { 'distribute-evenly': this.distributeEvenly }, onClick: this.onHostClick, onKeyDown: this.onHostKeyDown }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-selection-tile"; }
   static get encapsulation() { return "shadow"; }