@globalpayments/vega 2.99.0 → 2.101.0

package/dist/collection/components/vega-rich-text-editor/dto/content-state.js

@@ -24,6 +24,8 @@ import { LogUtility } from '../../../utils/log';
 import { HTMLContentCleaner } from '../slimmers/controllers/html-cleaner';
 import { RTEFilterStylesStrategyRegistry } from './filter-styles-strategies/filter-styles-strategy-registry';
 import { DeleteSelectedContentStrategy } from './action-handle-strategies/modify-content-strategies/delete-selected-content-strategy';
+import { CommitValueStrategy } from './action-handle-strategies/modify-content-strategies/commit-value-strategy';
+import { COMMIT_VALUE } from './actions/commit-value-action';
 import { ReplaceNestListAction } from './actions/replace-nest-list-action';
 /**
  * Class representing the content state of the rich text editor.
@@ -189,6 +191,14 @@ export class VegaRTEContent {
     const lastBlock = this.children[this.children.length - 1];
     return lastBlock.getLastNode();
   }
+  /**
+   * Get the plain text content of the whole document, used for character counting.
+   *
+   * @returns {string} The concatenated plain text of all top-level blocks.
+   */
+  getPlainText() {
+    return this.children.map((block) => block.getPlainText()).join('');
+  }
   /**
    * Convert text to list.
    *
@@ -267,6 +277,7 @@ export class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_SELECTED_CONTENT, VegaRTEContent.name, new DeleteSelectedContentStrategy());
+  ActionHandleStrategyRegistry.register(COMMIT_VALUE, VegaRTEContent.name, new CommitValueStrategy());
 })();
 /** Minimize-safe type discriminator for VegaRTEContent. */
 VegaRTEContent.dtoName = 'VegaRTEContent';

package/dist/collection/components/vega-rich-text-editor/dto/nodes/code-block-node.js

