@globalpayments/vega 2.99.0 → 2.101.0

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

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

@@ -6,7 +6,7 @@ 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 { VegaPopoverShow } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverShow, VegaPopoverHide, } 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';
@@ -57,6 +57,62 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
         this.tableSettingRef.selectedCells = this.getTableSelectedCells();
       }
     };
+    /**
+     * Hides the table setting toolbar and its dynamic popover. Used when focus leaves the table (e.g.
+     * Escape moves focus from a cell back onto the table) so the contextual toolbar does not linger.
+     */
+    this.hide = () => {
+      var _a;
+      void this.tableDynamicPopover.hide();
+      void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hide());
+    };
+    /**
+     * Opens the table setting toolbar for keyboard/screen-reader users and moves focus to its first
+     * enabled button. Used by the Alt+F10 shortcut so the toolbar can be reached from inside a cell
+     * even when it is currently closed: it re-targets and shows the popover (the same path as a table
+     * click) before deferring focus to the first enabled button.
+     *
+     * @param {RTETableBlock} tableBlock - The table's block data.
+     * @param {() => HTMLElement} getTableRef - Getter for the table's DOM element.
+     * @param {Nullable<HTMLElement>} returnCell - The cell to return focus to if the toolbar is dismissed with Escape.
+     */
+    this.openSettingToolbarForKeyboard = (tableBlock, getTableRef, returnCell) => {
+      // Re-target and show the popover through the same path as a table click so the toolbar is
+      // actually visible before focus lands on it — otherwise focus would be pushed onto a hidden
+      // or stale toolbar that isn't shown.
+      this.reTarget(tableBlock, getTableRef);
+      void this.tableDynamicPopover.hide();
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), getTableRef());
+      void this.popoverRef.show(true);
+      this.focusFirstSettingButton(returnCell);
+    };
+    /**
+     * Moves focus to the first enabled button in the table setting toolbar. Used by the Alt+F10
+     * shortcut so keyboard and screen-reader users can reach the toolbar from inside the table.
+     *
+     * @param {Nullable<HTMLElement>} returnCell - The cell to return focus to if the toolbar is dismissed with Escape.
+     */
+    this.focusFirstSettingButton = (returnCell) => {
+      var _a, _b;
+      // Remember the cell to return focus to if the toolbar is dismissed with Escape, and clear any
+      // stale Escape recorded before the toolbar was focused.
+      this.beginReturnFocusTracking(returnCell);
+      // Safari VoiceOver ignores the toolbar's aria-modal and keeps driving a caret through the still
+      // editable content, so on Ctrl+Opt+Right it walks the DOM caret out of the table into the editor
+      // instead of staying on the toolbar. Clear the caret AND make the editor content inert so there is
+      // no text context for VoiceOver to advance; the inert flag is lifted again when the toolbar hides.
+      (_b = (_a = this.getTableExtensionContext()) === null || _a === void 0 ? void 0 : _a.getSelection()) === null || _b === void 0 ? void 0 : _b.removeAllRanges();
+      this.setEditorContentInert(true);
+      // The popover reveals its content asynchronously, so defer to the next tick to make sure
+      // the setting buttons are present and focusable.
+      // eslint-disable-next-line no-restricted-globals
+      setTimeout(() => {
+        var _a, _b, _c;
+        const buttons = Array.from((_c = (_b = (_a = this.tableSettingRef) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.rte-table-setting-item')) !== null && _c !== void 0 ? _c : []);
+        const firstEnabled = buttons.find((button) => !button.hasAttribute('disabled'));
+        firstEnabled === null || firstEnabled === void 0 ? void 0 : firstEnabled.focus();
+      }, 0);
+    };
     /**
      * Handles setting menu click events.
      *
@@ -69,11 +125,16 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
         extensionContext && handler.execute(event.detail, extensionContext, this.tableBlock);
         if (event.detail[0] === TableSettingType.CAPTION) {
           this.updateTableSettingCaption();
+          this.moveFocusToCaption();
         }
       }
       if (event.detail[0] === TableSettingType.TABLE || event.detail[0] === TableSettingType.CELL) {
+        // Capture the return cell before hiding the setting popover, whose own hide handler clears
+        // it, so the properties dialog can move focus into itself and restore it to the cell on
+        // Escape for keyboard/screen-reader users.
+        const returnCell = this.returnFocusCell;
         void this.popoverRef.hide();
-        void this.tableDynamicPopover.show(event.detail[0]);
+        void this.tableDynamicPopover.show(event.detail[0], returnCell);
       }
     };
     /**
@@ -81,6 +142,17 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
      */
     this.handleTableSettingPopoverShow = () => {
       this.syncSelectedCells();
+      this.labelSettingDialog();
+    };
+    /**
+     * When the setting popover hides after an Escape press, returns focus (and the caret) to the
+     * table cell that had focus before the toolbar was reached via Alt+F10.
+     */
+    this.handleTableSettingPopoverHide = () => {
+      // Lift the inert guard on the editor content synchronously, before any focus restore runs, so the
+      // cell (or the properties dialog) can receive focus and the editor is interactive again.
+      this.setEditorContentInert(false);
+      this.restoreFocusOnEscapeHide();
     };
     this.tableDynamicPopover = new TableDynamicPopoverRenderer(RTETableColorManager.getTableColors(), renderContext);
   }
@@ -89,6 +161,8 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
    */
   destroy() {
     this.tableDynamicPopover.destroy();
+    this.setEditorContentInert(false);
+    this.detachEscapeTracker();
     if (this.popoverContainer) {
       this.popoverContainer.remove();
     }
@@ -109,6 +183,10 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       popover.isScreenPosition = true;
       popover.className = 'rte-table-setting-popover';
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, this.handleTableSettingPopoverHide);
+      // Escape inside the popover (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');
       const tableSetting = safeDocument.createElement('vega-rich-text-table-setting');
@@ -121,6 +199,25 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       this.tableSettingRef = tableSetting;
     }
   }
