@globalpayments/vega 2.99.0 → 2.101.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/word-count-controller.js

@@ -0,0 +1,79 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { RTE_WORD_COUNT_KEY } from '../../constants/constant';
+import { deepEqual } from '../../../../utils/object';
+import { isNonNullable } from '../../../../types/type-guard';
+/**
+ * Bridges the word count extension to the editor component so the footer UI can
+ * read whether the character count should be shown and its current value.
+ */
+export class WordCountController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.cachedValue = null;
+    this.cachedConfig = null;
+    this.cachedData = null;
+  }
+  /**
+   * Whether the character count UI should be rendered.
+   *
+   * @returns {boolean} True when a word count extension requests the UI.
+   */
+  shouldShowUI() {
+    var _a;
+    return !!((_a = this.findWordCountExtension()) === null || _a === void 0 ? void 0 : _a.getConfig().showCharCount);
+  }
+  /**
+   * Compute the current character count data from the editor content.
+   *
+   * @returns {Nullable<VegaRTEWordCountData>} The count data or null when no word count extension is registered.
+   */
+  getData() {
+    const extension = this.findWordCountExtension();
+    if (!extension) {
+      return null;
+    }
+    const value = this.host.value;
+    const config = extension.getConfig();
+    // VegaRTEContent is immutable, so a matching value/config reference means the data is unchanged.
+    if (this.cachedData && value === this.cachedValue && deepEqual(config, this.cachedConfig)) {
+      return this.cachedData;
+    }
+    this.cachedData = extension.getData(value);
+    this.cachedValue = value;
+    this.cachedConfig = config;
+    return this.cachedData;
+  }
+  /**
+   * Whether the word count extension gates commits with a hard character limit.
+   *
+   * @returns {boolean} True when a hard limit with a max character count is configured for this host.
+   */
+  hasWordCountHardLimit() {
+    var _a;
+    const config = (_a = this.findWordCountExtension()) === null || _a === void 0 ? void 0 : _a.getConfig();
+    return !!config && Boolean(config.hardLimit) && isNonNullable(config.maxChars);
+  }
+  /**
+   * Locate the word count extension by its runtime `type` discriminator.
+   * Use this way instead of instanceof to avoid direct dependency on the extension class.
+   *
+   * @returns {Nullable<VegaRTEWordCountExtension>} The word count extension or null.
+   */
+  findWordCountExtension() {
+    var _a;
+    const extension = ((_a = this.extensions) !== null && _a !== void 0 ? _a : []).find((ext) => 'type' in ext && ext['type'] === RTE_WORD_COUNT_KEY);
+    return extension !== null && extension !== void 0 ? extension : null;
+  }
+}
+__decorate([
+  MapToComponentField()
+], WordCountController.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], WordCountController.prototype, "host", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/toolbar-renderer.js