@@ -32,6 +32,12 @@ export class RTECodeBlockNode extends RTEDecoratorNode {
   toJSON() {
     return { id: this.id, type: 'text', text: this.text, language: this.language };
   }
+  /**
+   * @inheritDoc
+   */
+  getPlainText() {
+    return this.text;
+  }
   /**
    * @inheritDoc
    */

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -134,6 +134,14 @@ export class RTENode {
   isTextNode() {
     return false;
   }
+  /**
+   * Get the plain text content of the node, used for character counting. Default implementation returns an empty string, subclasses should override this method to provide the actual plain text content.
+   *
+   * @returns {string} The plain text content of the node.
+   */
+  getPlainText() {
+    return '';
+  }
   /**
    * Get the HTMLElement reference associated with this node.
    *

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -218,6 +218,12 @@ export class RTETextNode extends RTENode {
   isContentEditable() {
     return true;
   }
+  /**
+   * @inheritDoc
+   */
+  getPlainText() {
+    return this.text;
+  }
   /**
    * Returns the inline HTML wrapper descriptor at the given depth in the
    * annotation chain. Depth 0 is the outermost wrapper, depth 1 is its child, etc.

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

@@ -50,7 +50,7 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the dropdown.
    */
   renderDropdown(h, editorContext, dropdownProps, children) {
-    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', isScreenPosition: true, 
+    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', isScreenPosition: true, role: 'presentation', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
         this.dropdownEl = el;
@@ -134,29 +134,31 @@ export class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the button.
    */
   renderButton(h, editorContext, buttonProps) {
-    const { icon, label, showArrowIcon, tooltip } = buttonProps;
+    const { icon, label, showArrowIcon, tooltip, ariaLabel } = buttonProps;
     const isDisabled = this.isDisabled(editorContext);
     const button = h('vega-rich-text-editor-toolbar-button', {
-      disabled: isDisabled,
-      icon: icon,
-      hidden: this.isHidden(editorContext),
-      selected: this.isSelected(editorContext),
+      'disabled': isDisabled,
+      'icon': icon,
+      'data-aria-label': ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label,
+      'hidden': this.isHidden(editorContext),
+      'selected': this.isSelected(editorContext),
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (el) => {
+      'ref': (el) => {
         this.buttonEl = el;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => this.handleButtonClick(editorContext));
       },
-      onMouseDown: this.preventDefault,
+      'onMouseDown': this.preventDefault,
       // eslint-disable-next-line jsdoc/require-jsdoc
-      onKeyDown: (e) => this.handleButtonKeyDown(e),
+      'onKeyDown': (e) => this.handleButtonKeyDown(e),
     }, [
       this.renderButtonLabel(h, editorContext, label),
       showArrowIcon
         ? h('vega-icon', {
-          size: 'size-8',
-          color: isDisabled ? 'text-disabled' : 'text-secondary',
-          style: { marginLeft: '8px' },
-          icon: VegaInternalIconManager.getIconKey('chevron-down'),
+          'size': 'size-8',
+          'color': isDisabled ? 'text-disabled' : 'text-secondary',
+          'style': { marginLeft: '8px' },
+          'aria-hidden': 'true',
+          'icon': VegaInternalIconManager.getIconKey('chevron-down'),
         })
         : null,
     ].filter(isNonNullable));
@@ -177,8 +179,9 @@ export class VegaRTEToolbarButtonRenderer {
     if (label) {
       const isDisabled = this.isDisabled(editorContext);
       return h('vega-font', {
-        variant: 'font-field-label-sm',
-        color: isDisabled ? 'text-disabled' : 'text-primary',
+        'variant': 'font-field-label-sm',
+        'color': isDisabled ? 'text-disabled' : 'text-primary',
+        'aria-hidden': 'true',
       }, editorContext.translation.t(label));
     }
     return null;
@@ -210,6 +213,15 @@ export class VegaRTEToolbarButtonRenderer {
   preventDefault(e) {
     e.preventDefault();
   }
+  /**
+   * Moves focus to the toolbar button. Targets the inner focusable `<button>`
+   * inside the button's shadow root, falling back to the host element.
+   */
+  focusToolbarButton() {
+    var _a, _b, _c, _d;
+    const innerButton = (_c = (_b = (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button')) !== null && _c !== void 0 ? _c : null;
+    (_d = (innerButton !== null && innerButton !== void 0 ? innerButton : this.buttonEl)) === null || _d === void 0 ? void 0 : _d.focus();
+  }
   /**
    * Recursively searches for a dropdown list item by its key.
    *
@@ -263,14 +275,14 @@ export class VegaRTEToolbarButtonRenderer {
    * @param {KeyboardEvent} e The keyboard event.
    */
   handleItemsKeyDown(e) {
-    var _a, _b, _c;
+    var _a, _b;
     if (e.code === 'Escape') {
       e.preventDefault();
       e.stopPropagation();
       if (this.dropdownEl) {
         void this.dropdownEl.hide();
       }
-      (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+      this.focusToolbarButton();
       return;
     }
     if (e.code !== 'ArrowDown' && e.code !== 'ArrowUp') {
@@ -288,7 +300,7 @@ export class VegaRTEToolbarButtonRenderer {
     for (let offset = 0; offset < items.length; offset++) {
       const index = (startIndex + offset * direction + items.length) % items.length;
       if (!items[index].disabled) {
-        (_c = (_b = items[index].shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li')) === null || _c === void 0 ? void 0 : _c.focus();
+        (_b = (_a = items[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === null || _b === void 0 ? void 0 : _b.focus();
         return;
       }
     }

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

@@ -33,6 +33,7 @@ export class RTEBlockquoteToolbarButtonRenderer extends VegaRTEToolbarButtonRend
   render(createElement, editorContext) {
     return this.renderButton(createElement, editorContext, {
       icon: 'quote-left',
+      ariaLabel: editorContext.translation.t('Block quote'),
       tooltip: { text: 'Block quote' },
     });
   }

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

@@ -18,6 +18,7 @@ export class RTECopyToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
   render(h, editorContext) {
     return this.renderButton(h, editorContext, {
       icon: 'rte-copy',
+      ariaLabel: editorContext.translation.t('Copy'),
       tooltip: { text: 'Copy' },
     });
   }

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

@@ -19,6 +19,7 @@ export class RTECutToolbarButtonRenderer extends RTECopyToolbarButtonRenderer {
   render(h, editorContext) {
     return this.renderButton(h, editorContext, {
       icon: 'rte-cut',
+      ariaLabel: editorContext.translation.t('Cut'),
       tooltip: { text: 'Cut' },
     });
   }

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/slimmer/renderers/find-replace-toolbar-button-renderer.js

@@ -8,6 +8,7 @@ import { FindController } from '../controllers/find-controller';
 import { ReplaceController } from '../controllers/replace-controller';
 import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { debounce } from '../../../../../../utils/timer';
+import { getDeepActiveElementInShadow } from '../../../../../../utils/ui';
 /**
  * Toolbar button renderer for the Find & Replace extension.
  *
@@ -60,14 +61,22 @@ export class FindReplaceToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       placement: 'bottom',
       showArrow: false,
       isScreenPosition: true,
+      role: 'presentation',
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (ref) => {
         if (ref) {
           this.popoverRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+            const shouldRestoreFocus = this.shouldRestoreFocusToButton();
             this.isPopoverOpen = false;
             this.findController.clear();
             this.updatePanel({ current: 0, total: 0 });
+            if (shouldRestoreFocus) {
+              // Defer so it runs after the popover's own focus-restore
+              // (AriaDialogFocusableTrapSlimmer), returning focus to the toolbar
+              // button for keyboard and VoiceOver users when the panel is dismissed.
+              setTimeout(() => this.focusToolbarButton());
+            }
           });
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
             this.isPopoverOpen = true;
@@ -98,6 +107,7 @@ export class FindReplaceToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       ]),
       h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
         icon: 'rte-find-replace',
+        ariaLabel: editorContext.translation.t('Find and replace'),
         tooltip: { text: VegaInternalTranslation.t('Find and replace') },
       })),
     ]);
@@ -200,6 +210,47 @@ export class FindReplaceToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       void this.popoverRef.hide();
     }
   }
+  /**
+   * Decides whether closing the panel should return focus to the toolbar button.
+   *
+   * Focus is restored when the panel is dismissed while focus is still inside it
+   * (Escape key or the Close button) — including the VoiceOver case where the
+   * dialog's `inert` blur has already moved focus to `<body>`. It is not restored
+   * when focus has intentionally moved to another element (Tab out of the panel
+   * or interacting with something else), so we don't yank focus back.
+   *
+   * @returns {boolean} True when focus should return to the toolbar button.
+   */
+  shouldRestoreFocusToButton() {
+    // eslint-disable-next-line no-restricted-globals
+    const activeEl = getDeepActiveElementInShadow(document, true);
+    // eslint-disable-next-line no-restricted-globals
+    return !activeEl || activeEl === document.body || this.isElementWithinPanel(activeEl);
+  }
+  /**
+   * Checks whether an element is inside the panel, crossing shadow boundaries.
+   *
+   * @param {Nullable<HTMLElement>} el - The element to test.
+   * @returns {boolean} True when the element is contained by the panel.
+   */
+  isElementWithinPanel(el) {
+    if (!el || !this.panelRef) {
+      return false;
+    }
+    let node = el;
+    while (node) {
+      if (node === this.panelRef) {
+        return true;
+      }
+      const parent = node.parentNode;
+      // Cross shadow boundaries: a shadow root (nodeType 11) exposes its `host`.
+      node =
+        parent && parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+          ? parent.host
+          : parent;
+    }
+    return false;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ 'rte-find-replace': findReplaceIcon });

package/dist/collection/components/vega-rich-text-editor/extensions/find-replace/vega-rich-text-find-replace-panel/slimmers/renderers/find-replace-panel-renderer.js

@@ -26,7 +26,7 @@ export class FindReplacePanelRenderer extends VegaSlimmer {
       h("div", { class: "find-replace-panel__field" },
         h("vega-field-label", { label: VegaInternalTranslation.t('Find in text') }),
         h("div", { class: "find-replace-panel__body" },
-          h("vega-input", { size: "small", label: "", class: "find-replace-panel__input", ref: (ref) => {
+          h("vega-input", { size: "small", label: "", "data-aria-label": VegaInternalTranslation.t('Find in text'), class: "find-replace-panel__input", ref: (ref) => {
               if (ref) {
                 DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
                   this.onKeywordChange(e.detail);
@@ -40,7 +40,7 @@ export class FindReplacePanelRenderer extends VegaSlimmer {
       h("div", { class: "find-replace-panel__field" },
         h("vega-field-label", { label: VegaInternalTranslation.t('Replace with') }),
         h("div", { class: "find-replace-panel__body" },
-          h("vega-input", { disabled: !hasResults, size: "small", label: "", class: "find-replace-panel__input", ref: (ref) => {
+          h("vega-input", { disabled: !hasResults, size: "small", label: "", "data-aria-label": VegaInternalTranslation.t('Replace with'), class: "find-replace-panel__input", ref: (ref) => {
               if (ref) {
                 DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
                   this.onReplacementChange(e.detail);

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

@@ -30,6 +30,9 @@ export class RTEFullscreenToolbarButtonRenderer extends VegaRTEToolbarButtonRend
     const selected = this.isSelected();
     return this.renderButton(createElement, editorContext, {
       icon: selected ? 'rte-fullscreen-exit' : 'rte-fullscreen-enter',
+      ariaLabel: selected
+        ? editorContext.translation.t('Exit fullscreen mode')
+        : editorContext.translation.t('Enter fullscreen mode'),
       tooltip: {
         text: selected
           ? VegaInternalTranslation.t('Exit fullscreen mode')

package/dist/collection/components/vega-rich-text-editor/extensions/functions/dto/logic-control-node.js

@@ -67,5 +67,11 @@ export class RTELogicControlNode extends RTENode {
   isContentEditable() {
     return false;
   }
+  /**
+   * @inheritDoc
+   */
+  getPlainText() {
+    return this.text;
+  }
 }
 RTELogicControlNode.dtoName = 'RTELogicControlNode';

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

@@ -13,6 +13,7 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
     return this.renderDropdown(h, editorContext, {}, [
       this.renderButton(h, editorContext, {
         label: 'Functions',
+        ariaLabel: 'Functions',
         showArrowIcon: true,
         tooltip: { text: 'Insert function' },
       }),

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

@@ -19,6 +19,7 @@ export class RTEHorizontalLineToolbarButtonRenderer extends VegaRTEToolbarButton
   render(createElement, editorContext) {
     return this.renderButton(createElement, editorContext, {
       icon: 'horizontal-line',
+      ariaLabel: VegaInternalTranslation.t('Horizontal line'),
       tooltip: { text: VegaInternalTranslation.t('Horizontal line') },
     });
   }

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

@@ -59,6 +59,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     return this.renderDropdown(createElement, editorContext, { source: translatedSource }, [
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
+        ariaLabel: 'Language',
         showArrowIcon: true,
         tooltip: { text: 'Select language' },
       }),
@@ -74,10 +75,11 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     this.translation = editorContext.translation;
     const isDisabled = this.isDisabled(editorContext);
     return h('vega-font', {
-      variant: 'font-field-label-sm',
-      color: isDisabled ? 'text-disabled' : 'text-primary',
+      'variant': 'font-field-label-sm',
+      'color': isDisabled ? 'text-disabled' : 'text-primary',
+      'aria-hidden': 'true',
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (el) => {
+      'ref': (el) => {
         this.labelRef = el;
       },
     }, editorContext.translation.t(label));

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

@@ -34,12 +34,28 @@ export class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRend
     }, [
       this.renderButton(createElement, editorContext, {
         icon: 'line-height',
+        ariaLabel: editorContext.translation.t('Line Height'),
         showArrowIcon: true,
         tooltip: { text: VegaInternalTranslation.t('Line Height') },
       }),
       this.renderDropdownListTemplate(createElement, dropdownItems, editorContext),
     ]);
   }
+  /**
+   * Renders each line-height option with its label as light-DOM children rather than the
+   * `label` prop. This gives the focusable menuitem a light-DOM text anchor so Safari
+   * VoiceOver's reading cursor follows focus into the item (Ctrl+Opt+Right walks item→item
+   * instead of escaping to the next toolbar button).
+   *
+   * The label is wrapped in a `<span>` (not a bare text node) so a click targeting the label
+   * lands on a slotted element that composes into the item's shadow `<li>`; a bare text node
+   * resolves to the `vega-dropdown-item` host, whose click never reaches the shadow handler.
+   *
+   * @inheritDoc
+   */
+  renderDropdownItem(h, item, editorContext) {
+    return h('vega-dropdown-item', { key: item.key, itemKey: item.key, prefixIcon: item.icon }, h('span', undefined, editorContext.translation.t(item.label)));
+  }
   /**
    * @inheritDoc
    */

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

@@ -33,6 +33,7 @@ export class RTESpecialCharactersToolbarButtonRenderer extends VegaRTEToolbarBut
       placement: 'bottom',
       showArrow: false,
       isScreenPosition: true,
+      role: 'presentation',
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (ref) => {
         if (ref) {
@@ -60,6 +61,7 @@ export class RTESpecialCharactersToolbarButtonRenderer extends VegaRTEToolbarBut
       ]),
       h('div', { slot: 'popover-content' }, this.renderButton(h, editorContext, {
         icon: 'rte-special-characters',
+        ariaLabel: editorContext.translation.t('Special Characters'),
         tooltip: { text: 'Special Characters' },
       })),
     ]);

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.