@globalpayments/vega 2.99.0 → 2.100.0

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

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

@@ -53,6 +53,10 @@ export class VegaRichTextTablePropertiesFormFieldRenderer extends VegaRichTextTa
   renderTextAlignmentField() {
     return (h("div", { class: "text-alignment-container" },
       h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Alignment"),
-      h("vega-flex", { direction: "row", gap: "size-16" }, this.renderAlignmentField(['left', 'center', 'right'], 'objects-align-', 'textAlign'))));
+      h("vega-flex", { direction: "row", gap: "size-16" }, this.renderAlignmentField(['left', 'center', 'right'], 'objects-align-', 'textAlign', {
+        left: this.translationSlimmer.t('Align table left'),
+        center: this.translationSlimmer.t('Align table center'),
+        right: this.translationSlimmer.t('Align table right'),
+      }))));
   }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/vega-rich-text-table-properties.css

@@ -70,6 +70,11 @@
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
   z-index: 1;
 }
+:host .text-alignment-button-group button:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -2px;
+  z-index: 2;
+}
 :host .text-alignment-button-group vega-input[value=left] ~ .text-alignment-left,
 :host .text-alignment-button-group vega-input[value=center] ~ .text-alignment-center,
 :host .text-alignment-button-group vega-input[value=right] ~ .text-alignment-right,

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

@@ -17,6 +17,7 @@ import { VegaRichTextTablePropertiesFormFieldRenderer } from './slimmers/rendere
 import { VegaRichTextCellPropertiesFormFieldRenderer } from './slimmers/renderers/vega-rich-text-cell-properties-form-field-renderer';
 import { VegaInternalThemeManager } from '../../../../../helpers/theme/internal-theme-manager';
 import { DarkModeStateControllerSlimmer } from '../../../../../helpers/slimmers/dark-mode-state-controller-slimmer';
+import { AriaAttributesValueMapper } from '../../../../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 2.79.0
  */
@@ -30,6 +31,17 @@ export class VegaRichTextTableProperties {
     this.cellFormRenderer = new VegaRichTextCellPropertiesFormFieldRenderer();
     this.controller = new TableColorController();
     this.darkModeStateSlimmer = new DarkModeStateControllerSlimmer();
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.host, {
+      'aria-label': {
+        dependency: ['data-aria-label'],
+        // Derive the fallback accessible name from `type` so the component
+        // announces the correct form even when consumers don't set
+        // `data-aria-label` explicitly.
+        defaultValue: () => this.type === 'CELL'
+          ? this.translationSlimmer.t('Cell properties')
+          : this.translationSlimmer.t('Table properties'),
+      },
+    });
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.renderer.getFormRef());
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     /**
@@ -45,7 +57,7 @@ export class VegaRichTextTableProperties {
     methodPlaceholder(newValue);
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, { role: "form" }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-rich-text-table-properties"; }
   static get encapsulation() { return "shadow"; }
@@ -246,6 +258,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "darkModeStateSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableProperties.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "changeEventPreventSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/caption-button-slimmer.js

@@ -9,6 +9,7 @@ export class CaptionButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-caption',
       title: 'caption off',
       showArrowIcon: false,
+      ariaLabel: 'Insert/Edit Caption',
     });
   }
   isSelected() {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/cell-properties-button-slimmer.js

@@ -9,6 +9,7 @@ export class CellPropertiesButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-cell-properties',
       title: 'cell properties',
       showArrowIcon: false,
+      ariaLabel: 'Cell Properties',
     });
   }
   renderBtnWrapper(renderBtn) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/column-button-slimmer.js

@@ -23,6 +23,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-column',
       title: 'Column',
       showArrowIcon: true,
+      ariaLabel: 'Column Operations',
     });
     this.handleDropdownItemClick = (input) => {
       this.emitClickEvent([TableSettingType.COLUMN, input.detail]);
@@ -32,7 +33,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 210, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 210, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
@@ -55,15 +56,15 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
    * @returns {HTMLElement} The action list element.
    */
   renderActionList() {
+    const isHeaderColumnSelected = ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells);
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.HEADER_COLUMN },
-        h("vega-flex", { alignItems: "center", gap: "size-8" },
-          h("vega-toggle-switch", { checked: ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells), size: "small" }),
-          "Header Column")),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_LEFT }, "Insert column left"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_RIGHT }, "Insert column right"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.DELETE_COLUMN, disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.SELECT_COLUMN }, "Select column")));
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.HEADER_COLUMN, label: "Header Column" },
+        h("vega-flex", { alignItems: "center", gap: "size-8", "aria-hidden": "true" },
+          h("vega-toggle-switch", { checked: isHeaderColumnSelected, size: "small", label: "Header Column" }))),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_LEFT, label: "Insert column left" }, "Insert column left"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_RIGHT, label: "Insert column right" }, "Insert column right"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.DELETE_COLUMN, label: "Delete column", disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.SELECT_COLUMN, label: "Select column" }, "Select column")));
   }
   /**
    * Determine if all columns are selected based on the selected cell range.