@globalpayments/vega 2.98.0 → 2.100.0

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

@@ -44,6 +44,16 @@ export class RTETableBlock extends RTEBlock {
   getLastNode() {
     return this.children[this.children.length - 1].getLastNode();
   }
+  /**
+   * The table is an atomic caret boundary: resolving a caret on its boundary must keep
+   * it anchored to the table block (so paragraph-insertion before/after works) rather
+   * than descending into a cell.
+   *
+   * @inheritDoc
+   */
+  allowsCaretDescend() {
+    return false;
+  }
   /**
    * Get the first node of the table block.
    *

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

@@ -8,15 +8,9 @@ export class RTETableCaptionRenderer extends VegaRTEExtensionRenderer {
   /**
    * @inheritDoc
    */
-  doRender(h, renderData) {
-    return h('caption', {
-      'key': renderData.id,
-      'ref': this.useRef(renderData),
-      'style': renderData.getStyles(),
-      'class': [renderData.getClasses(), renderData.isNotEmpty() ? null : 'showPlaceholder']
+  doRender(h, renderData, rteContext) {
+    return h('caption', Object.assign(Object.assign({ 'key': renderData.id, 'ref': this.useRef(renderData) }, (rteContext.editable ? { contentEditable: true } : undefined)), { 'style': renderData.getStyles(), 'class': [renderData.getClasses(), renderData.isNotEmpty() ? null : 'showPlaceholder']
         .filter(isNonNullable)
-        .join(' '),
-      'data-placeholder': TABLE_CAPTION_PLACEHOLDER_TEXT,
-    });
+        .join(' '), 'data-placeholder': TABLE_CAPTION_PLACEHOLDER_TEXT }));
   }
 }

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

@@ -21,9 +21,9 @@ export class RTETableCellRenderer extends VegaRTEExtensionRenderer {
    */
   renderByCellType(h, renderData, rteContext, elementType) {
     var _a;
-    return h(elementType, Object.assign(Object.assign(Object.assign({ key: `${renderData.id}-${elementType}`, 
+    return h(elementType, Object.assign(Object.assign(Object.assign(Object.assign({ key: `${renderData.id}-${elementType}`, 
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData, rteContext) : undefined)));
+      ref: this.useRef(renderData) }, (rteContext.editable ? { contentEditable: true, tabindex: -1 } : undefined)), (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData, rteContext) : undefined)));
   }
   /**
    * Returns the mouse event listeners for selection handling.

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

@@ -83,6 +83,8 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
    * and clears the internal reference.
    */
   destroy() {
+    this.setEditorContentInert(false);
+    this.detachEscapeTracker();
     if (this.selectionAnchorRef && this.selectionAnchorRef.parentNode) {
       DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor);
       this.selectionAnchorRef.parentNode.removeChild(this.selectionAnchorRef);
@@ -95,8 +97,13 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
    *
    * @param {string} type - The table setting type determining which
    *  content variant to display (for example, table properties or cell properties).
+   * @param {Nullable<HTMLElement>} returnCell - The cell to move focus into the dialog for and
+   *  return focus to if the dialog is dismissed with Escape (set for keyboard/screen-reader users).
    */
-  async show(type) {
+  async show(type, returnCell) {
+    // Remember the cell to return focus to if the dialog is dismissed with Escape, and clear any
+    // stale Escape recorded before the dialog was opened.
+    this.beginReturnFocusTracking(returnCell);
     let target = this.getTableRef();
     const extensionContext = this.getTableExtensionContext();
     let cells = [];
@@ -116,6 +123,11 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     this.storeCurrentFocusNode();
     remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), target);
     await this.popoverRef.show();
+    // When opened for keyboard/screen-reader users (a return cell is known), move focus into the
+    // dialog so it lands on the first focusable field (the Border Style control).
+    if (returnCell) {
+      this.focusFirstFormField(type);
+    }
   }
   /**
    * hide the popover.
@@ -150,7 +162,11 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         if (this.popoverCloseType === 'change' && extensionContext) {
           extensionContext.flushValue(extensionContext.host.value);
         }
+        this.handleDialogHide();
       });
+      // Escape inside the dialog (rendered in a portal) does not bubble back to the table, so
+      // observe it on the document (capture phase) to know when to return focus to the cell.
+      this.attachEscapeTracker(safeDocument);
       const slotDiv = safeDocument.createElement('div');
       slotDiv.setAttribute('slot', 'popover');
       slotDiv.className = 'rte-table-dynamic-popover-content';
@@ -177,6 +193,28 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
       return popover;
     }
   }
+  /**
+   * Whether the given event originated inside the properties dialog subtree (either the table or the
+   * cell properties form).
+   *
+   * @param {Event} event - The event to test.
+   * @returns {boolean} `true` when an active form is rendered and the event's composed path includes it.
+   */
+  isEventWithinPopover(event) {
+    const path = event.composedPath();
+    return ((!!this.tablePropertiesFormRef && path.includes(this.tablePropertiesFormRef)) ||
+      (!!this.cellPropertiesFormRef && path.includes(this.cellPropertiesFormRef)));
+  }
+  /**
+   * Resolves the `.rich-text-content` editor root from the current table ref so the content can be
+   * made inert while the properties dialog holds keyboard/VoiceOver focus.
+   *
+   * @returns {Nullable<HTMLElement>} The editor content element, or `null` when it cannot be resolved.
+   */
+  getInertContentTarget() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.getTableRef) === null || _a === void 0 ? void 0 : _a.call(this)) === null || _b === void 0 ? void 0 : _b.closest('.rich-text-content')) !== null && _c !== void 0 ? _c : null;
+  }
   /**
    * Updates the visibility of the pre-rendered content blocks based on type.
    *
@@ -214,6 +252,48 @@ export class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     const extensionContext = this.getTableExtensionContext();
     extensionContext && (this.currentFocusNode = extensionContext.getSelectedNodes()[0]);
   }
+  /**
+   * Moves focus to the first focusable control in the active properties form so keyboard and
+   * screen-reader users land inside the dialog when it opens. The first form field is the Border
+   * Style select; its focusable trigger is the `.vega-input-select-container` element.
+   *
+   * @param {string} type - The table setting type that determines which form is visible.
+   */
+  focusFirstFormField(type) {
+    const formRef = type === TableSettingType.TABLE ? this.tablePropertiesFormRef : this.cellPropertiesFormRef;
+    if (!formRef) {
+      return;
+    }
+    // Make the editor content inert up front so the table/cell cannot steal focus while the dialog
+    // lays out. The cell form applies the selected cell's styles on open, whose async reset fires a
+    // selectionchange that would otherwise re-focus the cell before we reach Border Style. Inert also
+    // gives VoiceOver no cell-caret text context, so its cursor follows the focus. Lifted on hide.
+    this.setEditorContentInert(true);
+    // The CELL form applies the selected cell's styles on open (it sets both `styleMap` and
+    // `defaultValue`), a heavier re-render than TABLE, so on the first open its Border Style control is
+    // present but 0×0 for a frame. WebKit's VoiceOver cursor does not follow `.focus()` onto a
+    // zero-area element, so defer through a double animation frame: the first schedules past the
+    // popover's async reveal, the second runs after the browser has committed the layout pass that
+    // sizes the control.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        var _a, _b, _c, _d, _e;
+        const firstField = (_b = (_a = formRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[data-vega-form]')) !== null && _b !== void 0 ? _b : null;
+        const container = (_d = (_c = firstField === null || firstField === void 0 ? void 0 : firstField.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.vega-input-select-container')) !== null && _d !== void 0 ? _d : null;
+        (_e = (container !== null && container !== void 0 ? container : firstField)) === null || _e === void 0 ? void 0 : _e.focus();
+      });
+    });
+  }
+  /**
+   * When the properties dialog hides after an Escape press, returns focus (and the caret) to the
+   * table cell that had focus before the dialog was opened via the setting toolbar.
+   */
+  handleDialogHide() {
+    // Lift the inert guard on the editor content synchronously, before any focus restore runs, so the
+    // cell can receive focus and the editor is interactive again.
+    this.setEditorContentInert(false);
+    this.restoreFocusOnEscapeHide();
+  }
   /**
    * Create and position an invisible anchor element whose position and size are identical to the geometry of the current multi-cell selection.
    * This anchor element will then be used as the target of the popup, so that the popup appears near the entire selection area.

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

@@ -1,9 +1,42 @@
 import RTEExtensionContextManager from '../../../helpers/extension-context-manager';
 /**
  * Base renderer for table-related popovers, providing common functionalities such as accessing the table extension context.
+ *
+ * Popovers that move keyboard/VoiceOver focus into themselves (the setting toolbar and the
+ * properties dialog) share the same focus-restoration machinery: they make the editor content
+ * `inert` while open, track Escape presses at the document level, and return focus (and the caret)
+ * to the originating cell when an Escape dismisses the popover. That behavior lives here so the two
+ * renderers do not each carry a copy; subclasses only supply the two pieces that differ — how to
+ * resolve the editor content root ({@link getInertContentTarget}) and how to tell whether an event
+ * originated inside their own popover subtree ({@link isEventWithinPopover}).
  */
 export class TablePopoverBaseRenderer {
   constructor(renderContext) {
+    /** The editor content element made inert while the popover holds focus, cached so it can be restored. */
+    this.inertedContentEl = null;
+    /** The table cell to return focus to when the popover is dismissed via Escape. */
+    this.returnFocusCell = null;
+    /** Tracks whether Escape was pressed while the popover was open. */
+    this.escapePressed = false;
+    /** Document the Escape tracker keydown listener is bound to, for later removal. */
+    this.keydownListenerDocument = null;
+    /**
+     * Tracks Escape key presses that originate inside the popover so focus can be returned to the
+     * originating cell when that Escape dismisses the popover. vega-popover's own Escape handler hides
+     * the popover without restoring focus, so the restore is coordinated here.
+     *
+     * The listener is bound at the document level (the popover renders in a portal, so its Escape does
+     * not bubble back to the table), so scope it to the popover subtree via {@link isEventWithinPopover}:
+     * a stray Escape elsewhere must not arm the restore and hijack focus on a later non-Escape dismissal
+     * (e.g. click-outside).
+     *
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    this.handleDocumentKeydown = (event) => {
+      if (event.code === 'Escape' && this.isEventWithinPopover(event)) {
+        this.escapePressed = true;
+      }
+    };
     this.renderContext = renderContext;
   }
   /**
@@ -16,4 +49,119 @@ export class TablePopoverBaseRenderer {
       ? RTEExtensionContextManager.getExtensionContext(this.renderContext.host)
       : null;
   }
+  /**
+   * Begins tracking so a later Escape can return focus to `returnCell`. Records the cell and clears
+   * any stale Escape observed before the popover was opened.
+   *
+   * @param {Nullable<HTMLElement>} returnCell - The cell to return focus to if the popover is dismissed with Escape.
+   */
+  beginReturnFocusTracking(returnCell) {
+    this.returnFocusCell = returnCell !== null && returnCell !== void 0 ? returnCell : null;
+    this.escapePressed = false;
+  }
+  /**
+   * Registers the document-level (capture phase) Escape tracker. The popover renders in a portal, so
+   * its Escape does not bubble back to the table; observing on the document lets us know when to
+   * return focus to the cell.
+   *
+   * @param {Document} doc - The document to bind the keydown listener to.
+   */
+  attachEscapeTracker(doc) {
+    doc.addEventListener('keydown', this.handleDocumentKeydown, { capture: true });
+    this.keydownListenerDocument = doc;
+  }
+  /**
+   * Removes the document-level Escape tracker if one was registered.
+   */
+  detachEscapeTracker() {
+    if (this.keydownListenerDocument) {
+      this.keydownListenerDocument.removeEventListener('keydown', this.handleDocumentKeydown, {
+        capture: true,
+      });
+      this.keydownListenerDocument = null;
+    }
+  }
+  /**
+   * Whether the given event originated inside this popover's subtree. Subclasses override this to
+   * match their own portal-rendered content; the base returns `false` so renderers that do not move
+   * focus never arm the restore.
+   *
+   * @param {Event} _event - The event to test.
+   * @returns {boolean} `true` when the event originated inside the popover subtree.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isEventWithinPopover(_event) {
+    return false;
+  }
+  /**
+   * When the popover hides after an Escape press, returns focus (and the caret) to the table cell
+   * that had focus before the popover was opened.
+   *
+   * vegaPopoverHide fires synchronously from the popover's own Escape handler, before the
+   * document-capture keydown observes the key and before the popover settles focus on `<body>`.
+   * Defer past that so the flag is set and this focus restore wins.
+   */
+  restoreFocusOnEscapeHide() {
+    // eslint-disable-next-line no-restricted-globals
+    setTimeout(() => {
+      const shouldRestore = this.escapePressed;
+      const cell = this.returnFocusCell;
+      this.escapePressed = false;
+      this.returnFocusCell = null;
+      if (shouldRestore && cell && cell.isConnected) {
+        this.restoreFocusToCell(cell);
+      }
+    }, 0);
+  }
+  /**
+   * Focuses the given table cell and collapses the caret at its start.
+   *
+   * @param {HTMLElement} cell - The table cell to focus.
+   */
+  restoreFocusToCell(cell) {
+    var _a, _b, _c;
+    cell.focus();
+    const extensionContext = this.getTableExtensionContext();
+    const selection = (_c = (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.getSelection()) !== null && _a !== void 0 ? _a : (_b = cell.ownerDocument) === null || _b === void 0 ? void 0 : _b.getSelection()) !== null && _c !== void 0 ? _c : null;
+    if (selection) {
+      const range = new Range();
+      range.setStart(cell, 0);
+      range.setEnd(cell, 0);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+  /**
+   * Resolves the `.rich-text-content` editor root to toggle `inert` on while the popover holds focus.
+   * Subclasses override this because they reach the content from different anchors (the toolbar's
+   * target vs. the current table ref); the base returns `null` so renderers that do not use inert are
+   * unaffected.
+   *
+   * @returns {Nullable<HTMLElement>} The editor content element, or `null` when it cannot be resolved.
+   */
+  getInertContentTarget() {
+    return null;
+  }
+  /**
+   * Toggles `inert` on the editor content region while the popover holds keyboard/VoiceOver focus.
+   * Safari VoiceOver keeps its reading cursor anchored to the cell caret and does not follow the
+   * programmatic focus moved into the popover; making the editor content inert removes that text
+   * context so the VoiceOver cursor lands inside the popover. The popover is a body-level portal, so it
+   * is not a descendant of the inert content and stays interactive.
+   *
+   * @param {boolean} inert - Whether the editor content should be inert.
+   */
+  setEditorContentInert(inert) {
+    if (inert) {
+      const content = this.getInertContentTarget();
+      if (content) {
+        content.setAttribute('inert', '');
+        this.inertedContentEl = content;
+      }
+    }
+    else if (this.inertedContentEl) {
+      this.inertedContentEl.removeAttribute('inert');
+      this.inertedContentEl = null;
+    }
+  }
 }

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

@@ -15,7 +15,7 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(h, renderData, rteContext) {
     let tableRef;
-    const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
+    const table = this.renderTable(h, renderData, (ref) => (tableRef = ref), rteContext);
     this.renderTableToolbar(rteContext);
     const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
@@ -39,9 +39,16 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
             }
           },
         }, [
-          // Add an extra div as slot container, to make sure the cursor can move to before/end of the table.
+          // The table is a fully non-editable "widget" wrapped by a
+          // `<div contenteditable="false">`: there is NO editable element wrapping the
+          // table, so Chrome/VoiceOver exposes it as a real table ("table, N columns, M
+          // rows") instead of flattening it into the surrounding text entry area. The
+          // <table> stays a plain, semantically clean table and each cell re-enables editing
+          // via contentEditable=true. The cursor moves to before/after the table via the
+          // adjacent paragraphs in the editor content, treating the table as an atomic widget.
           h('div', {
-            contentEditable: true,
+            class: 'v-rte--extension-table-widget',
+            contentEditable: false,
             ref: this.useRef(renderData),
           }, [table]),
         ]),
