@globalpayments/vega 2.98.0 → 2.100.0

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-keyboard-controller.js

@@ -0,0 +1,148 @@
+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 { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboard-manager-slimmer';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { markOverlayHandledEscape } from '../../../../helpers/keyboard/overlay-escape-coordination';
+/**
+ * The `VegaDropdownKeyboardController` class is responsible for managing keyboard events
+ * for a dropdown component.
+ */
+export class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
+  /**
+   * The constructor function sets up keyboard event listeners for a dropdown component.
+   */
+  constructor() {
+    super((target) => {
+      const dropdownRef = this.renderer.getDropdownRef();
+      const virtualContainerRef = this.renderer.getVirtualContainerRef();
+      // VD-9605: In template mode, items are slotted into dropdownContentBoxRef (not
+      // virtualContainerRef), so include it in scope so Arrow/Escape listeners fire correctly.
+      const dropdownContentBoxRef = this.renderer.getDropdownContentBoxRef();
+      return [
+        {
+          keyCode: 'Tab',
+          activeElementInScope: [target.host],
+          callback: target.showDropdownIfHover,
+        },
+        {
+          keyCode: 'Escape',
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.appenderController.hide(),
+        },
+        {
+          // Additional `keydown` listener so Escape can close the dropdown when
+          // screen readers (e.g. VoiceOver) intercept the `keyup` event or move
+          // focus elsewhere after activating the trigger (e.g. into a rich-text
+          // editor's editable content). When the dropdown is shown, Escape
+          // should always close it regardless of where focus currently is.
+          //
+          // Registered in the capture phase so ancestor focus-trap containers
+          // (e.g. a Bootstrap modal's own keydown handler attached to the modal
+          // element) do not also react to the same Escape press and close
+          // themselves before the dropdown handles it. The callback calls
+          // `stopPropagation` to prevent the event from reaching descendant
+          // listeners, and tags the event with a marker that vega-modal's
+          // Escape handler checks so the modal does not also close on the
+          // same key press — Escape should close only the innermost overlay.
+          // We deliberately do NOT use `stopImmediatePropagation` because
+          // other document listeners on the same target (e.g. focus-restore
+          // observers in toolbar slimmers) still need to observe the key.
+          keyCode: 'Escape',
+          eventName: 'keydown',
+          capture: true,
+          preventDefault: true,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => {
+            if (target.isDropdownShow) {
+              event.stopPropagation();
+              markOverlayHandledEscape(event);
+              target.appenderController.hide();
+            }
+          },
+        },
+        {
+          keyCode: ['ArrowUp', 'ArrowDown'],
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // VD-9605: listen on keydown and preventDefault so arrow keys move the
+          // dropdown selection instead of scroll-chaining the underlying page.
+          eventName: 'keydown',
+          preventDefault: true,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => target.controlDirectionByKeyboard(event.code),
+        },
+        {
+          keyCode: 'Tab',
+          activeElementOutScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.isDropdownShow && target.appenderController.hide(),
+        },
+      ];
+    });
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     */
+    this.showDropdownIfHover = async () => {
+      if (this.trigger === 'hover') {
+        this.appenderController.show();
+      }
+    };
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     *
+     * @param {string} code - current keyboard code.
+     */
+    this.controlDirectionByKeyboard = (code) => {
+      var _a, _b;
+      const nextItem = this.renderer.getNextActiveItem(code);
+      if (!nextItem) {
+        return;
+      }
+      // VD-9605: focus without letting the browser scroll the page, then scroll the
+      // dropdown list so the newly-focused item stays inside the visible viewport.
+      // Fall back to the host element if the inner <li> is absent (e.g. template mode).
+      const focusTarget = (_b = (_a = nextItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) !== null && _b !== void 0 ? _b : nextItem;
+      focusTarget.focus({ preventScroll: true });
+      nextItem.scrollIntoView({ block: 'nearest' });
+    };
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "trigger", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-scrollable-controller.js

@@ -60,7 +60,7 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
   async scrollToSelectedIndex() {
     this.renderModeController.isSourceRenderMode()
       ? await this.scrollToVirtualIndex()
-      : this.scrollToTemplateIndex();
+      : await this.scrollToTemplateIndex();
   }
   /**
    * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
@@ -79,7 +79,10 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
   /**
    * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
    */
-  scrollToTemplateIndex() {
+  async scrollToTemplateIndex() {
+    if (!this.getSelectedKey())
+      return;
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
     const scrolledKey = this.getSelectedKey();
     if (scrolledKey) {
       const dropdownContent = this.renderer.getDropdownContentBoxRef();

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.js

@@ -87,6 +87,11 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   /* istanbul ignore next */
   getAllItems() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, appendItemsToContentBox() moves the [slot='items'] div
+      // into dropdownContentBoxRef's light DOM. Items are NOT inside dropdownRef.
+      return Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+    }
     const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
     const itemContainer = virtualScroll
       ? virtualScroll.shadowRoot
@@ -95,6 +100,18 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   /* istanbul ignore next */
   getCurrentActiveItem() {
+    var _a, _b, _c, _d;
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, items live in dropdownContentBoxRef's light DOM.
+      // getActiveElement() traversal stops at shadow boundaries; instead find the focused
+      // item by checking which item's shadow root reports an active element (focused <li>).
+      const items = Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+      // VD-9605: Use the item's own root node so focus is detected correctly even when
+      // vega-dropdown is nested inside another Shadow DOM. getRootNode() returns the
+      // nearest Document or ShadowRoot, which owns the activeElement for that tree.
+      const docActive = (_c = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.getRootNode()) === null || _b === void 0 ? void 0 : _b.activeElement) !== null && _c !== void 0 ? _c : null;
+      return ((_d = items.find((item) => { var _a; return ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) != null || item === docActive; })) !== null && _d !== void 0 ? _d : null);
+    }
     return findParent(getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
   }
   /* istanbul ignore next */

package/dist/collection/components/vega-dropdown/vega-dropdown-group/slimmers/renderers/vega-dropdown-group-renderer.js

@@ -6,15 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { htmlSanitizer, plainTextSanitizeStrategy } from '../../../../../utils/sanitize';
 export class VegaDropdownGroupRenderer extends VegaSlimmer {
   render() {
-    return (h("li", { role: "group", "aria-label": this.label, class: "vega-dropdown-group" },
-      this.renderLabel(),
+    const plainTextLabel = htmlSanitizer.sanitize(this.label, plainTextSanitizeStrategy);
+    return (h("li", { role: "group", "aria-label": plainTextLabel, class: "vega-dropdown-group" },
+      this.renderLabel(plainTextLabel),
       this.renderChildren(),
       this.renderDivide()));
   }
-  renderLabel() {
-    return (this.label && (h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, this.label)));
+  renderLabel(plainTextLabel) {
+    return (this.label && (h("div", { class: "vega-dropdown-group-label", "aria-hidden": "true" }, plainTextLabel)));
   }
   renderChildren() {
     return (h("ul", { role: "none", class: "vega-dropdown-group-items" },

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { htmlSanitizer, labelSanitizeStrategy } from '../../../../../utils/sanitize';
+import { createActivationKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { htmlSanitizer, labelSanitizeStrategy, plainTextSanitizeStrategy, } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -18,14 +18,15 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${this.label}, ${this.count}` : this.label, "aria-disabled": `${this.disabled}`, class: {
+    const plainTextLabel = this.getPlainTextLabel();
+    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.count > 0 ? `${plainTextLabel}, ${this.count}` : plainTextLabel, "aria-disabled": `${this.disabled}`, class: {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
+      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createActivationKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
         height: `${this.height}px`,
         boxSizing: 'border-box',
         overflow: 'hidden',
@@ -73,6 +74,13 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
   }
+  getPlainTextLabel() {
+    const slotText = this.host.textContent.trim();
+    if (slotText) {
+      return slotText;
+    }
+    return htmlSanitizer.sanitize(this.label, plainTextSanitizeStrategy);
+  }
   renderLabelWithTooltip() {
     var _a, _b, _c;
     if (!this.label) {

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.css

@@ -65,7 +65,8 @@
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }
 
-:host li:not(.vega-dropdown-item-disabled):focus {
+:host li:not(.vega-dropdown-item-disabled):focus,
+:host(:focus) li:not(.vega-dropdown-item-disabled) {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
   outline: 0;
 }

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -13,7 +13,7 @@ import { VegaDropdownCreateRenderer } from './slimmers/renderers/vega-dropdown-c
 import { VegaDropdownListRenderer } from './slimmers/renderers/vega-dropdown-list-renderer';
 import { VegaDropdownItemLevelRenderer } from './slimmers/renderers/vega-dropdown-item-level-renderer';
 import { VegaDropdownSearchRenderer } from './slimmers/renderers/vega-dropdown-search-renderer';
-import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-conttroller';
+import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-controller';
 import { VegaDropdownAppenderController } from './slimmers/controllers/vega-dropdown-appender-controller';
 import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdown-group-level-renderer';
 import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller';

package/dist/collection/components/vega-field-label/slimmers/renderers/vega-field-label-label-announcement-renderer.js

@@ -4,52 +4,43 @@ 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 { h } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 /*
- * Screen-reader-only announcement.
+ * Builds the visually-hidden state suffix appended to the field label for AT.
  *
- * VoiceOver cannot reliably derive the full field state from the
- * visible label alone because:
- *   - "Required" is represented visually by a decorative "*" — AT
- *     users would hear the raw asterisk character, not a meaningful word.
+ * Screen-reader users cannot derive the full field state from the visible
+ * label alone because:
+ *   - "Required" is represented visually by a decorative "*" — AT users
+ *     would otherwise hear the raw asterisk character.
  *   - "Disabled" has no visible text marker at all.
  *
- * This span provides a single, predictable AT announcement that
- * concatenates the label text with the plain-English states
- * (e.g. "Email, Required, Disabled"), ensuring VoiceOver reads
- * exactly what the user needs to know.
- *
- * The visible <label> below is hidden from AT (`aria-hidden="true"`)
- * to prevent duplicate announcements and to stop VoiceOver from
- * vocalising the decorative "*" as part of the label text.
+ * The suffix (e.g. ", Required, Disabled") is rendered as a real, visually
+ * hidden text node INSIDE the visible label span (not as an `aria-label`).
+ * A real text node reads consistently across Safari/Chrome/Firefox and,
+ * unlike an `aria-label` on a container with hidden children, does not make
+ * Chrome/Firefox announce an "empty group".
  */
 export class VegaFieldLabelLabelAnnouncementRenderer extends VegaSlimmer {
   /**
-   * Render a label announcement.
-   *
-   * @returns {Nullable<HTMLElement>}
-   */
-  render() {
-    return this.label && h("span", { class: "aria-announcement" }, this.generateAnnouncement());
-  }
-  /**
-   * Generate a screen-reader-friendly announcement string that concatenates the label text with the field's required/optional and disabled states.
+   * Build the visually-hidden state suffix (the part after the label text).
    *
-   * @returns {string} The generated announcement string.
+   * @returns {string} e.g. ", Required, Disabled", or '' when there is no state to announce.
    */
-  generateAnnouncement() {
-    let announcement = this.label;
+  getStateSuffix() {
+    if (!this.label) {
+      return '';
+    }
+    let suffix = '';
     if (this.isFieldRequired) {
-      announcement += `, ${this.translationSlimmer.t('Required')}`;
+      suffix += `, ${this.translationSlimmer.t('Required')}`;
     }
     else if (this.optional) {
-      announcement += `, ${this.translationSlimmer.t('Optional')}`;
+      suffix += `, ${this.translationSlimmer.t('Optional')}`;
     }
     if (this.disabled) {
-      announcement += `, ${this.translationSlimmer.t('Disabled')}`;
+      suffix += `, ${this.translationSlimmer.t('Disabled')}`;
     }
-    return announcement;
+    return suffix;
   }
 }
 __decorate([

package/dist/collection/components/vega-field-label/vega-field-label.css

@@ -5,6 +5,7 @@
  */
 :host {
   display: inline-block;
+  position: relative;
 }
 
 :host(.center-align) {

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -101,19 +101,21 @@ export class VegaFieldLabel {
   render() {
     var _a;
     const shouldCenterAlign = !!((_a = this.suffixButtonConfig) === null || _a === void 0 ? void 0 : _a.centerAlign);
+    const stateSuffix = this.labelAnnouncementRenderer.getStateSuffix();
     return sanitizeVegaComponent(h(Host, { class: {
         'hidden': this.label === '',
         'disabled': this.disabled,
         'center-align': shouldCenterAlign,
       }, onClick: this.handleClick },
-      this.labelAnnouncementRenderer.render(),
-      h("label", { "aria-hidden": "true", part: "container" },
-        h("span", { class: "vega-field-label", part: "label" }, this.label),
-        !this.isFieldRequired && this.optional && (h("span", { class: "optional" },
+      h("label", { part: "container" },
+        h("span", { class: "vega-field-label", part: "label", role: "text" },
+          this.label,
+          stateSuffix && h("span", { class: "aria-announcement" }, stateSuffix)),
+        !this.isFieldRequired && this.optional && (h("span", { class: "optional", "aria-hidden": "true" },
           "(",
           this.translationSlimmer.t('Optional'),
           ")")),
-        h("span", { class: {
+        h("span", { "aria-hidden": "true", class: {
             'vega-field-label-required': true,
             'hidden': !this.isFieldRequired,
           } }, "*")),

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import chevronUp from '../../../../global/icons/chevron-up';
 import chevronDown from '../../../../global/icons/chevron-down';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
@@ -16,11 +15,29 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), part: "select-container" },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: this.handleTriggerKeyDown, part: "select-container" },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
     };
+    /**
+     * VD-9605: open/close the dropdown on both Enter and Space, matching native button
+     * semantics. Space is preventDefaulted so activating the trigger does not scroll the page.
+     *
+     * @param {KeyboardEvent} e - keydown event on the select trigger.
+     * @returns {void}
+     */
+    this.handleTriggerKeyDown = (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+      }
+      if (this.disabled) {
+        return;
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.currentTarget.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+      }
+    };
     this.renderPrefixIcon = () => {
       return this.vegaInputSelectPrefixIconRenderer.render();
     };

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -8,6 +8,7 @@ import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComp
 import { findParent } from '../../../../utils/ui';
 import { VegaModalOpenState } from '../models/vega-modal-open-state';
 import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
+import { isOverlayHandledEscape, markOverlayHandledEscape, } from '../../../../helpers/keyboard/overlay-escape-coordination';
 /**
  * Modal open state controller
  */
@@ -39,11 +40,73 @@ export class VegaModalOpenStateController extends VegaSlimmer {
         this.close('close-button');
       }
     };
+    /**
+     * Capture-phase document `keydown` listener for Escape. When this modal is
+     * the topmost open vega-modal we close it and stop propagation so that
+     * ancestor focus traps (e.g. a Bootstrap modal which closes itself on
+     * Escape via its own keydown listener attached to the modal element) do
+     * not also react to the same key press and close themselves.
+     *
+     * If an inner overlay (vega-dropdown / vega-popover) already handled this
+     * Escape press, it calls `markOverlayHandledEscape(event)` from its own
+     * capture-phase listener. `isOverlayHandledEscape` detects this so this
+     * modal does not also close — meaning Escape closes only the innermost
+     * overlay.
+     *
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    this.handleEscapeCapture = (event) => {
+      if (event.code !== 'Escape') {
+        return;
+      }
+      if (!this.openState.isOpen) {
+        return;
+      }
+      if (this.openedModalStackController.peek() !== this.host) {
+        return;
+      }
+      // If an inner overlay (vega-dropdown / vega-popover) already handled
+      // this Escape press in its own capture-phase listener, skip closing the
+      // modal — Escape should close only the innermost overlay.
+      if (isOverlayHandledEscape(event)) {
+        return;
+      }
+      // Stop the event before any descendant or ancestor focus-trap container
+      // (e.g. a Bootstrap modal which closes itself on Escape, or an outer
+      // vega-modal) reacts to it. Mark the event so an outer vega-modal in the
+      // same document-capture phase does not also close on the same key press.
+      event.stopPropagation();
+      event.preventDefault();
+      markOverlayHandledEscape(event);
+      this.close('escape');
+    };
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   *
+   * Capture-phase Escape listener is registered here (rather than
+   * `componentDidLoad`) so it is re-added whenever the modal element is moved
+   * in the DOM (e.g. RTE's Insert-via-URL modal is moved to `host.parentElement`
+   * before being shown — that triggers disconnect+connect but does not re-fire
+   * `componentDidLoad`).
+   *
+   * Capture-phase Escape listener so ancestor focus-trap containers (e.g. a
+   * Bootstrap modal whose own keydown handler is attached to the modal
+   * element) do not also react to the same Escape press while a vega-modal
+   * is open inside them. Capture phase fires before any descendant bubble
+   * listener; calling `stopPropagation` then prevents those listeners from
+   * running. We only intervene when this is the topmost open vega-modal.
+   */
+  connectedCallback() {
+    // eslint-disable-next-line no-restricted-globals
+    document.addEventListener('keydown', this.handleEscapeCapture, true);
   }
   /**
    * Component lifecycle - [disconnectedCallback]
    */
   disconnectedCallback() {
+    // eslint-disable-next-line no-restricted-globals
+    document.removeEventListener('keydown', this.handleEscapeCapture, true);
     this.close('remove-node');
   }
   /**
@@ -325,6 +388,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModalOpenStateController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaModalOpenStateController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaModalOpenStateController.prototype, "disconnectedCallback", null);

package/dist/collection/components/vega-popover/slimmers/renderers/vega-popover-appender-renderer.js

@@ -25,6 +25,23 @@ export class VegaPopoverAppenderRenderer extends VegaSlimmer {
   getPopoverContentBox() {
     return this.popoverContentBox;
   }
+  /**
+   * Whether an inner overlay (e.g. an open `vega-input-select`/`vega-dropdown`
+   * or a nested popover) is currently displayed inside this popover's content
+   * box. Such overlays own the Escape key, so the popover must not close while
+   * one of them is open.
+   *
+   * @returns {boolean} True when a visible nested overlay content box exists.
+   */
+  hasOpenNestedOverlay() {
+    if (!this.popoverContentBox) {
+      return false;
+    }
+    const nested = this.popoverContentBox.querySelectorAll('vega-dropdown-content-box, vega-popover-content-box');
+    return Array.from(nested).some(
+    // eslint-disable-next-line spellcheck/spell-checker
+    (box) => box.getClientRects().length > 0);
+  }
   /**
    * The `render` function returns a JSX element for a `vega-popover-content-box` component with a ref assigned to `this.popoverContentBox`.
    *

package/dist/collection/components/vega-popover/vega-popover.js

@@ -13,6 +13,7 @@ import { VegaPopoverShow, VegaPopoverHide } from '../../helpers/event-manager/ev
 import { VegaPopoverAppenderRenderer } from './slimmers/renderers/vega-popover-appender-renderer';
 import { VegaPopoverAppenderController } from './slimmers/controllers/vega-popover-appender-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { isOverlayHandledEscape, markOverlayHandledEscape, } from '../../helpers/keyboard/overlay-escape-coordination';
 /**
  * A Popover is an overlaid window that displays rich content, and is visually tethered to the element that triggers it.
  *
@@ -505,8 +506,39 @@ __decorate([
     {
       keyCode: 'Escape',
       activeElementInScope: [host.appenderRenderer.getPopoverContentBox()],
-      callback: host.hidePopover,
+      // Capture-phase + stopPropagation so ancestor focus-trap containers
+      // (e.g. a Bootstrap modal which closes itself on Escape via its own
+      // keydown listener attached to the modal element) do not also react
+      // to the same key press and close themselves before/instead of the
+      // popover. The popover's own close logic still runs here.
+      //
+      // `stopPropagation` does NOT block other document-level capture
+      // listeners (e.g. vega-modal's Escape handler) on the same target,
+      // so we also tag the event with a marker that vega-modal checks to
+      // avoid closing when the popover already handled this Escape press.
+      // We deliberately do NOT use `stopImmediatePropagation` here because
+      // other document listeners on the same target (e.g. focus-restore
+      // observers in toolbar slimmers) still need to observe the key.
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ (event) => {
+        // An inner overlay (e.g. an open vega-input-select / vega-dropdown
+        // or a nested popover) owns this Escape press. Skip closing so it
+        // dismisses only the innermost overlay, not the whole popover. This
+        // is order-independent within the shared KeyboardManager loop: if
+        // the inner overlay's handler ran first it marked the event; if it
+        // runs after this one, its still-open content box is detectable
+        // inside our content box.
+        if (isOverlayHandledEscape(event) || host.appenderRenderer.hasOpenNestedOverlay()) {
+          return;
+        }
+        if (host.isPopoverShow) {
+          event.stopPropagation();
+          markOverlayHandledEscape(event);
+        }
+        host.hidePopover();
+      },
       eventName: 'keydown',
+      capture: true,
       preventDefault: true,
     },
     {

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

@@ -43,7 +43,10 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
-    return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
+    return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable, role: "textbox", "aria-multiline": "true", "aria-disabled": this.contentEditable ? undefined : 'true', 
+      // When disabled the element is not contenteditable, so it needs an explicit
+      // tabindex to remain a focus stop and let AT announce its disabled state.
+      tabindex: this.contentEditable ? undefined : '0' }, this.renderContent()));
   }
   renderContent() {
     var _a;