quilt-vanilla 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quilt-vanilla",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Vanilla DOM split panes, tabs, themes, and same-origin window popouts",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "prepack": "node ../../scripts/build-package.mjs dom --dependencies"
   },
   "dependencies": {
-    "quilt-core": "0.3.0"
+    "quilt-core": "0.4.0"
   },
   "sideEffects": [
     "**/*.css"

package/src/actions.ts

@@ -0,0 +1,125 @@
+import { findNode, findParent, groups, paneIds } from 'quilt-core';
+import type { Group, Pane } from 'quilt-core';
+import type { ActionContext, ResolvedLayoutOptions, WorkspaceAction } from './types.js';
+import { actionOrder } from './shortcut-registration.js';
+
+export function createActions(
+  options: ResolvedLayoutOptions,
+  dependencies: {
+    context(): ActionContext;
+    disposed(): boolean;
+    create(action: WorkspaceAction, group: Group, pane: Pane | undefined): void;
+    close(id: string, kind?: 'pane' | 'group'): Promise<boolean>;
+    popout(id: string): Promise<boolean>;
+    report(error: unknown): void;
+  },
+) {
+  function resolve(context?: ActionContext) {
+    const layout = options.store.getSnapshot();
+    const target =
+      context?.groupId !== undefined || context?.paneId !== undefined
+        ? context
+        : dependencies.context();
+    const id =
+      target.groupId ??
+      (target.paneId === undefined
+        ? undefined
+        : groups(layout.root).find((group) => group.panes.includes(target.paneId!))?.id);
+    const node = id === undefined ? undefined : findNode(layout.root, id);
+    const group = node?.kind === 'group' ? node : undefined;
+    const paneId = target.paneId ?? group?.active;
+    const pane = paneId ? layout.panes[paneId] : undefined;
+    const valid =
+      !(target.groupId !== undefined && !group) &&
+      !(target.paneId !== undefined && (!pane || !group?.panes.includes(target.paneId)));
+    return { layout, group, pane, valid };
+  }
+  function canExecuteAction(action: WorkspaceAction, context?: ActionContext): boolean {
+    if (dependencies.disposed() || !actionOrder.includes(action)) return false;
+    const { layout, group, pane, valid } = resolve(context);
+    if (!valid) return false;
+    if (action === 'restoreClosedTab') return options.store.canRestoreClosedTab();
+    if (!group) return false;
+    const allowed = (cap: 'split' | 'move' | 'close') =>
+      group.panes.every((id) => options.store.can(id, cap));
+    switch (action) {
+      case 'addTab':
+        return !!options.tabs?.list().length && allowed('move');
+      case 'splitLeft':
+      case 'splitRight':
+      case 'splitUp':
+      case 'splitDown':
+        return (!group.panes.length || !!options.tabs?.list().length) && allowed('split');
+      case 'closeActiveTab':
+        return !!pane && options.store.can(pane.id, 'close');
+      case 'closePane':
+        return !!group.panes.length && allowed('close');
+      case 'closeEmptyPane':
+        return !group.panes.length && group.id !== layout.root.id;
+      case 'popout':
+        return options.popouts !== false && !!pane && options.store.can(pane.id, 'popout');
+      case 'joinSiblingRegion': {
+        const parent = findParent(layout.root, group.id);
+        return !!parent && paneIds(parent).every((id) => options.store.can(id, 'join'));
+      }
+      default:
+        return true;
+    }
+  }
+  async function executeAction(action: WorkspaceAction, context?: ActionContext): Promise<boolean> {
+    try {
+      if (!canExecuteAction(action, context)) return false;
+      const { layout, group, pane } = resolve(context);
+      switch (action) {
+        case 'restoreClosedTab':
+          options.store.restoreClosedTab();
+          break;
+        case 'maximize':
+          options.store.maximize(layout.maximized === group!.id ? null : group!.id);
+          break;
+        case 'addTab':
+        case 'splitLeft':
+        case 'splitRight':
+        case 'splitUp':
+        case 'splitDown':
+          dependencies.create(action, group!, pane);
+          break;
+        case 'closeActiveTab':
+          return await dependencies.close(pane!.id);
+        case 'closePane':
+          return await dependencies.close(group!.id, 'group');
+        case 'closeEmptyPane':
+          options.store.removeEmptyGroup(group!.id);
+          break;
+        case 'popout':
+          return await dependencies.popout(pane!.id);
+        case 'joinSiblingRegion':
+          options.store.join(group!.id, { source: 'user' });
+          break;
+        case 'tabOrientationDefault':
+          options.store.setTabPlacement(group!.id, undefined);
+          break;
+        case 'tabOrientationHorizontal':
+          options.store.setTabPlacement(group!.id, 'top');
+          break;
+        case 'tabOrientationVertical':
+          options.store.setTabPlacement(group!.id, 'left');
+          break;
+        case 'tabDisplayDefault':
+          options.store.setTabDisplay(group!.id, undefined);
+          break;
+        case 'tabDisplayAutomatic':
+          options.store.setTabDisplay(group!.id, 'automatic');
+          break;
+        case 'tabDisplayCompact':
+          options.store.setTabDisplay(group!.id, 'compact');
+          break;
+      }
+      return true;
+    } catch (error) {
+      dependencies.report(error);
+      return false;
+    }
+  }
+  return { canExecuteAction, executeAction };
+}

package/src/index.ts

@@ -20,6 +20,10 @@ export type {
   InitialConfiguration,
   WorkspaceSettings,
   KeyBinding,
+  WorkspaceAction,
+  ActionContext,
+  RegisteredShortcut,
+  ShortcutRegistration,
   CloseRequest,
 } from './types.js';
 
@@ -53,3 +57,5 @@ export type { WorkspacePreset } from './workspace.js';
 export { themeProperties } from './theme.js';
 export { defaultMessages } from './messages.js';
 export type { Messages } from './messages.js';
+
+export { formatShortcut } from './shortcut-registration.js';

package/src/menu.ts

@@ -4,20 +4,23 @@ import type { ActionIcon } from './action-icons.js';
 import { fillTabPicker } from './picker.js';
 import { findNode, findParent, groups, paneIds } from 'quilt-core';
 import type { Group, Pane } from 'quilt-core';
-import type { ResolvedLayoutOptions } from './types.js';
-import type { Windows } from './windows.js';
+import type { ResolvedLayoutOptions, WorkspaceAction, ActionContext } from './types.js';
+import type { createActions } from './actions.js';
+import { registeredShortcuts, formatShortcut, ariaShortcut } from './shortcut-registration.js';
 import { el, Scope } from './lifetime.js';
 export function createPaneMenu(
   root: HTMLElement,
   options: ResolvedLayoutOptions,
-  windows: Pick<Windows, 'open'>,
   refresh: () => void,
   report: (e: unknown) => void,
-  requestClose: (id: string, kind?: 'pane' | 'group') => Promise<boolean>,
+  actions: ReturnType<typeof createActions>,
 ) {
   const doc = root.ownerDocument,
     win = doc.defaultView!;
   let current: Scope | undefined;
+  let shortcutTarget:
+    { dialog: HTMLDialogElement; context: ActionContext; close(): void } | undefined;
+  let refreshShortcuts = () => {};
   const persistentPickers = new Map<string, Scope>();
   const act = (fn: () => void) => {
     try {
@@ -26,11 +29,10 @@ export function createPaneMenu(
       report(error);
     }
   };
-  function button(text: string, title: string, action: () => void) {
+  function button(text: string, label: string, action: () => void) {
     const b = el(doc, 'button', 'layouts-button', text);
     b.type = 'button';
-    b.title = title;
-    b.setAttribute('aria-label', title);
+    b.setAttribute('aria-label', label);
     b.onclick = () => act(action);
     return b;
   }
@@ -59,17 +61,38 @@ export function createPaneMenu(
         : message(options, 'Empty pane actions'),
     );
     local.add(() => dialog.remove());
-    const add = (icon: ActionIcon, label: string, enabled: boolean, fn: () => void) => {
+    const context = {
+      groupId: group.id,
+      ...(pane && group.panes.includes(pane.id) ? { paneId: pane.id } : {}),
+    };
+    const hints: { element: HTMLButtonElement; action: WorkspaceAction }[] = [];
+    const bindAction = (element: HTMLButtonElement, action: WorkspaceAction) => {
+      hints.push({ element, action });
+      element.disabled = !actions.canExecuteAction(action, context);
+      element.onclick = () => {
+        local.dispose();
+        void actions.executeAction(action, context);
+      };
+    };
+    const add = (
+      icon: ActionIcon,
+      label: string,
+      enabled: boolean,
+      fn: (() => void) | WorkspaceAction,
+      target: HTMLElement = dialog,
+    ) => {
       const b = button(label, label, () => {
         local.dispose();
-        act(fn);
+        if (typeof fn === 'function') act(fn);
       });
       const glyph = el(doc, 'span', 'layouts-tab-icon');
       glyph.setAttribute('aria-hidden', 'true');
       act(() => glyph.append(actionIcon(doc, icon, options)));
       b.replaceChildren(glyph, el(doc, 'span', '', label.replace(/^\+ /, '')));
       b.disabled = !enabled;
-      dialog.append(b);
+      if (typeof fn === 'string') bindAction(b, fn);
+      if (target !== dialog) b.setAttribute('role', 'menuitem');
+      target.append(b);
       return b;
     };
     const allowed = (cap: 'split' | 'join' | 'move') =>
@@ -188,7 +211,7 @@ export function createPaneMenu(
       );
       return;
     }
-    add('add-tab', message(options, '+ Add tab'), available && allowed('move'), () => create());
+    add('add-tab', message(options, '+ Add tab'), available && allowed('move'), 'addTab');
     const canCreate = !group.panes.length || available;
     const flyouts: { trigger: HTMLElement; flyout: HTMLElement }[] = [];
     let positionMenus = () => {};
@@ -207,7 +230,14 @@ export function createPaneMenu(
       flyout.setAttribute('role', 'menu');
       flyout.setAttribute('aria-label', label);
       flyouts.push({ trigger, flyout });
+      let closeTimer: number | undefined;
+      const cancelClose = () => {
+        win.clearTimeout(closeTimer);
+        closeTimer = undefined;
+      };
+      local.add(cancelClose);
       const setOpen = (open: boolean) => {
+        cancelClose();
         if (open) {
           for (const other of flyouts) {
             other.flyout.hidden = true;
@@ -221,7 +251,11 @@ export function createPaneMenu(
       local.listen(container, 'pointerenter', () => {
         if (!trigger.disabled) setOpen(true);
       });
-      local.listen(container, 'pointerleave', () => setOpen(false));
+      // Allow the pointer to cross the dialog padding or move diagonally into the flyout.
+      local.listen(container, 'pointerleave', () => {
+        cancelClose();
+        closeTimer = win.setTimeout(() => setOpen(false), 300);
+      });
       local.listen(trigger, 'keydown', (event) => {
         if ((event as KeyboardEvent).key === 'ArrowRight') {
           event.preventDefault();
@@ -241,16 +275,14 @@ export function createPaneMenu(
       return flyout;
     }
     const flyout = submenu(message(options, 'Split'), 'split-right', canCreate && allowed('split'));
-    for (const [label, axis, before] of [
-      [message(options, 'Split left'), 'horizontal', true],
-      [message(options, 'Split right'), 'horizontal', false],
-      [message(options, 'Split up'), 'vertical', true],
-      [message(options, 'Split down'), 'vertical', false],
+    for (const [label, axis, action] of [
+      [message(options, 'Split left'), 'horizontal', 'splitLeft'],
+      [message(options, 'Split right'), 'horizontal', 'splitRight'],
+      [message(options, 'Split up'), 'vertical', 'splitUp'],
+      [message(options, 'Split down'), 'vertical', 'splitDown'],
     ] as const) {
-      const option = button(label, label, () => {
-        local.dispose();
-        create(axis, before);
-      });
+      const option = button(label, label, () => {});
+      bindAction(option, action);
       const icon = el(doc, 'span', 'layouts-tab-icon');
       icon.setAttribute('aria-hidden', 'true');
       icon.append(actionIcon(doc, axis === 'horizontal' ? 'split-right' : 'split-below', options));
@@ -263,7 +295,7 @@ export function createPaneMenu(
       'join',
       message(options, 'Join sibling region'),
       Boolean(joinParent) && paneIds(joinParent!).every((id) => options.store.can(id, 'join')),
-      () => options.store.join(group.id, { source: 'user' }),
+      'joinSiblingRegion',
     );
     let preview: Scope | undefined;
     const clearPreview = () => {
@@ -334,20 +366,14 @@ export function createPaneMenu(
         ? message(options, 'Restore region')
         : message(options, 'Maximize region'),
       true,
-      () =>
-        options.store.maximize(
-          options.store.getSnapshot().maximized === group.id ? null : group.id,
-        ),
+      'maximize',
     );
     if (group.panes.length && pane && options.popouts !== false) {
       add(
         'popout',
         message(options, 'Open in window'),
         options.store.can(pane.id, 'popout'),
-        () => {
-          void windows.open(pane.id);
-          refresh();
-        },
+        'popout',
       );
     }
     const orientation = submenu(message(options, 'Tab orientation'), 'tab-orientation');
@@ -357,10 +383,15 @@ export function createPaneMenu(
       ['left', message(options, 'Vertical')],
     ] as const) {
       const selected = group.tabPlacement === value;
-      const option = button(label, label, () => {
-        options.store.setTabPlacement(group.id, value);
-        local.dispose();
-      });
+      const option = button(label, label, () => {});
+      bindAction(
+        option,
+        value === 'top'
+          ? 'tabOrientationHorizontal'
+          : value === 'left'
+            ? 'tabOrientationVertical'
+            : 'tabOrientationDefault',
+      );
       option.setAttribute('role', 'menuitemradio');
       option.setAttribute('aria-checked', String(selected));
       const mark = el(doc, 'span', 'layouts-tab-icon', selected ? '✓' : '');
@@ -375,10 +406,15 @@ export function createPaneMenu(
       ['compact', message(options, 'Compact')],
     ] as const) {
       const selected = group.tabDisplay === value;
-      const option = button(label, label, () => {
-        options.store.setTabDisplay(group.id, value);
-        local.dispose();
-      });
+      const option = button(label, label, () => {});
+      bindAction(
+        option,
+        value === 'automatic'
+          ? 'tabDisplayAutomatic'
+          : value === 'compact'
+            ? 'tabDisplayCompact'
+            : 'tabDisplayDefault',
+      );
       option.setAttribute('role', 'menuitemradio');
       option.setAttribute('aria-checked', String(selected));
       const mark = el(doc, 'span', 'layouts-tab-icon', selected ? '✓' : '');
@@ -387,31 +423,34 @@ export function createPaneMenu(
       display.append(option);
     }
     if (group.panes.length && pane) {
+      const close = submenu(message(options, 'Close'), 'close');
       add(
         'close',
         message(options, 'Close active tab'),
         options.store.can(pane.id, 'close'),
-        () => void requestClose(pane.id),
+        'closeActiveTab',
+        close,
       );
       add(
         'close',
         message(options, 'Close pane'),
         group.panes.every((id) => options.store.can(id, 'close')),
-        () => void requestClose(group.id, 'group'),
+        'closePane',
+        close,
       );
     } else {
       add(
         'close',
         message(options, 'Close empty pane'),
         options.store.getSnapshot().root.id !== group.id,
-        () => options.store.removeEmptyGroup(group.id),
+        'closeEmptyPane',
       );
     }
     add(
       'restore',
       message(options, 'Restore closed tab'),
       options.store.canRestoreClosedTab(),
-      () => options.store.restoreClosedTab(),
+      'restoreClosedTab',
     );
     add('cancel', message(options, 'Cancel'), true, () => {});
     root.append(dialog);
@@ -462,8 +501,47 @@ export function createPaneMenu(
           local.dispose();
       }
     });
+    const updateHints = () => {
+      const registrations = registeredShortcuts(options);
+      for (const { element, action } of hints) {
+        element.querySelector('.layouts-shortcut')?.remove();
+        element.removeAttribute('aria-keyshortcuts');
+        element.disabled = !actions.canExecuteAction(action, context);
+        const label = element.getAttribute('aria-label') ?? '';
+        const registration = registrations.find((entry) => entry.action === action);
+        element.removeAttribute('title');
+        if (!registration) continue;
+        const labels = registration.bindings.map((binding) => {
+          try {
+            return options.formatShortcut?.(binding) ?? formatShortcut(binding);
+          } catch (error) {
+            report(error);
+            return formatShortcut(binding);
+          }
+        });
+        const badge = el(doc, 'kbd', 'layouts-shortcut', labels[0]);
+        badge.setAttribute('aria-hidden', 'true');
+        element.append(badge);
+        element.title = `${label} (${labels.join(' / ')})`;
+        if (!element.disabled)
+          element.setAttribute(
+            'aria-keyshortcuts',
+            registration.bindings.map(ariaShortcut).join(' '),
+          );
+      }
+      positionMenus();
+    };
+    refreshShortcuts = updateHints;
+    local.add(() => {
+      if (refreshShortcuts === updateHints) refreshShortcuts = () => {};
+    });
+    const target = { dialog, context, close: () => local.dispose() };
+    shortcutTarget = target;
+    local.add(() => {
+      if (shortcutTarget === target) shortcutTarget = undefined;
+    });
     dialog.showModal();
-    positionMenus();
+    updateHints();
     const observer = new win.ResizeObserver(positionMenus);
     observer.observe(dialog);
     observer.observe(anchor);
@@ -478,6 +556,8 @@ export function createPaneMenu(
     dialog.focus({ preventScroll: true });
   }
   return {
+    getShortcutTarget: () => shortcutTarget,
+    refreshShortcuts: () => refreshShortcuts(),
     open,
     addTab(anchor: HTMLElement, group: Group) {
       const layout = options.store.getSnapshot();

package/src/renderer.ts

@@ -10,6 +10,8 @@ import { bindCorners } from './corners.js';
 import { applyTheme } from './theme.js';
 import { fillTabs } from './tabs.js';
 import { bindShortcuts } from './shortcuts.js';
+import { createActions } from './actions.js';
+import { registeredShortcuts } from './shortcut-registration.js';
 import {
   LayoutStore,
   createLayout,
@@ -142,13 +144,42 @@ function mountLayoutInternal(
     for (const region of regions.values()) region.scope.dispose();
     regions.clear();
   });
-  const menu = createPaneMenu(root, options, windows, render, error, requestClose);
+  const actions = createActions(options, {
+    context: () => shortcutContext(),
+    disposed: () => disposed,
+    close: requestClose,
+    popout: (id) => windows.open(id),
+    report: error,
+    create(action, group, pane) {
+      const region = regions.get(group.id);
+      if (!region) throw new Error('Region is not mounted');
+      const anchor = region.header ?? region.element;
+      if (action === 'addTab') menu.addTab(anchor, group);
+      else {
+        const direction =
+          action === 'splitLeft'
+            ? 'left'
+            : action === 'splitRight'
+              ? 'right'
+              : action === 'splitUp'
+                ? 'top'
+                : 'bottom';
+        menu.open(anchor, pane, group, direction);
+      }
+    },
+  });
+  const menu = createPaneMenu(root, options, render, error, actions);
   scope.add(() => menu.dispose());
   scope.add(() => dragScope?.dispose());
-  bindShortcuts(root, options, scope, act, (group) => {
-    const region = regions.get(group.id);
-    if (region) menu.addTab(region.header ?? region.element, group);
-  });
+  const shortcutContext = bindShortcuts(
+    root,
+    options,
+    scope,
+    actions.canExecuteAction,
+    actions.executeAction,
+    menu.getShortcutTarget,
+  );
+  registeredShortcuts(options);
   const renderOptions = { ...options, onError: error };
   function button(text: string, title: string, action: () => void) {
     const b = el(doc, 'button', 'layouts-button', text);
@@ -807,6 +838,8 @@ function mountLayoutInternal(
   render();
   return {
     store: options.store,
+    ...actions,
+    getShortcuts: () => registeredShortcuts(options),
     requestClose,
     refreshTheme,
     updateOptions(next) {
@@ -818,6 +851,7 @@ function mountLayoutInternal(
       const candidate = { ...options, ...next };
       if (candidate.registry && (next.renderers || next.tabs))
         throw new Error('registry cannot be combined with renderers or tabs');
+      registeredShortcuts(candidate);
       validateTheme(candidate.theme ?? {});
       validateTabBar(candidate.tabBar ?? {});
       const sameRegistrations =
@@ -843,8 +877,7 @@ function mountLayoutInternal(
         (!candidate.registry && candidate.tabs !== options.tabs) ||
         candidate.renderIcon !== options.renderIcon ||
         candidate.popouts !== options.popouts ||
-        JSON.stringify(candidate.messages) !== JSON.stringify(options.messages) ||
-        JSON.stringify(candidate.shortcuts) !== JSON.stringify(options.shortcuts);
+        JSON.stringify(candidate.messages) !== JSON.stringify(options.messages);
       // Clear maps derived from the old registry when returning to low-level registration.
       if ('registry' in next && !next.registry && options.registry) {
         Object.assign(options, { renderers: undefined, tabs: undefined });
@@ -854,6 +887,7 @@ function mountLayoutInternal(
       if ('tabBar' in next) tabBar = structuredClone(options.tabBar ?? {});
       bindRegistry();
       refreshOptions(repaintChrome);
+      menu.refreshShortcuts();
       refreshTheme();
     },
     exportWorkspace() {

package/src/shortcut-registration.ts

@@ -0,0 +1,106 @@
+import type {
+  KeyBinding,
+  RegisteredShortcut,
+  WorkspaceAction,
+  WorkspaceSettings,
+} from './types.js';
+
+/** Stable conflict priority. Existing presets retain their original priority. */
+export const actionOrder: readonly WorkspaceAction[] = [
+  'maximize',
+  'addTab',
+  'restoreClosedTab',
+  'closeActiveTab',
+  'closePane',
+  'closeEmptyPane',
+  'popout',
+  'joinSiblingRegion',
+  'splitLeft',
+  'splitRight',
+  'splitUp',
+  'splitDown',
+  'tabOrientationDefault',
+  'tabOrientationHorizontal',
+  'tabOrientationVertical',
+  'tabDisplayDefault',
+  'tabDisplayAutomatic',
+  'tabDisplayCompact',
+];
+const defaults: Partial<Record<WorkspaceAction, readonly KeyBinding[]>> = {
+  maximize: [{ key: '`' }, { key: ' ', alt: true }],
+  addTab: [{ key: 't' }],
+  restoreClosedTab: [{ key: 'r' }],
+};
+export function registeredShortcuts(options: {
+  shortcuts?: WorkspaceSettings['shortcuts'];
+}): readonly RegisteredShortcut[] {
+  const result: RegisteredShortcut[] = [];
+  for (const action of actionOrder) {
+    const value =
+      options.shortcuts === true
+        ? !!defaults[action]
+        : typeof options.shortcuts === 'object'
+          ? options.shortcuts[action]
+          : false;
+    if (!value) continue;
+    const extended = typeof value === 'object' && 'bindings' in value ? value : undefined;
+    const configured = extended ? extended.bindings : value;
+    const bindings: readonly KeyBinding[] =
+      configured === true
+        ? (defaults[action] ?? [])
+        : Array.isArray(configured)
+          ? configured
+          : [configured as KeyBinding];
+    const handling = extended?.handling ?? 'quilt';
+    if (handling !== 'quilt' && handling !== 'external')
+      throw new Error('Invalid shortcut handling');
+    const normalized = bindings.map((binding) => {
+      if (
+        !binding ||
+        typeof binding.key !== 'string' ||
+        !binding.key ||
+        (binding.key !== ' ' && /\s/.test(binding.key))
+      )
+        throw new Error('Invalid shortcut key');
+      for (const modifier of ['ctrl', 'alt', 'shift', 'meta'] as const)
+        if (binding[modifier] !== undefined && typeof binding[modifier] !== 'boolean')
+          throw new Error(`Invalid shortcut modifier: ${modifier}`);
+      return Object.freeze({
+        key: binding.key,
+        ctrl: !!binding.ctrl,
+        alt: !!binding.alt,
+        shift: !!binding.shift,
+        meta: !!binding.meta,
+      });
+    });
+    if (normalized.length)
+      result.push(Object.freeze({ action, handling, bindings: Object.freeze(normalized) }));
+  }
+  return Object.freeze(result);
+}
+export function formatShortcut(binding: Readonly<KeyBinding>): string {
+  return [
+    binding.ctrl && 'Ctrl',
+    binding.alt && 'Alt',
+    binding.shift && 'Shift',
+    binding.meta && 'Meta',
+    binding.key === ' '
+      ? 'Space'
+      : binding.key.length === 1
+        ? binding.key.toUpperCase()
+        : binding.key,
+  ]
+    .filter(Boolean)
+    .join(' + ');
+}
+export function ariaShortcut(binding: Readonly<KeyBinding>): string {
+  return [
+    binding.ctrl && 'Control',
+    binding.alt && 'Alt',
+    binding.shift && 'Shift',
+    binding.meta && 'Meta',
+    binding.key === ' ' ? 'Space' : binding.key === '+' ? 'Plus' : binding.key,
+  ]
+    .filter(Boolean)
+    .join('+');
+}