+  /**
+   * Whether the given event originated inside the setting toolbar subtree.
+   *
+   * @param {Event} event - The event to test.
+   * @returns {boolean} `true` when the toolbar is rendered and the event's composed path includes it.
+   */
+  isEventWithinPopover(event) {
+    return !!this.tableSettingRef && event.composedPath().includes(this.tableSettingRef);
+  }
+  /**
+   * Resolves the `.rich-text-content` editor root from the setting toolbar's target so the content
+   * can be made inert while the toolbar 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.tableSettingRef) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest('.rich-text-content')) !== null && _c !== void 0 ? _c : null;
+  }
   /**
    * Updates the table setting component caption state to match the current table data.
    */
@@ -130,6 +227,35 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       this.tableSettingRef.hasCaption = hasCaption;
     }
   }
+  /**
+   * When the caption is toggled on, moves keyboard/VoiceOver focus and the caret into the caption so
+   * the user lands in it to start typing. The setting toolbar is opened as inert-guarded for
+   * keyboard/screen-reader users, so lift that guard first; the caption is re-rendered by the toggle,
+   * so defer the focus to the next tick when the `<caption>` element exists.
+   */
+  moveFocusToCaption() {
+    if (!this.tableBlock.hasCaption()) {
+      return;
+    }
+    this.setEditorContentInert(false);
+    // eslint-disable-next-line no-restricted-globals
+    setTimeout(() => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const caption = (_c = (_b = (_a = this.tableSettingRef) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.querySelector('caption')) !== null && _c !== void 0 ? _c : null;
+      if (!caption) {
+        return;
+      }
+      caption.focus();
+      const selection = (_g = (_e = (_d = this.getTableExtensionContext()) === null || _d === void 0 ? void 0 : _d.getSelection()) !== null && _e !== void 0 ? _e : (_f = caption.ownerDocument) === null || _f === void 0 ? void 0 : _f.getSelection()) !== null && _g !== void 0 ? _g : null;
+      if (selection) {
+        const range = new Range();
+        range.selectNodeContents(caption);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }, 0);
+  }
   /**
    * Re-targets the shared popovers to the given table.
    *
@@ -144,6 +270,22 @@ export class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
       this.tableDynamicPopover.reTarget(tableBlock, getTableRef);
     }
   }
+  /**
+   * `vega-popover-content-box` renders `role="dialog"` + `aria-modal="true"`, which on WebKit
+   * VoiceOver confines the reading cursor to the popover. Keep those semantics so Ctrl+Opt+Arrow
+   * cannot walk the VoiceOver cursor out of the toolbar past the last button (VoiceOver swallows
+   * those keys, so this cannot be trapped in JS), and give the dialog an accessible name so it
+   * announces "Table tools" on entry.
+   */
+  labelSettingDialog() {
+    var _a, _b;
+    const dialog = (_b = (_a = this.tableSettingRef) === null || _a === void 0 ? void 0 : _a.closest('vega-popover-content-box')) !== null && _b !== void 0 ? _b : null;
+    if (dialog) {
+      dialog.setAttribute('role', 'dialog');
+      dialog.setAttribute('aria-modal', 'true');
+      dialog.setAttribute('aria-label', 'Table tools');
+    }
+  }
   /**
    * Collects and returns the currently selected table cells.
    *

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

@@ -366,11 +366,36 @@ export class RTETableSelection {
       const commonAncestorContainer = range.commonAncestorContainer;
       const rangeInTable = !!findParent(commonAncestorContainer, `table`);
       if (rangeInTable) {
-        const selectedCells = this.filterSelectedCell(range, commonAncestorContainer);
+        let selectedCells = this.filterSelectedCell(range, commonAncestorContainer);
+        if (selectedCells.length === 0) {
+          // A collapsed caret placed at an element boundary (e.g. keyboard/VoiceOver entry via
+          // Ctrl+Option+Space) does not intersect a text node, so filterSelectedCell finds nothing
+          // on browsers that keep the caret on the element (Firefox) instead of normalizing it into
+          // the text node (Chrome). Resolve the containing cell directly so the setting toolbar is
+          // still enabled.
+          selectedCells = this.resolveCaretCell(commonAncestorContainer);
+        }
         this.setSelectedCells(selectedCells);
       }
     }
   }
+  /**
+   * Resolve the single table cell that contains the given selection node. Used as a fallback when a
+   * collapsed caret does not intersect any text node (see handleSelectionChange).
+   *
+   * @param {Node} node - The selection's common ancestor container.
+   * @returns {RTETableCellBlock[]} The containing cell block, or an empty list when none is found.
+   */
+  resolveCaretCell(node) {
+    var _a;
+    const startElement = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+    const cellRef = (_a = startElement === null || startElement === void 0 ? void 0 : startElement.closest('td, th')) !== null && _a !== void 0 ? _a : null;
+    if (!cellRef) {
+      return [];
+    }
+    const cellBlock = stateEntityRenderingRegistry.getEntityByDOM(cellRef);
+    return cellBlock ? [cellBlock] : [];
+  }
   /**
    * Mark the beginning of a drag operation.
    */

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',
+      ariaLabel: 'Table',
       tooltip: { text: 'Insert table' },
     }));
   }

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

