@globalpayments/vega 2.98.0 → 2.100.0

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.

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

@@ -22,6 +22,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-merge-cells',
       title: 'Merge cells',
       showArrowIcon: true,
+      ariaLabel: 'Merge Cells',
     });
     this.handleDropdownItemClick = (input) => {
       if (Object.values(SplitCellOperationType).includes(input.detail)) {
@@ -35,7 +36,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 150, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
@@ -68,13 +69,13 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const disabledMap = this.getMergeDirectionDisabledMap();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS }, "Merge cells"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, disabled: !this.selectSingleCell() }, "Split cell vertically"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, disabled: !this.selectSingleCell() }, "Split cell horizontally")));
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS, label: "Merge cells" }, "Merge cells"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, label: "Merge cell up", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, label: "Merge cell right", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, label: "Merge cell down", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, label: "Merge cell left", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, label: "Split cell vertically", disabled: !this.selectSingleCell() }, "Split cell vertically"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, label: "Split cell horizontally", disabled: !this.selectSingleCell() }, "Split cell horizontally")));
   }
   selectSingleCell() {
     return this.selectedCells.length === 1;

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

@@ -1,13 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { h } from '@stencil/core';
 import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
 import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
 import { RowOperationType } from '../../../setting-event-handlers/row-operation';
 import { RTETableHeadBlock } from '../../../dto/table-head-block';
 import { RTETableBlock } from '../../../dto/table-block';
 import { getParentBlockByType } from '../../../utils/utils';
 import { RTETableBodyBlock } from '../../../dto/table-body-block';
+import { MapToComponentField } from 'vega-slimmer/core';
 /**
  * Slimmer dedicated to building the row button.
  */
@@ -17,14 +24,20 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-row',
       title: 'Row',
       showArrowIcon: true,
+      ariaLabel: 'Row Operations',
     });
     this.handleDropdownItemClick = (input) => {
       this.emitClickEvent([TableSettingType.ROW, input.detail]);
     };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isRowDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 180, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
       } },
       renderBtn(),
       this.renderActionList()));
@@ -46,14 +59,13 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const shouldChecked = this.areSelectedRowsHeaderRows();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW },
-        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8" },
-          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked }),
-          h("span", null, "Header row"))),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
-      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW }, "Delete row"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW }, "Select row")));
+      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW, label: "Header Row" },
+        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8", "aria-hidden": "true" },
+          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked, label: "Header Row" }))),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE, label: "Insert row above" }, "Insert row above"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW, label: "Insert row below" }, "Insert row below"),
+      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW, label: "Delete row" }, "Delete row"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW, label: "Select row" }, "Select row")));
   }
   /**
    * Check if all selected rows are header rows.
@@ -101,3 +113,6 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     return Array.from(selectedRows);
   }
 }
+__decorate([
+  MapToComponentField({ writable: true })
+], RowButtonSlimmer.prototype, "isRowDropdownOpen", void 0);

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

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

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

@@ -8,13 +8,13 @@ import { h } from '@stencil/core';
 import { VegaInternalIconManager } from '../../../../../../../helpers/icon/internal-icon-manager';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class TableSettingButtonSlimmer extends VegaSlimmer {
-  constructor({ icon, title, showArrowIcon }) {
+  constructor({ icon, title, showArrowIcon, ariaLabel }) {
     super();
     this.renderBtn = () => {
       const selected = this.isSelected();
       const disable = this.isDisabled();
-      return (h("vega-tooltip", { key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
-        h("button", { type: "button", class: {
+      return (h("vega-tooltip", { role: "presentation", key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
+        h("button", { type: "button", "aria-label": this.ariaLabel, class: {
             'rte-table-setting-item': true,
             'rte-table-setting-item-disabled': disable,
             'rte-table-setting-item-selected': selected,
@@ -26,13 +26,14 @@ export class TableSettingButtonSlimmer extends VegaSlimmer {
             }
             this.handleClick(event);
           }, onKeyDown: this.preventDefaultEvent, onMouseDown: this.preventDefaultEvent },
-          h("vega-flex", { alignItems: "center", justifyContent: "center" },
+          h("vega-flex", { alignItems: "center", justifyContent: "center", "aria-hidden": "true" },
             h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.icon), size: "size-16", color: this.getIconColor() }),
             this.showArrowIcon ? (h("vega-icon", { size: "size-8", style: { marginLeft: '8px' }, icon: VegaInternalIconManager.getIconKey('chevron-down'), color: this.getIconColor() })) : null))));
     };
     this.icon = icon;
     this.title = title;
     this.showArrowIcon = showArrowIcon;
+    this.ariaLabel = ariaLabel;
   }
   render() {
     return typeof this.renderBtnWrapper === 'function'

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

@@ -16,7 +16,7 @@ const buttonList = [
 ];
 export class VegaRichTextTableSettingRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { gap: "size-8", class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
+    return (h("div", { class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
   }
   renderButton(item) {
     switch (item) {

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

@@ -3,8 +3,14 @@
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
+:host .rte-table-setting-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 :host .rte-table-setting-item {
   border: none;
+  border-radius: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
@@ -12,6 +18,10 @@
   cursor: pointer;
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
 }
+:host .rte-table-setting-item:focus {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -1px;
+}
 :host .rte-table-setting-item:not(.rte-table-setting-item-disabled, .rte-table-setting-item-selected):hover {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }