@zeyos/zx 4.3.0 → 4.4.0

package/src/components/context-menu/context-menu.js

@@ -1,11 +1,15 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
-import { icon } from '../../core/icons.js';
 import { rovingTabindex, typeahead } from '../../core/keyboard.js';
+import {
+  isMenuItem,
+  MENU_ITEM_SELECTOR,
+  renderMenuEntries
+} from '../../internal/menu-items.js';
 import { Dropdown } from '../dropdown/dropdown.js';
 
-/** @typedef {import('../menu-button/menu-button.js').MenuItem} MenuItem */
-/** @typedef {MenuItem|'-'} ContextMenuEntry */
+/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
+/** @typedef {import('../../internal/menu-items.js').MenuEntry} ContextMenuEntry */
 
 /**
  * @typedef {Object} ContextMenuOptions
@@ -22,8 +26,6 @@ import { Dropdown } from '../dropdown/dropdown.js';
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close listener.
  */
 
-const MENU_ITEM_SELECTOR = '[role="menuitem"]';
-
 /**
  * Right-click menu for a region, implementing the APG menu pattern.
  *
@@ -107,7 +109,7 @@ export class ContextMenu extends Component {
     this.listen(this.#target, 'keydown', (event) => this.#onTargetKeydown(event));
     this.listen(this.#panel, 'click', (event) => {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
-      if (item && this.#panel.contains(item)) this.#select(item);
+      if (item && this.#panel.contains(item)) this.#select(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
   }
@@ -127,25 +129,7 @@ export class ContextMenu extends Component {
    */
   setItems(items) {
     this.#items = Array.isArray(items) ? items.slice() : [];
-    this.#panel.replaceChildren();
-    this.#items.forEach((item, index) => {
-      if (item === '-') {
-        this.#panel.append(h('div', { class: 'zx-context-menu__separator', role: 'separator' }));
-        return;
-      }
-      const children = [];
-      if (item.icon) children.push(h('span', { class: 'zx-context-menu__icon' }, icon(item.icon)));
-      children.push(h('span', { class: 'zx-context-menu__label' }, String(item.label ?? '')));
-      this.#panel.append(h('button', {
-        class: 'zx-context-menu__item',
-        type: 'button',
-        role: 'menuitem',
-        tabindex: '-1',
-        'data-menu-item': String(index),
-        'data-danger': item.danger ? 'true' : null,
-        ariaDisabled: item.disabled ? 'true' : null
-      }, children));
-    });
+    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'context-menu'));
     return this;
   }
 
@@ -292,20 +276,28 @@ export class ContextMenu extends Component {
     if (key.key === 'Enter' || key.key === ' ') {
       const item = /** @type {Element} */ (key.target).closest?.(MENU_ITEM_SELECTOR);
       if (!item || !this.#panel.contains(item)) return;
+      if (key.key === 'Enter' && item.tagName === 'A') return;
       event.preventDefault();
-      this.#select(item);
+      /** @type {HTMLElement} */ (item).click();
       return;
     }
     this.#typeahead(key);
   }
 
-  /** @param {Element} element @returns {void} */
-  #select(element) {
+  /** @param {Element} element @param {Event|null} [event=null] @returns {void} */
+  #select(element, event = null) {
     const index = Number(element.getAttribute('data-menu-item'));
     const item = this.#items[index];
-    if (!item || item === '-' || item.disabled) return;
+    if (!isMenuItem(item) || item.disabled) {
+      event?.preventDefault();
+      return;
+    }
     const context = this.#context;
-    this.emit('select', { value: item.value, item, context });
+    const selected = this.emit('select', { value: item.value, item, context });
+    if (selected.defaultPrevented) {
+      event?.preventDefault();
+      return;
+    }
     try {
       item.onselect?.(item.value, item, this);
     } finally {

package/src/components/date-picker/date-picker.js

@@ -2,6 +2,7 @@ import { Component } from '../../core/component.js';
 import { addDays, addMonths, formatDate, getWeekStart, isSameDay, parseDate } from '../../core/date.js';
 import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { printf } from '../../core/i18n.js';
 import { TimePicker } from './time-picker.js';
 
 /**
@@ -55,7 +56,7 @@ export class DatePicker extends Component {
           ref: 'previous',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous month'
+          ariaLabel: this._message('datePicker.previousMonth', 'Previous month')
         }, icon('chevron-left')),
         h('button', {
           ref: 'heading',
@@ -68,7 +69,7 @@ export class DatePicker extends Component {
           ref: 'next',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next month'
+          ariaLabel: this._message('datePicker.nextMonth', 'Next month')
         }, icon('chevron-right'))
       ),
       h('div', {
@@ -81,14 +82,14 @@ export class DatePicker extends Component {
           ref: 'quickPrevious',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('datePicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'quickYear', class: 'zx-date-picker__quick-year', ariaLive: 'polite' }),
         h('button', {
           ref: 'quickNext',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('datePicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', { ref: 'quickGrid', class: 'zx-date-picker__quick-grid', role: 'grid' })),
@@ -96,7 +97,7 @@ export class DatePicker extends Component {
         ref: 'grid',
         class: 'zx-date-picker__grid',
         role: 'grid',
-        ariaLabel: 'Calendar'
+        ariaLabel: this._message('datePicker.calendar', 'Calendar')
       },
       h('thead', { ref: 'weekdays' }),
       h('tbody', { ref: 'days' }))
@@ -203,7 +204,7 @@ export class DatePicker extends Component {
       row.append(h('th', {
         class: 'zx-date-picker__week-heading',
         scope: 'col',
-        ariaLabel: 'Week number'
+        ariaLabel: this._message('datePicker.weekNumber', 'Week number')
       }, '#'));
     }
     const sunday = new Date(2023, 0, 1);
@@ -224,7 +225,8 @@ export class DatePicker extends Component {
     const offset = (first.getDay() - this._weekStart + 7) % 7;
     const start = addDays(first, -offset);
     this.refs.heading.textContent = formatDate(first, '%B %Y');
-    this.refs.heading.setAttribute('aria-label', `Choose month and year, ${formatDate(first, '%B %Y')}`);
+    this.refs.heading.setAttribute('aria-label',
+      this._message('datePicker.chooseMonthYear', 'Choose month and year, %1', formatDate(first, '%B %Y')));
     const rows = [];
 
     for (let week = 0; week < 6; week += 1) {
@@ -234,7 +236,7 @@ export class DatePicker extends Component {
         row.append(h('th', {
           class: 'zx-date-picker__week',
           scope: 'row',
-          ariaLabel: `Week ${isoWeekNumber(rowStart)}`
+          ariaLabel: this._message('datePicker.week', 'Week %1', isoWeekNumber(rowStart))
         }, String(isoWeekNumber(rowStart))));
       }
       for (let column = 0; column < 7; column += 1) {
@@ -450,6 +452,18 @@ export class DatePicker extends Component {
   _buttonForDate(date) {
     return this.refs.days.querySelector(`[data-date="${formatDate(date, '%Y-%m-%d')}"]`);
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback Built-in text, with `%1`-style placeholders.
+   * @param {...unknown} args Interpolation values.
+   * @returns {string}
+   */
+  _message(key, fallback, ...args) {
+    const message = this.msg(key, ...args);
+    return message === key ? printf(fallback, args) : message;
+  }
 }
 
 /**

package/src/components/date-picker/month-picker.js

@@ -47,21 +47,21 @@ export class MonthPicker extends DatePicker {
           ref: 'previousYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('monthPicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'year', class: 'zx-month-picker__year', ariaLive: 'polite' }),
         h('button', {
           ref: 'nextYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('monthPicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', {
         ref: 'grid',
         class: 'zx-month-picker__grid',
         role: 'grid',
-        ariaLabel: 'Choose month'
+        ariaLabel: this._message('monthPicker.chooseMonth', 'Choose month')
       })
     );
     this._content = content;

package/src/components/date-picker/time-picker.js

@@ -48,15 +48,15 @@ export class TimePicker extends Component {
     const content = h('div', {
       class: 'zx-time-picker__segments',
       role: 'group',
-      ariaLabel: 'Time'
+      ariaLabel: this._message('timePicker.label', 'Time')
     });
     this._content = content;
-    this._addSpin(content, 'h', 'Hour', 23);
+    this._addSpin(content, 'h', this._message('timePicker.hour', 'Hour'), 23);
     content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-    this._addSpin(content, 'm', 'Minute', 59);
+    this._addSpin(content, 'm', this._message('timePicker.minute', 'Minute'), 59);
     if (this.options.seconds) {
       content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-      this._addSpin(content, 's', 'Second', 59);
+      this._addSpin(content, 's', this._message('timePicker.second', 'Second'), 59);
     }
     root.append(content);
 
@@ -66,7 +66,7 @@ export class TimePicker extends Component {
         ref: 'clockToggle',
         class: 'zx-icon-btn zx-time-picker__clock-toggle',
         type: 'button',
-        ariaLabel: 'Pick the time on a clock',
+        ariaLabel: this._message('timePicker.clock', 'Pick the time on a clock'),
         ariaExpanded: 'false',
         ariaControls: clockId
       }, icon('clock', { size: 15 })));
@@ -223,7 +223,7 @@ export class TimePicker extends Component {
           ref: 'headHour',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the hour',
+          ariaLabel: this._message('timePicker.selectHour', 'Select the hour'),
           dataset: { unit: 'h' }
         }),
         h('span', { class: 'zx-time-picker__clock-colon', ariaHidden: 'true' }, ':'),
@@ -231,7 +231,7 @@ export class TimePicker extends Component {
           ref: 'headMinute',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the minutes',
+          ariaLabel: this._message('timePicker.selectMinutes', 'Select the minutes'),
           dataset: { unit: 'm' }
         })),
       h('div', { ref: 'dial', class: 'zx-time-picker__dial', role: 'radiogroup' },
@@ -290,7 +290,8 @@ export class TimePicker extends Component {
     this.refs.headMinute.textContent = pad(this._display.m);
     this.refs.headHour.setAttribute('aria-pressed', String(hours));
     this.refs.headMinute.setAttribute('aria-pressed', String(!hours));
-    this.refs.dial.setAttribute('aria-label', hours ? 'Hour' : 'Minutes');
+    this.refs.dial.setAttribute('aria-label', hours
+      ? this._message('timePicker.hour', 'Hour') : this._message('timePicker.minutes', 'Minutes'));
     if (!this._clockOpen) return;
 
     const selected = hours ? this._display.h : this._display.m;
@@ -330,6 +331,17 @@ export class TimePicker extends Component {
     element.setAttribute('aria-checked', String(checked));
     element.tabIndex = checked ? 0 : -1;
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
 }
 
 /**

package/src/components/dialog/dialog.js

@@ -1,11 +1,7 @@
 import { h } from '../../core/dom.js';
 import { uid } from '../../core/util.js';
 import { Modal } from '../modal/modal.js';
-
-const FOCUSABLE_SELECTOR = [
-  'a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])',
-  'textarea:not([disabled])', '[contenteditable="true"]', '[tabindex]:not([tabindex="-1"])'
-].join(',');
+import { button } from '../button/button.js';
 
 /** @typedef {'default'|'primary'|'danger'|'ghost'} DialogButtonKind */
 /**
@@ -14,6 +10,8 @@ const FOCUSABLE_SELECTOR = [
  * @property {DialogButtonKind} [kind='default'] Visual button kind.
  * @property {'close'|'cancel'|((dialog: Dialog) => void)} [action='close'] Button action.
  * @property {boolean} [autofocus=false] Whether this button receives initial focus.
+ * @property {boolean} [disabled=false] Whether the footer button is disabled.
+ * @property {import('../button/button.js').ButtonShortcut} [shortcut] Visible shortcut hint; the host binds the action.
  */
 /**
  * @typedef {Object} DialogOptions
@@ -86,8 +84,6 @@ export class Dialog extends Modal {
   /** @type {DialogButton[]} */
   #baseButtons = [];
   #baseTitle = '';
-  /** @type {Element|null} */
-  #opener = null;
 
   /**
    * Creates a structured dialog in the configured theme scope, or at document level when unscoped.
@@ -99,7 +95,7 @@ export class Dialog extends Modal {
     this._applySize(this.options.size);
     this.#baseTitle = String(this.options.title ?? '');
     this.#applyTitle(this.#baseTitle);
-    this.#baseButtons = copyButtons(this.options.buttons);
+    this.#baseButtons = normalizeDialogButtons(this.options.buttons);
     this.#renderButtons(this.#baseButtons);
     this.refs.close.hidden = !this.options.closable;
 
@@ -111,7 +107,6 @@ export class Dialog extends Modal {
       if (!definition) return;
       this.#runButton(definition);
     });
-    this.on('close', () => this.#restoreFocus());
   }
 
   /** @type {DialogButton[]} */
@@ -123,6 +118,7 @@ export class Dialog extends Modal {
    */
   render() {
     const titleId = uid('zx-dialog-title');
+    const close = this._message('dialog.close', 'Close');
     const dialog = /** @type {HTMLDialogElement} */ (h('dialog', {
       class: 'zx-modal zx-dialog',
       ariaLabelledby: titleId
@@ -134,8 +130,8 @@ export class Dialog extends Modal {
           ref: 'close',
           type: 'button',
           'data-kind': 'ghost',
-          ariaLabel: 'Close',
-          title: 'Close'
+          ariaLabel: close,
+          title: close
         }, '×')
       ),
       h('div', { class: 'zx-modal__content zx-dialog__body', ref: 'content' }),
@@ -151,16 +147,13 @@ export class Dialog extends Modal {
    * @returns {this}
    */
   open() {
-    if (this.isOpen()) return this;
-    this.#opener = document.activeElement instanceof Element ? document.activeElement : null;
-    super.open();
-    queueMicrotask(() => {
-      if (!this.isOpen()) return;
-      const autofocus = this.el.querySelector('[autofocus]:not([disabled])');
-      const first = autofocus ?? this.el.querySelector(FOCUSABLE_SELECTOR);
-      if (first instanceof HTMLElement) first.focus();
-    });
-    return this;
+    /*
+     * Capturing the opener, placing initial focus and restoring it afterwards are `Modal`'s, so
+     * that every overlay built on it is accessible rather than only the structured one. The
+     * override stays because the promise is the dialog's: the header close button is the first
+     * focusable descendant, and a footer button declared `autofocus` outranks it.
+     */
+    return super.open();
   }
 
   /**
@@ -192,7 +185,7 @@ export class Dialog extends Modal {
    * @returns {this}
    */
   setButtons(list) {
-    this.#baseButtons = copyButtons(list);
+    this.#baseButtons = normalizeDialogButtons(list);
     this.#renderButtons(this.#baseButtons);
     return this;
   }
@@ -216,7 +209,7 @@ export class Dialog extends Modal {
     const view = {
       key: normalizedKey,
       content,
-      buttons: options && Object.hasOwn(options, 'buttons') ? copyButtons(options.buttons ?? []) : null,
+      buttons: options && Object.hasOwn(options, 'buttons') ? normalizeDialogButtons(options.buttons ?? []) : null,
       title: options && Object.hasOwn(options, 'title') ? String(options.title ?? '') : null
     };
     this.#views.set(normalizedKey, view);
@@ -260,7 +253,7 @@ export class Dialog extends Modal {
    * @param {AlertOptions} [options={}] Alert options.
    * @returns {Promise<void>}
    */
-  static alert({ title = '', message = '', okLabel = 'OK' } = {}) {
+  static alert({ title = '', message = '', okLabel } = {}) {
     return new Promise((resolve) => {
       let settled = false;
       const finish = () => {
@@ -269,11 +262,13 @@ export class Dialog extends Modal {
         dialog.close();
         resolve();
       };
-      const dialog = new Dialog(null, {
-        title,
-        content: message,
-        buttons: [{ label: okLabel, kind: 'primary', action: finish, autofocus: true }]
-      });
+      const dialog = new Dialog(null, { title, content: message });
+      dialog.setButtons([{
+        label: okLabel ?? dialog._message('dialog.ok', 'OK'),
+        kind: 'primary',
+        action: finish,
+        autofocus: true
+      }]);
       dialog.once('close', () => {
         if (!settled) {
           settled = true;
@@ -291,7 +286,7 @@ export class Dialog extends Modal {
    * @returns {Promise<boolean>}
    */
   static confirm({
-    title = '', message = '', okLabel = 'OK', cancelLabel = 'Cancel', danger = false
+    title = '', message = '', okLabel, cancelLabel, danger = false
   } = {}) {
     return new Promise((resolve) => {
       let settled = false;
@@ -301,14 +296,16 @@ export class Dialog extends Modal {
         dialog.close(value);
         resolve(value);
       };
-      const dialog = new Dialog(null, {
-        title,
-        content: message,
-        buttons: [
-          { label: cancelLabel, action: () => finish(false) },
-          { label: okLabel, kind: danger ? 'danger' : 'primary', action: () => finish(true), autofocus: true }
-        ]
-      });
+      const dialog = new Dialog(null, { title, content: message });
+      dialog.setButtons([
+        { label: cancelLabel ?? dialog._message('dialog.cancel', 'Cancel'), action: () => finish(false) },
+        {
+          label: okLabel ?? dialog._message('dialog.ok', 'OK'),
+          kind: danger ? 'danger' : 'primary',
+          action: () => finish(true),
+          autofocus: true
+        }
+      ]);
       dialog.once('close', () => {
         if (!settled) {
           settled = true;
@@ -332,8 +329,7 @@ export class Dialog extends Modal {
         class: 'zx-dialog__prompt-input',
         value: String(value),
         placeholder: String(placeholder),
-        autofocus: true,
-        ariaLabel: String(title || 'Prompt value')
+        autofocus: true
       });
       const content = h('div', { class: 'zx-dialog__prompt' },
         h('div', { class: 'zx-dialog__prompt-message' }, message),
@@ -345,14 +341,12 @@ export class Dialog extends Modal {
         dialog.close(result);
         resolve(result);
       };
-      const dialog = new Dialog(null, {
-        title,
-        content,
-        buttons: [
-          { label: 'Cancel', action: () => finish(null) },
-          { label: 'OK', kind: 'primary', action: () => finish(input.value) }
-        ]
-      });
+      const dialog = new Dialog(null, { title, content });
+      input.setAttribute('aria-label', String(title || dialog._message('dialog.promptValue', 'Prompt value')));
+      dialog.setButtons([
+        { label: dialog._message('dialog.cancel', 'Cancel'), action: () => finish(null) },
+        { label: dialog._message('dialog.ok', 'OK'), kind: 'primary', action: () => finish(input.value) }
+      ]);
       dialog.listen(input, 'keydown', (event) => {
         if (event.key !== 'Enter') return;
         event.preventDefault();
@@ -383,6 +377,17 @@ export class Dialog extends Modal {
     this.el.style.inlineSize = `${Math.max(0, width)}px`;
   }
 
+  /**
+   * Resolves a component message, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
+
   /** @param {string} title @returns {void} */
   #applyTitle(title) {
     this.refs.title.textContent = title;
@@ -390,23 +395,27 @@ export class Dialog extends Modal {
 
   /** @param {DialogButton[]} list @returns {void} */
   #renderButtons(list) {
-    this.#renderedButtons = copyButtons(list);
+    this.#renderedButtons = normalizeDialogButtons(list);
     this.refs.footer.replaceChildren();
     this.refs.footer.hidden = this.#renderedButtons.length === 0;
     this.#renderedButtons.forEach((definition, index) => {
-      this.refs.footer.append(h('button', {
-        class: 'zx-btn',
-        type: 'button',
-        'data-kind': definition.kind ?? 'default',
-        'data-size': 'md',
-        'data-dialog-button': String(index),
-        autofocus: Boolean(definition.autofocus)
-      }, h('span', { class: 'zx-btn__label' }, definition.label)));
+      const control = button({
+        label: definition.label,
+        kind: definition.kind,
+        shortcut: definition.shortcut,
+        disabled: definition.disabled
+      });
+      control.dataset.dialogButton = String(index);
+      control.autofocus = definition.autofocus;
+      this.refs.footer.append(control);
     });
   }
 
   /** @param {DialogButton} definition @returns {void} */
   #runButton(definition) {
+    // A native disabled button swallows its own clicks, but the footer listener is delegated and
+    // a host may dispatch one at the row; the descriptor is the authority either way.
+    if (definition.disabled) return;
     const action = definition.action ?? 'close';
     if (action === 'close') {
       this.close();
@@ -417,17 +426,30 @@ export class Dialog extends Modal {
       action(this);
     }
   }
-
-  /** @returns {void} */
-  #restoreFocus() {
-    if (this.#opener?.isConnected && typeof this.#opener.focus === 'function') this.#opener.focus();
-    this.#opener = null;
-  }
 }
 
-/** @param {DialogButton[]|null|undefined} list @returns {DialogButton[]} */
-function copyButtons(list) {
-  return Array.isArray(list) ? list.map((button) => ({ ...button, label: String(button.label ?? '') })) : [];
+/**
+ * Copies footer-button descriptors without mutating the caller's array or objects, and settles
+ * the two booleans the footer renders from.
+ *
+ * `autofocus` and `disabled` are resolved together because they contradict each other: a control
+ * that refuses activation must not be the one initial focus lands on, and a host that writes both
+ * has said what it wants twice. Deciding it here rather than at render time keeps `Sheet` — which
+ * takes the same descriptors through the same footer — on one answer.
+ * @param {DialogButton[]|null|undefined} list Button descriptors.
+ * @returns {DialogButton[]} Normalized copies.
+ */
+export function normalizeDialogButtons(list) {
+  if (!Array.isArray(list)) return [];
+  return list.map((button) => {
+    const disabled = Boolean(button?.disabled);
+    return {
+      ...button,
+      label: String(button?.label ?? ''),
+      disabled,
+      autofocus: Boolean(button?.autofocus) && !disabled
+    };
+  });
 }
 
 /**

package/src/components/dropdown/dropdown.js

@@ -182,7 +182,7 @@ export class Dropdown extends Component {
 
   /** @param {KeyboardEvent} event @returns {void} */
   [HANDLE_ESCAPE_DISMISS](event) {
-    if (event.key !== 'Escape' || !this.isOpen()) return;
+    if (event.defaultPrevented || event.key !== 'Escape' || !this.isOpen()) return;
     event.preventDefault();
     const restoreFocus = this.el.contains(document.activeElement);
     this.close();
@@ -205,7 +205,7 @@ class DropdownDismissManager extends Component {
       if (component instanceof Dropdown) component[HANDLE_POINTER_DISMISS](event);
     });
     this.listen(document, 'keydown', (event) => {
-      if (event.key !== 'Escape') return;
+      if (event.defaultPrevented || event.key !== 'Escape') return;
       const component = topmostOverlayComponent();
       if (component instanceof Dropdown) component[HANDLE_ESCAPE_DISMISS](event);
     });