@@ -76,8 +76,17 @@ export class VegaRichTextCellPropertiesFormFieldRenderer extends VegaRichTextTab
     return (h("div", { class: "text-alignment-container" },
       h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Text Alignment"),
       h("vega-flex", { direction: "row", gap: "size-16" },
-        this.renderAlignmentField(['left', 'center', 'right', 'justify'], 'align-', 'textAlign'),
-        this.renderAlignmentField(['top', 'middle', 'bottom'], 'align-', 'verticalAlign'))));
+        this.renderAlignmentField(['left', 'center', 'right', 'justify'], 'align-', 'textAlign', {
+          left: this.translationSlimmer.t('Align text left'),
+          center: this.translationSlimmer.t('Align text center'),
+          right: this.translationSlimmer.t('Align text right'),
+          justify: this.translationSlimmer.t('Justify text'),
+        }),
+        this.renderAlignmentField(['top', 'middle', 'bottom'], 'align-', 'verticalAlign', {
+          top: this.translationSlimmer.t('Align vertically top'),
+          middle: this.translationSlimmer.t('Align vertically middle'),
+          bottom: this.translationSlimmer.t('Align vertically bottom'),
+        }))));
   }
   /**
    * Merge form data with style map for all selected cell blocks.

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-basic-form-field-renderer.abstract.js

@@ -182,11 +182,11 @@ export class VegaRichTextTablePropertiesBaseFormFieldRenderer extends VegaSlimme
       h("vega-input", { ref: this.handleFormChange, "data-vega-form": "height", label: "Height", validationRules: this.dimensionFieldValidationRule }),
       withPadding && (h("vega-input", { ref: this.handleFormChange, "data-vega-form": "padding", label: "Padding", validationRules: this.dimensionFieldValidationRule }))));
   }
-  renderAlignmentField(alignmentList, iconPrefix, formFieldName) {
+  renderAlignmentField(alignmentList, iconPrefix, formFieldName, ariaLabelMap) {
     return (h("vega-flex", { direction: "row", gap: "0", class: "text-alignment-button-group" },
       h("vega-input", { ref: this.handleFormChange, "data-vega-form": formFieldName, type: "hidden" }),
       alignmentList.map((key) => {
-        return (h("button", { "data-id": key, "data-form-field-name": formFieldName, class: `text-alignment-${key}`, onClick: this.handleAlignmentButtonClick },
+        return (h("button", { "data-id": key, "data-form-field-name": formFieldName, class: `text-alignment-${key}`, "aria-label": ariaLabelMap[key], onClick: this.handleAlignmentButtonClick },
           h("vega-icon", { icon: VegaInternalIconManager.getIconKey(`${iconPrefix}${key}`) })));
       })));
   }
@@ -274,6 +274,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "defaultValue", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextTablePropertiesBaseFormFieldRenderer.prototype, "renderer", void 0);