@@ -55,6 +62,11 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     }
     const result = h('div', {
       class: 'v-rte--extension-table-container',
+      // The container is `display: table` (for shrink-to-fit centering), which WebKit maps to an
+      // AXTable. Without this, Safari VoiceOver lands its cursor on the container (or groups up to
+      // the widget host) instead of the real `<table>`. `role="presentation"` strips the container's
+      // implicit table semantics so VO descends to `table.v-rte--extension-table` like Chrome does.
+      role: 'presentation',
       style: Object.assign({}, containerStyle),
     }, children);
     /**
@@ -83,17 +95,151 @@ export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @param {VegaRTECreateElementFunction} h - The create element function.
    * @param {RTETableBlock} renderData - The table block to render.
    * @param {(ref: HTMLElement) => HTMLElement} setTableRef - Set table ref to tableRef
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
    * @returns {VegaRTERenderResult} - The rendered table element.
    */
-  renderTable(h, renderData, setTableRef) {
+  renderTable(h, renderData, setTableRef, rteContext) {
     var _a;
-    return h('table', Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: renderData.getClasses(), 
+    const editable = !!rteContext.editable;
+    return h('table', Object.assign(Object.assign(Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: renderData.getClasses() }), (editable
+      ? {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        onClick: (event) => this.handleTableActivate(event, rteContext),
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        onKeyDown: (event) => this.handleTableKeyDown(event, rteContext, renderData),
+      }
+      : undefined)), { 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (ref) => {
         this.useRef(renderData)(ref);
         setTableRef(ref);
       } }));
   }