@@ -54,14 +54,17 @@ export class ToolbarRenderer extends VegaSlimmer {
     const [renderedItems, totalVisibleCount] = this.renderToolbarItems();
     return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
       this.allowSourceEdit && (h(Fragment, null,
-        h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        h("div", { class: "toolbar-btn-group", role: "presentation" }, this.sourceEditToolbarButtonSlimmer.render()),
         this.uniqueToolbarItems.length > 0 &&
           totalVisibleCount > 0 &&
           this.renderVegaDivider())),
       renderedItems));
   }
   renderVegaDivider() {
-    return (h("vega-box", { height: "size-32" },
+    // Mark the divider as decorative so screen readers (e.g. VoiceOver
+    // on Firefox) skip it when navigating from the Edit Source button
+    // to the next toolbar item.
+    return (h("vega-box", { height: "size-32", "aria-hidden": "true", role: "presentation" },
       h("vega-divider", { direction: "vertical" })));
   }
   /**
@@ -100,7 +103,7 @@ export class ToolbarRenderer extends VegaSlimmer {
         return null;
       })
         .filter(isNonNullable);
-      return (h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 } }, groupElement));
+      return (h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 }, role: "presentation" }, groupElement));
     });
     return [renderedItems, totalVisibleCount];
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -22,6 +22,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
       tooltip: {
         text: 'Bullets',
       },
+      ariaLabel: 'Bullets and Numbers',
     });
     this.bulletsToolbarButtonSlimmer = new BulletsToolbarButtonSlimmer();
     this.numbersToolbarButtonSlimmer = new NumbersToolbarButtonSlimmer();
@@ -42,7 +43,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonS
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, role: "presentation", ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/horizontal-alignment/horizontal-alignment-toolbar-button-slimmer.js

@@ -19,6 +19,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
       tooltip: {
         text: 'Left Align',
       },
+      ariaLabel: 'Horizontal Alignment',
     });
     this.leftAlignToolbarButtonSlimmer = new LeftAlignToolbarButtonSlimmer();
     this.centerAlignToolbarButtonSlimmer = new CenterAlignToolbarButtonSlimmer();
@@ -43,7 +44,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", isScreenPosition: true, role: "presentation", ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -21,6 +21,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       icon: 'image',
       tooltip: { text: 'Image' },
       autoFocusOnClick: false,
+      ariaLabel: 'Insert Image',
     });
     this.insertURLImage = async () => {
       const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
@@ -78,8 +79,8 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     if (!shouldRenderUpload && !shouldRenderUrlInsertion) {
       return null;
     }
-    return (h("vega-box", null,
-      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", isScreenPosition: true, ref: (ref) => {
+    return (h("vega-box", { role: "presentation" },
+      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", isScreenPosition: true, role: "presentation", ref: (ref) => {
           this.dropdownRef = ref;
           this.addDropdownObserver(ref);
         } },

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/link-toolbar-button-slimmer.js

@@ -9,13 +9,17 @@ import link from '../../../assets/link';
 import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import { MapToComponentField } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { LinkAnnotationAction } from '../../../dto/actions/link-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { generateUUID } from '../../../../../utils/misc';
 import { waitForComponentDidRender } from '../../../../../helpers/common/wait-for-component-did-render';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+// One rAF is ~16 ms; 50 ms gives roughly two frames of buffer for the popover's
+// internal focus trap to settle (and for screen readers such as VoiceOver to
+// observe focus on <body>) before we restore focus to the trigger button.
+const FOCUS_RESTORE_DELAY_MS = 50;
 export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -23,7 +27,21 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       tooltip: {
         text: 'Link',
       },
+      ariaLabel: 'Insert Link',
     });
+    // Restoring focus to the link button on Escape: the popover lives in
+    // vega-rich-text-link-editor's shadow root and is portalled to <body>, so
+    // the popover's built-in focus trap can't put focus back on our trigger.
+    // We track an Escape press during the popover lifetime and restore focus
+    // on hide; submit / outside-click flows leave the flag false. Stale
+    // Escape presses (pressed while the popover was closed) are cleared by
+    // `handleWrapperClickCapture` on the next open.
+    this.escapePressedDuringPopover = false;
+    // Tracks whether the document-level keydown listener has been registered
+    // so it can be removed in disconnectedCallback. Without removal, document
+    // keeps a strong reference to this slimmer instance after the rich-text
+    // editor is destroyed, leaking memory.
+    this.documentKeydownRegistered = false;
     this.handleLinkEditorChange = ({ detail, }) => {
       switch (detail.action) {
         case 'link': {
@@ -48,9 +66,97 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
         }
       }
     };
+    this.handleWrapperClickCapture = () => {
+      // Reset the Escape flag for each new open; only an Escape during this
+      // popover's lifetime should trigger focus restoration. Activating the
+      // trigger via keyboard (Enter / Space on the inner native <button>) also
+      // dispatches a synthetic click in the capture phase, so this handler
+      // runs in both pointer and keyboard activation paths. Also clears any
+      // stale Escape press recorded while the popover was closed. The
+      // `vegaPopoverShow` listener provides the same guarantee for
+      // programmatic-open paths that don't go through a wrapper click.
+      this.escapePressedDuringPopover = false;
+    };
+    this.handlePopoverShow = () => {
+      // Belt-and-suspenders reset for programmatic opens (e.g. an external
+      // caller invoking `linkEditorRef.show()`): without this, an Escape press
+      // recorded while the popover was previously closed could survive into
+      // the new open and trigger a spurious focus restore on the next hide.
+      this.escapePressedDuringPopover = false;
+    };
+    this.handleDocumentKeydown = (event) => {
+      // We cannot guard on a local `isPopoverOpen` flag here: vega-popover's
+      // own KeyboardManager registers its capture-phase keydown listener on
+      // document before this slimmer's listener, so it runs first, calls
+      // hidePopover(), and synchronously fires `vegaPopoverHide` — which
+      // would flip our flag to closed before this handler ever observes the
+      // Escape key. Instead, always record the Escape press; stale presses
+      // (made while the popover was closed) are cleared by
+      // `handleWrapperClickCapture` on the next open.
+      // Use `event.code` for consistency with vega-modal's Escape handling
+      // (vega-modal-open-state-controller.ts).
+      if (event.code === 'Escape') {
+        this.escapePressedDuringPopover = true;
+      }
+    };
+    this.handlePopoverHide = () => {
+      // vegaPopoverHide fires synchronously from the popover's own Escape
+      // handler — before our document-capture keydown observes the key, and
+      // before the popover's internal focus trap settles focus on <body>.
+      // Defer the decision/restore past that internal restore.
+      // eslint-disable-next-line no-restricted-globals
+      setTimeout(() => {
+        var _a, _b, _c, _d;
+        const shouldRestore = this.escapePressedDuringPopover;
+        this.escapePressedDuringPopover = false;
+        if (shouldRestore) {
+          // The toolbar button uses shadow DOM without delegatesFocus,
+          // so focusing the host is a no-op — focus the inner <button>.
+          // The toolbar button may have been removed from the DOM during
+          // the timeout window (e.g. editor destroyed), so guard each step.
+          /* istanbul ignore next */
+          (_d = (_c = (_b = (_a = this.linkBtnWrapperRef) === null || _a === void 0 ? void 0 : _a.querySelector('vega-rich-text-editor-toolbar-button')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
+        }
+      }, FOCUS_RESTORE_DELAY_MS);
+    };
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   *
+   * Removes the document-level Escape listener registered in the wrapper
+   * ref callback so the slimmer instance is not retained by document after
+   * the rich-text editor is destroyed.
+   */
+  disconnectedCallback() {
+    if (this.documentKeydownRegistered) {
+      // eslint-disable-next-line no-restricted-globals
+      document.removeEventListener('keydown', this.handleDocumentKeydown, { capture: true });
+      this.documentKeydownRegistered = false;
+    }
+    this.linkBtnWrapperRef = undefined;
   }
   renderBtnWrapper(renderBtn) {
-    return (h("div", { class: "toolbar-btn-link-wrapper", ref: (ref) => (this.linkBtnWrapperRef = ref) },
+    return (h("div", { class: "toolbar-btn-link-wrapper", role: "presentation", ref: (ref) => {
+        if (ref && ref !== this.linkBtnWrapperRef) {
+          this.linkBtnWrapperRef = ref;
+          ref.addEventListener('click', this.handleWrapperClickCapture, { capture: true });
+          // `vegaPopoverShow` clears any stale Escape recorded while the
+          // popover was closed, covering programmatic-open paths
+          // (e.g. linkEditorRef.show()) where no wrapper click fires.
+          ref.addEventListener('vegaPopoverShow', this.handlePopoverShow);
+          ref.addEventListener('vegaPopoverHide', this.handlePopoverHide);
+          // Esc inside the portalled popover doesn't bubble to the wrapper,
+          // so observe it on document capture. Tracked so it can be removed
+          // in disconnectedCallback to avoid leaking this slimmer instance.
+          if (!this.documentKeydownRegistered) {
+            // eslint-disable-next-line no-restricted-globals
+            document.addEventListener('keydown', this.handleDocumentKeydown, {
+              capture: true,
+            });
+            this.documentKeydownRegistered = true;
+          }
+        }
+      } },
       renderBtn(),
       h("vega-rich-text-link-editor", { resetStatusAfterHide: false, status: "linkEdit", ref: (ref) => {
           if (ref) {
@@ -102,3 +208,6 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 __decorate([
   MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], LinkToolbarButtonSlimmer.prototype, "disconnectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/source-edit-toolbar-button-slimmer.js

@@ -25,11 +25,25 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     if (isSelected) {
       await this.saveSourceCode();
     }
-    else {
-      this.selectionController.setSelectionRange(new Range());
-    }
+    // VD-8789 (keyboard a11y): the previous implementation cleared the editor
+    // selection here via `selectionController.setSelectionRange(new Range())`
+    // when entering source view. That call is intentionally removed so the
+    // caret position is preserved when toggling back to visual mode, and so
+    // the source-edit button can be re-activated from the keyboard without
+    // the selection being reset out from under the user.
     this.sourceView = !isSelected;
   }
+  // VD-8789 (keyboard a11y): the default `preventLostFocus` calls
+  // `e.preventDefault()` on mousedown so the button never receives focus and
+  // the rich-text editor selection is preserved. The source-edit toggle is
+  // different — activating it switches the editor to source-view mode, where
+  // the visual-mode selection is no longer relevant. We override with a no-op
+  // so the button is allowed to take focus on click, matching its keyboard
+  // activation path and giving keyboard / screen-reader users a stable focus
+  // target to toggle back out of source view.
+  preventLostFocus() {
+    return {};
+  }
   isSelected() {
     return this.sourceView;
   }
@@ -58,9 +72,6 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 __decorate([
   MapToComponentField({ writable: true })
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
-__decorate([
-  MapToComponentField()
-], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer.js

@@ -46,7 +46,7 @@ export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     this.popoverShow = false;
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => {
+    return (h("vega-popover", { placement: "bottom", alignment: "center", isScreenPosition: true, role: "presentation", ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, this.handlePopoverShowChange.bind(this));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, this.handlePopoverHideChange.bind(this));

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -47,7 +47,7 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", isScreenPosition: true, selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
+    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", isScreenPosition: true, role: "presentation", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
         this.addDropdownObserver(ref);
       } },
       renderBtn({ showArrowIcon: true }),

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/toolbar-button-slimmer.abstract.js

@@ -9,12 +9,12 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 export class ToolbarButtonSlimmer extends VegaSlimmer {
-  constructor({ icon, tooltip, autoFocusOnClick = true }) {
+  constructor({ icon, tooltip, ariaLabel, autoFocusOnClick = true }) {
     super();
     this.renderBtn = ({ showArrowIcon, iconColor } = {}) => {
       var _a;
       return (h("vega-tooltip", { text: this.translationSlimmer.t(this.tooltip.text), placement: ['bottom', 'top'] },
-        h("vega-rich-text-editor-toolbar-button", Object.assign({ showArrowIcon: showArrowIcon, icon: this.icon, iconColor: iconColor, ref: (ref) => {
+        h("vega-rich-text-editor-toolbar-button", Object.assign({ showArrowIcon: showArrowIcon, icon: this.icon, iconColor: iconColor, "data-aria-label": this.ariaLabel, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
               this.handleClick();
             });
@@ -39,6 +39,7 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
     };
     this.icon = icon;
     this.tooltip = tooltip;
+    this.ariaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltip.text;
     this.autoFocusOnClick = autoFocusOnClick;
   }
   setIcon(icon) {

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

@@ -4,14 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Fragment, h, Host } from '@stencil/core';
+import { forceUpdate, Fragment, h, Host } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { VegaRTEOneRowHeightPx } from '../../constants/constant';
+import { VegaRTEOneRowHeightPx, ZERO_WIDTH_SPACE } from '../../constants/constant';
+import { isNonNullable } from '../../../../types/type-guard';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -27,11 +28,21 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       const containerStyle = this.rows !== undefined
         ? { height: this.rows >= 2 ? `${this.rows * VegaRTEOneRowHeightPx}px` : defaultHeight }
         : { minHeight: defaultHeight };
-      return (h("div", { class: {
+      return (
+      // This container delegates focus to the inner <vega-rich-text-content> editor when
+      // clicking anywhere in the editing area. It is a layout wrapper, not an interactive
+      // widget, so giving it a widget role (e.g. `textbox`) would expose a second,
+      // non-editable textbox that traps VoiceOver focus and prevents typing.
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      h("div", { class: {
           'rich-text-editor-container': true,
           'disabled': this.disabled,
           'vega-hidden': this.sourceView,
-        }, style: containerStyle, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
+        }, style: containerStyle, onClick: this.richTextContentFocus, 
+        // Keep this wrapper out of the tab order so AT lands directly on the inner text
+        // region (focusable via contenteditable when enabled, via tabindex when disabled)
+        // rather than announcing this generic wrapper as a group.
+        tabIndex: -1, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
         h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions, onScroll: this.notifyContentScrolling }),
         this.renderCharacterCounter()));
     };
@@ -45,12 +56,20 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       });
     };
     this.renderCharacterCounter = () => {
+      if (!this.wordCountController.shouldShowUI()) {
+        return null;
+      }
+      // The word count extension is registered, so the data is guaranteed to be non-null.
+      const data = this.wordCountController.getData();
+      const isSetMaxChars = isNonNullable(data.maxChars);
       return (h("div", { class: {
           'text-editor-counter': true,
-          'counter-exceed-max-length': false,
-        }, style: { display: 'none' } },
-        h("span", null, "0"),
-        h("span", null, "/100")));
+          'counter-exceed-max-length': isSetMaxChars && data.count > data.maxChars,
+        } },
+        h("span", null, data.count),
+        isSetMaxChars && h("span", null,
+          "/",
+          data.maxChars)));
     };
     this.renderErrorMessage = () => {
       return h("div", { class: "vega-error vega-hidden" });
@@ -99,6 +118,35 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
+  /**
+   * Re-injects the zero-width space placeholder into empty text spans.
+   * When a commit is rejected and the model rolls back unchanged, the framework
+   * short-circuits the text diff and leaves the span empty, collapsing the line
+   * height, so the placeholder is restored here.
+   */
+  restoreEmptyTextPlaceholders() {
+    const editableElement = this.getRTEEditableElementRef();
+    if (!editableElement) {
+      return;
+    }
+    // The text node will only be rendered as a span and a code.
+    editableElement.querySelectorAll('span:empty, code:empty').forEach((element) => {
+      const textNode = element.firstChild;
+      if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        // Reuse the existing text node, `textContent` would swap in a new one and leave the framework patching a detached node.
+        textNode.nodeValue = ZERO_WIDTH_SPACE;
+      }
+      else {
+        element.textContent = ZERO_WIDTH_SPACE;
+      }
+    });
+  }
+  /**
+   * Forces a re-render of the rich text content component, which is useful when the content has changed but the framework has not detected it.
+   */
+  forceContentRepaint() {
+    forceUpdate(this.richTextContentRef);
+  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -164,6 +212,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "wordCountController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);

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

@@ -28,7 +28,7 @@ export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
         'rich-text-editor-toolbar-button-hidden': this.hidden,
         'rich-text-editor-toolbar-button-selected': this.selected,
       }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
-      h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
+      h("vega-flex", { "aria-hidden": "true", gap: "size-8", justifyContent: "center", alignItems: "center" },
         this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
         this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey(this.arrowIcon || 'chevron-down') }))),
       h("slot", null)));

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

@@ -12,6 +12,7 @@ import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers
 import { VegaClick } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaRichTextEditorToolbarButtonRenderer } from './slimmers/renderers/vega-rich-text-editor-toolbar-button-renderer';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+import { AriaAttributesValueMapper } from '../../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
 + * @vegaVersion 2.34.0
 + */
@@ -33,6 +34,12 @@ export class VegaRichTextEditorToolbarButton {
       },
     });
     this.renderer = new VegaRichTextEditorToolbarButtonRenderer();
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.host.shadowRoot.querySelector('button'), {
+      'aria-label': {
+        dependency: ['data-aria-label'],
+        defaultValue: 'No label defined',
+      },
+    });
     /**
      * Specifies whether the rich text editor toolbar button element is disabled.
      *
@@ -77,7 +84,9 @@ export class VegaRichTextEditorToolbarButton {
     this.iconColor = 'text-primary';
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    // The host is a decorative wrapper around the shadow <button>; keep it out of the
+    // a11y tree so VoiceOver doesn't announce it as a "group" when entering the button.
+    return sanitizeVegaComponent(h(Host, { role: "presentation" }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-rich-text-editor-toolbar-button"; }
   static get encapsulation() { return "shadow"; }
@@ -298,3 +307,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditorToolbarButton.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "ariaAttributesValueMapper", void 0);

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

@@ -49,8 +49,10 @@ import { RedoToolbarButtonSlimmer } from './slimmers/renderers/tools/redo-toolba
 import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
 import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 import { RTEExtensionController } from './slimmers/controllers/extension-controller';
+import { WordCountController } from './slimmers/controllers/word-count-controller';
 import { VegaRTEDefaultTextStyleItems, VegaRTEPresetToolbarItems } from './constants/constant';
 import { VegaRichTextEditorSourceViewRenderer } from './slimmers/renderers/vega-rich-text-editor-source-view-renderer';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * The rich text editor enables users to format text for a variety of publishers.
  *
@@ -59,6 +61,13 @@ import { VegaRichTextEditorSourceViewRenderer } from './slimmers/renderers/vega-
 export class VegaRichTextEditor {
   constructor() {
     this.globalSlimmers = {};
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.vegaRichTextEditorRenderer.getRTEEditableElementRef(), {
+      'aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        // When no label is provided, announce a meaningful role name
+        defaultValue: () => this.translationSlimmer.t('Rich Text Editor. Editing area: main. '),
+      },
+    });
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.formFieldController = new FormFieldControllerSlimmer({
@@ -111,6 +120,7 @@ export class VegaRichTextEditor {
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.rteExtensionController = new RTEExtensionController();
+    this.wordCountController = new WordCountController();
     this.sourceCodeChangeEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaSourceCodeChange);
     this.richTextEditorSourceViewRenderer = new VegaRichTextEditorSourceViewRenderer();
     this.richTextContentEditable = true;
@@ -868,6 +878,9 @@ export class VegaRichTextEditor {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaRichTextEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "translationSlimmer", void 0);
@@ -988,6 +1001,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "rteExtensionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "wordCountController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "sourceCodeChangeEventEmitter", void 0);