opentiny 6.9.0

package/src/themes/silver/main/ts/ui/menus/menu/SingleMenu.ts

@@ -0,0 +1,228 @@
+import { AlloyEvents, InlineViewTypes, ItemTypes, Keying, TieredMenu, TieredMenuTypes } from '@ephox/alloy';
+import { InlineContent, Menu as BridgeMenu, Toolbar } from '@ephox/bridge';
+import { Arr, Obj, Optional, Optionals } from '@ephox/katamari';
+
+import { UiFactoryBackstage, UiFactoryBackstageShared } from 'tinymce/themes/silver/backstage/Backstage';
+
+import { detectSize } from '../../alien/FlatgridAutodetect';
+import { SimpleBehaviours } from '../../alien/SimpleBehaviours';
+import { tooltipBehaviour } from '../item/build/AutocompleteMenuItem';
+import ItemResponse from '../item/ItemResponse';
+import * as MenuItems from '../item/MenuItems';
+import { deriveMenuMovement } from './MenuMovement';
+import { markers as getMenuMarkers } from './MenuParts';
+import * as MenuUtils from './MenuUtils';
+import { identifyMenuLayout, MenuSearchMode } from './searchable/SearchableMenu';
+import { SingleMenuItemSpec } from './SingleMenuTypes';
+
+type PartialMenuSpec = MenuUtils.PartialMenuSpec;
+
+export enum FocusMode {
+  ContentFocus,
+  UiFocus
+}
+
+const createMenuItemFromBridge = (
+  item: SingleMenuItemSpec,
+  itemResponse: ItemResponse,
+  backstage: UiFactoryBackstage,
+  menuHasIcons: boolean,
+  isHorizontalMenu: boolean
+): Optional<ItemTypes.ItemSpec> => {
+  const providersBackstage = backstage.shared.providers;
+  // If we're making a horizontal menu (mobile context menu) we want text OR icons
+  // to simplify the UI. We also don't want shortcut text.
+  const parseForHorizontalMenu = <T extends { text: Optional<string>; icon: Optional<string> }>(menuitem: T) => !isHorizontalMenu ? menuitem : ({
+    ...menuitem,
+    shortcut: Optional.none(),
+    icon: menuitem.text.isSome() ? Optional.none() : menuitem.icon
+  });
+
+  switch (item.type) {
+    case 'menuitem':
+      return BridgeMenu.createMenuItem(item).fold(
+        MenuUtils.handleError,
+        (d) => Optional.some(MenuItems.normal(
+          parseForHorizontalMenu(d),
+          itemResponse,
+          providersBackstage,
+          menuHasIcons
+        ))
+      );
+
+    case 'nestedmenuitem':
+      return BridgeMenu.createNestedMenuItem(item).fold(
+        MenuUtils.handleError,
+        (d) => Optional.some(MenuItems.nested(
+          parseForHorizontalMenu(d),
+          itemResponse,
+          providersBackstage,
+          menuHasIcons,
+          isHorizontalMenu
+        ))
+      );
+
+    case 'togglemenuitem':
+      return BridgeMenu.createToggleMenuItem(item).fold(
+        MenuUtils.handleError,
+        (d) => Optional.some(MenuItems.toggle(
+          parseForHorizontalMenu(d),
+          itemResponse,
+          providersBackstage,
+          menuHasIcons
+        ))
+      );
+    case 'separator':
+      return BridgeMenu.createSeparatorMenuItem(item).fold(
+        MenuUtils.handleError,
+        (d) => Optional.some(MenuItems.separator(d))
+      );
+    case 'fancymenuitem':
+      return BridgeMenu.createFancyMenuItem(item).fold(
+        MenuUtils.handleError,
+        // Fancy menu items don't have shortcuts or icons
+        (d) => MenuItems.fancy(d, backstage)
+      );
+    default: {
+      // eslint-disable-next-line no-console
+      console.error('Unknown item in general menu', item);
+      return Optional.none();
+    }
+  }
+};
+
+export const createAutocompleteItems = (
+  items: InlineContent.AutocompleterContents[],
+  matchText: string,
+  onItemValueHandler: (itemValue: string, itemMeta: Record<string, any>) => void,
+  columns: 'auto' | number,
+  itemResponse: ItemResponse,
+  sharedBackstage: UiFactoryBackstageShared,
+  highlightOn: string[]
+): ItemTypes.ItemSpec[] => {
+  // Render text and icons if we're using a single column, otherwise only render icons
+  const renderText = columns === 1;
+  const renderIcons = !renderText || MenuUtils.menuHasIcons(items);
+  return Optionals.cat(
+    Arr.map(items, (item) => {
+      switch (item.type) {
+        case 'separator':
+          return InlineContent.createSeparatorItem(item).fold(
+            MenuUtils.handleError,
+            (d) => Optional.some(MenuItems.separator(d))
+          );
+
+        case 'cardmenuitem':
+          return BridgeMenu.createCardMenuItem(item).fold(
+            MenuUtils.handleError,
+            (d) => Optional.some(MenuItems.card(
+              {
+                ...d,
+                // Intercept action
+                onAction: (api) => {
+                  d.onAction(api);
+                  onItemValueHandler(d.value, d.meta);
+                }
+              },
+              itemResponse,
+              sharedBackstage,
+              {
+                itemBehaviours: tooltipBehaviour(d.meta, sharedBackstage, Optional.none()),
+                cardText: {
+                  matchText,
+                  highlightOn
+                }
+              }
+            ))
+          );
+
+        case 'autocompleteitem':
+        default:
+          return InlineContent.createAutocompleterItem(item as InlineContent.AutocompleterItemSpec).fold(
+            MenuUtils.handleError,
+            (d) => Optional.some(MenuItems.autocomplete(
+              d,
+              matchText,
+              renderText,
+              'normal',
+              onItemValueHandler,
+              itemResponse,
+              sharedBackstage,
+              renderIcons
+            ))
+          );
+      }
+    })
+  );
+};
+
+export const createPartialMenu = (
+  value: string,
+  items: SingleMenuItemSpec[],
+  itemResponse: ItemResponse,
+  backstage: UiFactoryBackstage,
+  isHorizontalMenu: boolean,
+  searchMode: MenuSearchMode
+): PartialMenuSpec => {
+  const hasIcons = MenuUtils.menuHasIcons(items);
+
+  const alloyItems = Optionals.cat(
+    Arr.map(items, (item: SingleMenuItemSpec) => {
+      // Have to check each item for an icon, instead of as part of hasIcons above,
+      // else in horizontal menus, items with an icon but without text will display
+      // with neither
+      const itemHasIcon = (i: SingleMenuItemSpec) => isHorizontalMenu ? !Obj.has(i as Record<string, unknown>, 'text') : hasIcons;
+      const createItem = (i: SingleMenuItemSpec) => createMenuItemFromBridge(
+        i,
+        itemResponse,
+        backstage,
+        itemHasIcon(i),
+        isHorizontalMenu
+      );
+      if (item.type === 'nestedmenuitem' && item.getSubmenuItems().length <= 0) {
+        return createItem({ ...item, enabled: false });
+      } else {
+        return createItem(item);
+      }
+    })
+  );
+
+  // The menu layout is dependent upon our search mode.
+  const menuLayout = identifyMenuLayout(searchMode);
+
+  const createPartial = isHorizontalMenu ?
+    MenuUtils.createHorizontalPartialMenuWithAlloyItems :
+    MenuUtils.createPartialMenuWithAlloyItems;
+  return createPartial(value, hasIcons, alloyItems, 1, menuLayout);
+};
+
+export const createTieredDataFrom = (partialMenu: TieredMenuTypes.PartialMenuSpec & { value: string }): TieredMenuTypes.TieredData =>
+  TieredMenu.singleData(partialMenu.value, partialMenu);
+
+export const createInlineMenuFrom = (
+  partialMenu: PartialMenuSpec,
+  columns: number | 'auto',
+  focusMode: FocusMode,
+  presets: Toolbar.PresetTypes
+): InlineViewTypes.InlineMenuSpec => {
+  const movement = deriveMenuMovement(columns, presets);
+  const menuMarkers = getMenuMarkers(presets);
+
+  return {
+    data: createTieredDataFrom({
+      ...partialMenu,
+      movement,
+      menuBehaviours: SimpleBehaviours.unnamedEvents(columns !== 'auto' ? [ ] : [
+        AlloyEvents.runOnAttached((comp, _se) => {
+          detectSize(comp, 4, menuMarkers.item).each(({ numColumns, numRows }) => {
+            Keying.setGridSize(comp, numRows, numColumns);
+          });
+        })
+      ])
+    }),
+    menu: {
+      markers: getMenuMarkers(presets),
+      fakeFocus: focusMode === FocusMode.ContentFocus
+    }
+  };
+};

package/src/themes/silver/main/ts/ui/menus/menu/SingleMenuTypes.ts

@@ -0,0 +1,4 @@
+import { Menu } from '@ephox/bridge';
+
+export type SingleMenuItemSpec = Menu.MenuItemSpec | Menu.NestedMenuItemSpec | Menu.ToggleMenuItemSpec | Menu.SeparatorMenuItemSpec |
+Menu.ChoiceMenuItemSpec | Menu.FancyMenuItemSpec;

package/src/themes/silver/main/ts/ui/menus/menu/searchable/SearchableMenu.ts

@@ -0,0 +1,164 @@
+import { AlloyComponent, AlloyTriggers, Coupling, Dropdown, Focusing, Highlighting, Representing, Sandboxing, SimulatedEvent } from '@ephox/alloy';
+import { Optional } from '@ephox/katamari';
+import { Attribute, Class, SelectorFind, SugarElement } from '@ephox/sugar';
+
+import { MenuLayoutType } from '../MenuUtils';
+import { RedirectMenuItemInteractionEvent } from './SearchableMenuEvents';
+import { findWithinMenu, findWithinSandbox, restoreState, saveState, setActiveDescendant } from './SearchableMenuField';
+import { searchResultsClass } from './SearchableMenus';
+
+export type MenuSearchMode = NoSearchMode | SearchMenuWithFieldMode | SearchMenuWithResultsMode;
+export interface NoSearchMode {
+  readonly searchMode: 'no-search';
+}
+export interface SearchMenuWithFieldMode {
+  readonly searchMode: 'search-with-field';
+  readonly placeholder: Optional<string>;
+}
+export interface SearchMenuWithResultsMode {
+  readonly searchMode: 'search-with-results';
+}
+
+const identifyMenuLayout = (searchMode: MenuSearchMode): MenuLayoutType => {
+  switch (searchMode.searchMode) {
+    case 'no-search': {
+      return {
+        menuType: 'normal'
+      };
+    }
+    default: {
+      return {
+        menuType: 'searchable',
+        searchMode
+      };
+    }
+  }
+};
+
+const handleRefetchTrigger = (originalSandboxComp: AlloyComponent): void => {
+  // At the moment, a Sandbox is "Represented" by its triggering Dropdown.
+  // We'll want to make this an official API, in case we change it later.
+  const dropdown: AlloyComponent = Representing.getValue(originalSandboxComp);
+
+  // Because refetch will replace the entire menu, we need to store the
+  // original version of the searcher state, so that we can reinstate it
+  // after the fetch completes (which is async)
+  const optSearcherState = findWithinSandbox(originalSandboxComp).map(
+    saveState
+  );
+
+  Dropdown.refetch(dropdown).get(
+    () => {
+      // It has completed, so now find the searcher and set its value
+      // again. We can't just use the originalSandbox, because that will
+      // have been thrown away and recreated by now.
+      const newSandboxComp = Coupling.getCoupled(dropdown, 'sandbox');
+      optSearcherState.each(
+        (searcherState) => findWithinSandbox(newSandboxComp).each(
+          (inputComp) => restoreState(inputComp, searcherState)
+        )
+      );
+    }
+  );
+};
+
+// This event is triggered by the searcher for key events
+// that should be handled by the currently selected item
+// (that is, the one with *fake* focus, not real focus). So we
+// need to redispatch them to the selected item in the sandbox.
+const handleRedirectToMenuItem = (sandboxComp: AlloyComponent, se: SimulatedEvent<RedirectMenuItemInteractionEvent>): void => {
+  getActiveMenuItemFrom(sandboxComp).each(
+    (activeItem) => {
+
+      AlloyTriggers.retargetAndDispatchWith(
+        sandboxComp,
+        activeItem.element,
+        se.event.eventType,
+        se.event.interactionEvent
+      );
+    }
+  );
+};
+
+// This function is useful when you have fakeFocus, so you can't just find the
+// currently focused item (or the item that triggered a key event). It relies on
+// the following relationships between components
+// The Sandbox creates a tieredmenu, so Sandboxing.getState returns the TieredMenu
+// The TieredMenu uses Highlighting for managing which menus are active, so
+// Highlighting.getHighlighted(tmenu) is the current active menu
+// The Menu uses highlighting to manage the active item, so use
+// Highlighting.getHighlighted(menu) to get the current item.
+const getActiveMenuItemFrom = (sandboxComp: AlloyComponent): Optional<AlloyComponent> => {
+  // Consider moving some of these things into shared APIs. For example, make an extra API
+  // for TieredMenu to get the highlighted item.
+  return Sandboxing.getState(sandboxComp)
+    .bind(Highlighting.getHighlighted)
+    .bind(Highlighting.getHighlighted);
+};
+
+const getSearchResults = (activeMenuComp: AlloyComponent): Optional<SugarElement<Element>> => {
+  // Depending on the menu layout, the search results will either be the entire
+  // menu, or something within the menu.
+  return Class.has(activeMenuComp.element, searchResultsClass)
+    ? Optional.some(activeMenuComp.element)
+    : SelectorFind.descendant(activeMenuComp.element, '.' + searchResultsClass);
+};
+
+// Model the interaction with ARIA
+const updateAriaOnHighlight = (tmenuComp: AlloyComponent, menuComp: AlloyComponent, itemComp: AlloyComponent): void => {
+  // This ARIA behaviour is based on the algolia example documented in TINY-8952
+  findWithinMenu(tmenuComp).each((inputComp) => {
+    setActiveDescendant(inputComp, itemComp);
+
+    const optActiveResults = getSearchResults(menuComp);
+    optActiveResults.each(
+      (resultsElem) => {
+        // Link aria-controls of the input to the id of the results container.
+        Attribute.getOpt(resultsElem, 'id')
+          .each((controlledId) =>
+            Attribute.set(inputComp.element, 'aria-controls', controlledId)
+          );
+      }
+    );
+  });
+
+  // Update the aria-selected on the item. The removal is handled by onDehighlight
+  Attribute.set(itemComp.element, 'aria-selected', 'true');
+};
+
+const updateAriaOnDehighlight = (tmenuComp: AlloyComponent, menuComp: AlloyComponent, itemComp: AlloyComponent): void => {
+  // This ARIA behaviour is based on the algolia example documented in TINY-8952
+  Attribute.set(itemComp.element, 'aria-selected', 'false');
+};
+
+const focusSearchField = (tmenuComp: AlloyComponent): void => {
+  findWithinMenu(tmenuComp).each(
+    (searcherComp) => Focusing.focus(searcherComp)
+  );
+};
+
+const getSearchPattern = (dropdownComp: AlloyComponent): string => {
+  // Dropdowns are "coupled" with their sandbox and generally, create them on demand.
+  // When using "getExistingCoupled" of Coupling, it only returns the coupled
+  // component (here: the sandbox) if it already exists ... it won't do any creation.
+  // So here, we are trying to get possible fetchContext information for our fetch
+  // callback. If there is no sandbox, then there is no open menu, and we
+  // don't have any search context, so use an empty string. Otherwise, dive into
+  // the sandbox, and find the search field's current pattern.
+  const optSandboxComp = Coupling.getExistingCoupled(dropdownComp, 'sandbox');
+  return optSandboxComp
+    .bind(findWithinSandbox)
+    .map(saveState)
+    .map((state) => state.fetchPattern)
+    .getOr('');
+};
+
+export {
+  identifyMenuLayout,
+  handleRefetchTrigger,
+  handleRedirectToMenuItem,
+  updateAriaOnHighlight,
+  updateAriaOnDehighlight,
+  focusSearchField,
+  getSearchPattern
+};

package/src/themes/silver/main/ts/ui/menus/menu/searchable/SearchableMenuEvents.ts

@@ -0,0 +1,32 @@
+import { CustomEvent, EventFormat } from '@ephox/alloy';
+import { Id } from '@ephox/katamari';
+
+// We also could have put the SearcherState in here, but that makes refetch
+// a searcher-specific event, which we probably don't want. But maybe that's
+// unnecessary generalisation.
+export interface RefetchTriggerEventData { }
+
+export interface RefetchTriggerEvent extends CustomEvent, RefetchTriggerEventData { }
+
+export interface RedirectMenuItemInteractionEventData {
+  readonly eventType: string;
+  readonly interactionEvent: EventFormat;
+}
+
+export interface RedirectMenuItemInteractionEvent extends CustomEvent, RedirectMenuItemInteractionEventData { }
+
+// This event is triggered by a menu item from a dropdown when it wants the
+// dropdown to refetch its contents based on a search string.
+const refetchTriggerEvent = Id.generate('refetch-trigger-event');
+
+// This event is triggerd by a menu item from a dropdown, when it wants to
+// redispatch that event to the currently active item of that dropdown menu. It will
+// be used in situations where the event should be firing on the item with fake focus,
+// but instead it is firing on the item with real focus (e.g of real focus:
+// menu search field)
+const redirectMenuItemInteractionEvent = Id.generate('redirect-menu-item-interaction');
+
+export {
+  refetchTriggerEvent,
+  redirectMenuItemInteractionEvent
+};

package/src/themes/silver/main/ts/ui/menus/menu/searchable/SearchableMenuField.ts

@@ -0,0 +1,181 @@
+import { AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloySpec, AlloyTriggers, Behaviour, Input, Keying, NativeEvents, NativeSimulatedEvent, Representing } from '@ephox/alloy';
+import { Optional } from '@ephox/katamari';
+import { Attribute, EventArgs, SelectorFind } from '@ephox/sugar';
+
+import { UiFactoryBackstageProviders } from '../../../../backstage/Backstage';
+import { selectableClass as usualItemClass } from '../../item/ItemClasses';
+import { redirectMenuItemInteractionEvent, RedirectMenuItemInteractionEventData, refetchTriggerEvent } from './SearchableMenuEvents';
+
+export interface MenuSearcherSpec {
+  readonly placeholder: Optional<string>;
+  readonly i18n: UiFactoryBackstageProviders['translate'];
+}
+
+export interface MenuSearcherState {
+  readonly fetchPattern: string;
+  readonly selectionStart: number;
+  readonly selectionEnd: number;
+}
+
+// This is not stored in ItemClasses, because the searcher is not actually
+// contained within items. It isn't part of their navigation, and it
+// isn't maintained by menus. It is just part of the first menu, but
+// not its items.
+const menuSearcherClass = 'tox-menu__searcher';
+
+// Ideally, we'd be using mementos to find it again, but we'd need to pass
+// that memento onto the dropdown, which isn't going to have it. Especially,
+// because the dropdown isn't responsible for putting this searcher component
+// into the menu, NestedMenus is.
+export const findWithinSandbox = (sandboxComp: AlloyComponent): Optional<AlloyComponent> => {
+  return SelectorFind.descendant(sandboxComp.element, `.${menuSearcherClass}`).bind(
+    (inputElem) => sandboxComp.getSystem().getByDom(inputElem).toOptional()
+  );
+};
+
+// There is nothing sandbox-specific about this code. It just needs to be
+// a container that wraps the search field.
+export const findWithinMenu = findWithinSandbox;
+
+export const restoreState = (inputComp: AlloyComponent, searcherState: MenuSearcherState): void => {
+  Representing.setValue(inputComp, searcherState.fetchPattern);
+  inputComp.element.dom.selectionStart = searcherState.selectionStart;
+  inputComp.element.dom.selectionEnd = searcherState.selectionEnd;
+};
+
+export const saveState = (inputComp: AlloyComponent): MenuSearcherState => {
+  const fetchPattern = Representing.getValue(inputComp);
+  const selectionStart = inputComp.element.dom.selectionStart;
+  const selectionEnd = inputComp.element.dom.selectionEnd;
+  return {
+    fetchPattern,
+    selectionStart,
+    selectionEnd
+  };
+};
+
+// Make sure there is ARIA communicating the currently active item in the results.
+export const setActiveDescendant = (inputComp: AlloyComponent, active: AlloyComponent): void => {
+  Attribute.getOpt(active.element, 'id')
+    .each((id) => Attribute.set(inputComp.element, 'aria-activedescendant', id));
+};
+
+export const renderMenuSearcher = (spec: MenuSearcherSpec): AlloySpec => {
+
+  const handleByBrowser = (comp: AlloyComponent, se: NativeSimulatedEvent<KeyboardEvent>): Optional<boolean> => {
+    // We "cut" this event, so that the browser still handles it, but it is not processed
+    // by any of the above alloy components. We could also do this by stopping propagation,
+    // but not preventing default, but it's probably good to allow some overarching thing
+    // in the DOM (outside of alloy) to stop it if they want to.
+    se.cut();
+
+    // Returning a Some here (regardless of boolean value) is going to call `stop` on the
+    // simulated event, which is going to call: preventDefault and stopPropagation. We want
+    // neither of these things to happen, so we return None here to say that it hasn't been
+    // handled. But because we've cut it, it will not propagate to any other alloy components
+    return Optional.none();
+  };
+
+  const handleByHighlightedItem = (comp: AlloyComponent, se: NativeSimulatedEvent<KeyboardEvent>): Optional<boolean> => {
+    // Because we need to redispatch based on highlighted items that we don't know about here,
+    // we are going to emit an event, that the sandbox listens to, and the sandbox will
+    // redispatch the event.
+    const eventData: RedirectMenuItemInteractionEventData = {
+      interactionEvent: se.event,
+      eventType: se.event.raw.type
+    };
+
+    AlloyTriggers.emitWith(comp, redirectMenuItemInteractionEvent, eventData);
+    return Optional.some(true);
+  };
+
+  const customSearcherEventsName = 'searcher-events';
+
+  return {
+    dom: {
+      tag: 'div',
+      // NOTE: This is very intentionally NOT the navigation class, because
+      // we don't want the searcher to be part of the navigation. This class
+      // is just for styling consistency. Perhaps it should be its own class.
+      classes: [ usualItemClass ]
+    },
+    components: [
+      Input.sketch({
+        inputClasses: [ menuSearcherClass, 'tox-textfield' ],
+        inputAttributes: {
+          ...(spec.placeholder.map((placeholder) => (
+            { placeholder: spec.i18n(placeholder) }
+          )).getOr({ })),
+          // This ARIA is based on the algolia example documented in TINY-8952
+          'type': 'search',
+          'aria-autocomplete': 'list'
+        },
+        inputBehaviours: Behaviour.derive([
+          AddEventsBehaviour.config(customSearcherEventsName, [
+            // When the user types into the search field, we want to retrigger
+            // a fetch on the dropdown. This will be fired from within the
+            // dropdown's sandbox, so the dropdown is going to have to listen
+            // for it there. See CommonDropdown.ts.
+            AlloyEvents.run(
+              // Use "input" to handle keydown, paste etc.
+              NativeEvents.input(),
+              (inputComp) => {
+                AlloyTriggers.emit(inputComp, refetchTriggerEvent);
+              }
+            ),
+
+            AlloyEvents.run<EventArgs<KeyboardEvent>>(
+              NativeEvents.keydown(),
+              (inputComp, se) => {
+                // The Special Keying config type since TINY-7005 processes the Escape
+                // key on keyup, not keydown. We need to stop the keydown event for this
+                // input, because some browsers (e.g. Chrome) will process a keydown
+                // for Escape inside an input[type=search] by clearing the input value,
+                // and then triggering an "input" event. This "input" event will trigger
+                // a refetch, which if it completes before the keyup is fired for Escape,
+                // will go back to only showing one level of menu. Then, when the escape
+                // keyup is processed by Keying, it will close the single remaining menu.
+                // This has the effect of closing *all* menus that are open when Escape is
+                // pressed instead of the last one. So, instead, we are going to kill the
+                // keydown event, so that it doesn't have the default browser behaviour, and
+                // won't trigger an input (and then Refetch). Then the keyup will still fire
+                // so just one level of the menu will close. This is all based on the underlying
+                // assumption that preventDefault and/or stop on a keydown does not suppress
+                // the related keyup. All of the documentation found so far, suggests it should
+                // only suppress the keypress, not the keyup, but that might not be across all
+                // browsers, or implemented consistently.
+                if (se.event.raw.key === 'Escape') {
+                  se.stop();
+                }
+              }
+            )
+          ]),
+
+          // In addition to input handling, we want special handling for
+          // Up/Down/Left/Right/Enter/Escape/Space. We can divide these into two categories
+          //  - events that we don't want to allow the overall menu system to process (left and right and space)
+          //  - events that we want to redispatch on the "highlighted item" based on the
+          // current fake focus.
+          Keying.config({
+            mode: 'special',
+            onLeft: handleByBrowser,
+            onRight: handleByBrowser,
+            onSpace: handleByBrowser,
+            onEnter: handleByHighlightedItem,
+            onEscape: handleByHighlightedItem,
+            onUp: handleByHighlightedItem,
+            onDown: handleByHighlightedItem
+          })
+        ]),
+
+        // Because we have customised handling for keydown, and we are configuring
+        // Keying, we need to specify which "behaviour" (custom events or keying) gets to
+        // process the keydown event first. In this situation, we want to stop escape before
+        // anything happens (although it really isn't necessary)
+        eventOrder: {
+          keydown: [ customSearcherEventsName, Keying.name() ]
+        }
+      })
+    ]
+  };
+};

package/src/themes/silver/main/ts/ui/menus/menu/searchable/SearchableMenus.ts

@@ -0,0 +1,23 @@
+import { ItemTypes } from '@ephox/alloy';
+import { Id } from '@ephox/katamari';
+
+export const searchResultsClass = 'tox-collection--results__js';
+
+// NOTE: this is operating on the the final AlloySpec
+export const augmentWithAria = (item: ItemTypes.ItemSpec): ItemTypes.ItemSpec => {
+  if (item.dom) {
+    return {
+      ...item,
+      dom: {
+        ...item.dom,
+        attributes: {
+          ...item.dom.attributes ?? { },
+          'id': Id.generate('aria-item-search-result-id'),
+          'aria-selected': 'false'
+        }
+      }
+    };
+  } else {
+    return item;
+  }
+};