+  /**
+   * Handles activation of the table itself (e.g. VoiceOver Ctrl+Option+Space, which dispatches a
+   * click on the focused table) by moving focus into the first cell so the user can start editing.
+   *
+   * @param {MouseEvent} event - The click event dispatched on the table.
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  handleTableActivate(event, rteContext) {
+    const tableRef = event.currentTarget;
+    // Only treat this as "activate the table" when the click truly targets the table element
+    // itself — i.e. VoiceOver Ctrl+Option+Space (which dispatches a click on the focused table)
+    // or a click on the table's own padding/border. Clicks that bubble up from editable
+    // descendants (cells, or the supported <caption>) keep their native contentEditable caret
+    // placement, so we must not force focus into the first cell and break that interaction.
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    this.focusFirstCell(tableRef, rteContext);
+  }
+  /**
+   * Handles table-scoped keyboard shortcuts while focus is inside the table:
+   * - Alt+F10 opens the table setting toolbar (re-targeting and showing it when needed) and moves
+   *   focus to it (the common "focus the contextual toolbar" shortcut), so keyboard/screen-reader
+   *   users can reach the toolbar buttons even when it is currently closed.
+   * - Escape moves focus back onto the table, so the caret leaves the cell (its focus highlight
+   *   is cleared), the contextual setting toolbar is dismissed, and screen readers announce the
+   *   table again.
+   *
+   * @param {KeyboardEvent} event - The keydown event.
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   * @param {RTETableBlock} renderData - The table block being rendered.
+   */
+  handleTableKeyDown(event, rteContext, renderData) {
+    var _a, _b;
+    if (event.altKey && event.key === 'F10') {
+      event.preventDefault();
+      event.stopPropagation();
+      const tableRef = event.currentTarget;
+      const f10Target = event.target;
+      const f10Cell = f10Target
+        ? f10Target.closest('td, th')
+        : null;
+      (_a = this.tableToolbar) === null || _a === void 0 ? void 0 : _a.openSettingToolbarForKeyboard(renderData, () => tableRef, f10Cell);
+      return;
+    }
+    if (event.key !== 'Escape') {
+      return;
+    }
+    const tableRef = event.currentTarget;
+    const target = event.target;
+    const cell = target
+      ? target.closest('td, th')
+      : null;
+    if (!cell || !tableRef.contains(cell)) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.focusTable(tableRef, rteContext);
+    // Focus moved from the cell back onto the table, so dismiss the contextual setting toolbar
+    // that may have been opened (e.g. by activating the table) — otherwise it lingers with no
+    // focused cell to act on.
+    (_b = this.tableToolbar) === null || _b === void 0 ? void 0 : _b.hide();
+  }
+  /**
+   * Moves focus (and the caret) into the first cell of the table.
+   *
+   * @param {HTMLElement} tableRef - The table element.
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  focusFirstCell(tableRef, rteContext) {
+    const firstCell = tableRef.querySelector('td, th');
+    if (!firstCell) {
+      return;
+    }
+    firstCell.focus();
+    const selection = this.getSelection(rteContext, tableRef);
+    if (selection) {
+      // Collapse the caret at the start of the cell content so the user can start typing.
+      const range = new Range();
+      range.setStart(firstCell, 0);
+      range.setEnd(firstCell, 0);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+  /**
+   * Moves focus onto the table element and clears any cell caret and selection highlight.
+   *
+   * @param {HTMLElement} tableRef - The table element.
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  focusTable(tableRef, rteContext) {
+    var _a;
+    const selection = this.getSelection(rteContext, tableRef);
+    selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+    const extensionContext = this.getExtensionContext(rteContext.host);
+    (_a = extensionContext === null || extensionContext === void 0 ? void 0 : extensionContext.tableSelection) === null || _a === void 0 ? void 0 : _a.setSelectedCells([]);
+    // The table is contentEditable=false, so it is not focusable by default. Add tabindex ONLY
+    // while moving focus onto it, and remove it again on blur, so that during normal navigation
+    // VoiceOver still announces it as "table, N columns, M rows" rather than a focusable widget.
+    tableRef.setAttribute('tabindex', '-1');
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const removeTabindex = () => {
+      tableRef.removeAttribute('tabindex');
+      tableRef.removeEventListener('blur', removeTabindex);
+    };
+    tableRef.addEventListener('blur', removeTabindex);
+    tableRef.focus();
+  }
+  /**
+   * Resolves the editor selection, preferring the shadow-aware selection from the extension
+   * context and falling back to the table's owning document.
+   *
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   * @param {HTMLElement} tableRef - The table element.
+   * @returns {Nullable<Selection>} - The resolved selection, or null when unavailable.
+   */
+  getSelection(rteContext, tableRef) {
+    const extensionContext = this.getExtensionContext(rteContext.host);
+    if (extensionContext) {
+      return extensionContext.getSelection();
+    }
+    return tableRef.ownerDocument ? tableRef.ownerDocument.getSelection() : null;
+  }
   /**
    * Handles the removal of the table block.
    *