@eclipse-glsp/client 1.1.0-next.a07a5f7.197 → 1.1.0-next.a6d39b4.266

package/src/base/view/key-tool.ts

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { injectable } from 'inversify';
+import { Disposable, KeyListener, KeyTool } from '~glsp-sprotty';
+
+@injectable()
+export class GLSPKeyTool extends KeyTool {
+    registerListener(keyListener: KeyListener): Disposable {
+        super.register(keyListener);
+        return Disposable.create(() => this.deregister(keyListener));
+    }
+}

package/src/base/view/mouse-tool.ts

@@ -0,0 +1,105 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { injectable, multiInject, optional } from 'inversify';
+import { Action, Disposable, MouseListener, MouseTool, SModelElement, SModelRoot, TYPES } from '~glsp-sprotty';
+import { Ranked } from '../ranked';
+
+/**
+ * Custom helper type to declare the explicit mouse listener methods
+ * of {@link MouseListener} i.e. omitting the `decorate` method.
+ */
+type MouseListenerMethods = keyof Omit<MouseListener, 'decorate'>;
+
+@injectable()
+export class GLSPMouseTool extends MouseTool {
+    protected rankedMouseListeners: Map<number, MouseListener[]>;
+
+    constructor(@multiInject(TYPES.MouseListener) @optional() protected override mouseListeners: MouseListener[] = []) {
+        super(mouseListeners);
+        this.rankedMouseListeners = groupBy(mouseListeners, listener => Ranked.getRank(listener));
+    }
+
+    override register(mouseListener: MouseListener): void {
+        super.register(mouseListener);
+        this.rankedMouseListeners = groupBy(this.mouseListeners, listener => Ranked.getRank(listener));
+    }
+
+    registerListener(mouseListener: MouseListener): Disposable {
+        this.register(mouseListener);
+        return Disposable.create(() => this.deregister(mouseListener));
+    }
+
+    override deregister(mouseListener: MouseListener): void {
+        super.deregister(mouseListener);
+        this.rankedMouseListeners = groupBy(this.mouseListeners, listener => Ranked.getRank(listener));
+    }
+
+    protected override handleEvent<K extends MouseListenerMethods>(methodName: K, model: SModelRoot, event: MouseEvent): void {
+        this.focusOnMouseEvent(methodName, model);
+        const element = this.getTargetElement(model, event);
+        if (!element) {
+            return;
+        }
+        this.notifyListenersByRank(element, methodName, event);
+    }
+
+    protected async notifyListenersByRank<K extends MouseListenerMethods>(
+        element: SModelElement,
+        methodName: K,
+        event: MouseEvent
+    ): Promise<void> {
+        for (const rank of this.rankedMouseListeners) {
+            await this.dispatchActions(rank[1], methodName, element, event);
+        }
+    }
+
+    protected async dispatchActions<K extends MouseListenerMethods>(
+        mouseListeners: MouseListener[],
+        methodName: K,
+        element: SModelElement,
+        event: MouseEvent
+    ): Promise<void> {
+        const actions = mouseListeners.map(listener => listener[methodName](element, event as WheelEvent)).reduce((a, b) => a.concat(b));
+        if (actions.length > 0) {
+            event.preventDefault();
+            for (const actionOrPromise of actions) {
+                if (Action.is(actionOrPromise)) {
+                    await this.actionDispatcher.dispatch(actionOrPromise);
+                } else {
+                    actionOrPromise.then((action: Action) => {
+                        this.actionDispatcher.dispatch(action);
+                    });
+                }
+            }
+        }
+    }
+}
+
+function groupBy<K, T>(array: Array<T>, keyFunction: (x: T) => K): Map<K, T[]> {
+    const unsortedMap = array.reduce((result: Map<K, T[]>, item: T) => {
+        const key = keyFunction(item);
+        if (!result.has(key)) {
+            result.set(key, [item]);
+        } else {
+            const entries = result.get(key);
+            if (entries) {
+                entries.push(item);
+            }
+        }
+        return result;
+    }, new Map<K, T[]>());
+    return new Map<K, T[]>([...unsortedMap.entries()].sort());
+}

package/src/base/view/view-registry.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021-2022 EclipseSource and others.
+ * Copyright (c) 2019-2023 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import { IView, ViewRegistry } from 'sprotty';
+import { IView, ViewRegistry } from '~glsp-sprotty';
 
 @injectable()
 export class GLSPViewRegistry extends ViewRegistry {

package/src/default-modules.ts

@@ -0,0 +1,164 @@
+/********************************************************************************
+ * Copyright (c) 2021-2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Container, ContainerModule } from 'inversify';
+import {
+    ContainerConfiguration,
+    FeatureModule,
+    buttonModule,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    fadeModule,
+    labelEditUiModule,
+    modelSourceModule,
+    resolveContainerConfiguration,
+    zorderModule
+} from '~glsp-sprotty';
+import { defaultModule } from './base/default.module';
+import { boundsModule } from './features/bounds/bounds-module';
+import { commandPaletteModule } from './features/command-palette/command-palette-module';
+import { contextMenuModule } from './features/context-menu/context-menu-module';
+import { copyPasteModule } from './features/copy-paste/copy-paste-modules';
+import { decorationModule } from './features/decoration/decoration-module';
+import { exportModule } from './features/export/export-modules';
+import { typeHintsModule } from './features/hints/type-hints-module';
+import { hoverModule } from './features/hover/hover-module';
+import { labelEditModule } from './features/label-edit/label-edit-module';
+import { layoutModule } from './features/layout/layout-module';
+import { navigationModule } from './features/navigation/navigation-module';
+import { routingModule } from './features/routing/routing-module';
+import { selectModule } from './features/select/select-module';
+import { sourceModelWatcherModule } from './features/source-model-watcher/source-model-wacher-module';
+import { statusModule } from './features/status/status-module';
+import { svgMetadataModule } from './features/svg-metadata/svg-metadata-module';
+import { toolPaletteModule } from './features/tool-palette/tool-palette-module';
+import { changeBoundsToolModule } from './features/tools/change-bounds/change-boounds-tool-module';
+import { deletionToolModule } from './features/tools/deletion/deletion-tool-module';
+import { edgeCreationToolModule } from './features/tools/edge-creation/edege-creation-module';
+import { edgeEditToolModule } from './features/tools/edge-edit/edge-edit-module';
+import { marqueeSelectionToolModule } from './features/tools/marquee-selection/marquee-selection-module';
+import { nodeCreationToolModule } from './features/tools/node-creation/node-creation-module';
+import { toolFocusLossModule } from './features/tools/tool-focus-loss-module';
+import { markerNavigatorModule, validationModule } from './features/validation/validation-modules';
+import { viewportModule } from './features/viewport/viewport-modules';
+
+export const DEFAULT_MODULES = [
+    defaultModule,
+    buttonModule,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    exportModule,
+    fadeModule,
+    boundsModule,
+    commandPaletteModule,
+    contextMenuModule,
+    decorationModule,
+    labelEditModule,
+    hoverModule,
+    selectModule,
+    copyPasteModule,
+    viewportModule,
+    labelEditUiModule,
+    layoutModule,
+    markerNavigatorModule,
+    typeHintsModule,
+    modelSourceModule,
+    sourceModelWatcherModule,
+    navigationModule,
+    routingModule,
+    toolPaletteModule,
+    edgeCreationToolModule,
+    edgeEditToolModule,
+    deletionToolModule,
+    nodeCreationToolModule,
+    changeBoundsToolModule,
+    marqueeSelectionToolModule,
+    toolFocusLossModule,
+    validationModule,
+    zorderModule,
+    svgMetadataModule,
+    statusModule
+] as const;
+
+/**
+ *  Initializes a GLSP Diagram container with the GLSP default modules and the specified custom `modules`.
+ *  Additional modules can be passed as direct arguments or as part of a {@link ModuleConfiguration}.
+ *  ```typescript
+ *  const container= createDiagramContainer(myModule1, myModule2)
+ *  // or
+ *  const container= createDiagramContainer({ add: [myModule1, myModule2]})
+ *  ```
+ *  Default modules can be excluded using {@link ModuleConfiguration}s.
+ *  This means, you can still customize the default modules in two ways.
+ *
+ * First, you can exclude default modules and add a module with your custom code.
+ *
+ * ```typescript
+ * const container = createDiagramContainer({ add:myModelSourceWatcherModule, remove: modelSourceWatcherModule} );
+ * ```
+ *
+ * Second, you can unbind or rebind implementations that are originally bound in one of the default modules.
+ *
+ * ```typescript
+ * rebind(NavigationTargetResolver).to(MyNavigationTargetResolver);
+ * ```
+ * @param container The container that should be initialized
+ * @param containerConfigurations
+ *          Custom modules to be loaded in addition to the default modules and/or default modules that should be excluded.
+ * @throws An error if the first module to load is not the `defaultModule` (or an equivalent custom replacement module)
+ * @returns The initialized container.
+ */
+export function initializeDiagramContainer(container: Container, ...containerConfigurations: ContainerConfiguration): Container {
+    const modules = resolveContainerConfiguration(...DEFAULT_MODULES, ...containerConfigurations);
+    // The `defaultModule` (or a custom replacement module with the same `featureId`) should be the first module that is
+    // loaded into the container
+    const firstModule = modules[0];
+    if (!firstModule || !(firstModule instanceof FeatureModule && firstModule.featureId === defaultModule.featureId)) {
+        throw new Error(
+            'Invalid module configuration. The first module to load should be the `defaultModule` (or an equivalent replacement module)'
+        );
+    }
+    container.load(...modules);
+    return container;
+}
+
+/**
+ * Creates a GLSP Client container with the GLSP default modules and the specified custom `modules`.
+ *
+ * You can still customize the default modules in two ways.
+ *
+ * First, you can unload default modules and load them again with your custom code.
+ *
+ * ```typescript
+ * const container = createClientContainer(myModule1, myModule2);
+ * container.unload(modelSourceWatcherModule);
+ * container.load(myModelSourceWatcherModule);
+ * ```
+ *
+ * Second, you can unbind or rebind implementations that are originally bound in one of the default modules.
+ *
+ * ```typescript
+ * rebind(NavigationTargetResolver).to(MyNavigationTargetResolver);
+ * ```
+ * @param modules Custom modules to be loaded in addition to the default modules.
+ * @returns The created container.
+ * @deprecated Please use `initializeDiagramContainer` from `@eclipse-glsp/client` instead
+ */
+export function createClientContainer(...modules: ContainerModule[]): Container {
+    return initializeDiagramContainer(new Container(), ...modules);
+}

package/src/features/accessibility/README.md

@@ -0,0 +1,65 @@
+# Keyboard-Only: Accessibility Features
+
+The features presented in the following are introduced for disability-aware conceptual modeling and allow basic user model interactions to be performed only with the keyboard.
+
+## Getting started
+
+In order to activate and use all of the currently provided keyboard only accessibility features, the module `accessibilityModule` needs to be in use.
+To activate and use only specific accessibility features, the respective module (see list below) needs to be in use.
+
+## Features
+
+Below is a list of the keyboard only accessibility features:<br>
+
+| Feature |                                           Description                                            |                                             Shortcut                                              |        Module         |
+| ------- | :----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: | :-------------------: |
+| Search  | Search for elements or edges using labels, types, etc. <br> with respective diagram highlighting |                                   <kbd>CTRL</kbd>+<kbd>F</kbd>                                    | `searchPaletteModule` |
+| Move    |                       Move elements, edges or viewport into the directions                       |                <kbd>←</kbd> \|\| <kbd>↑</kbd> \|\| <kbd>→</kbd> \|\| <kbd>↓</kbd>                 |   `moveZoomModule`    |
+| Zoom    |         Zoom in or out gradually to elements or viewport or reset to default zoom level.         |                 <kbd>+</kbd> \|\| <kbd>-</kbd> \|\| <kbd>CTRL</kbd>+<kbd>0</kbd>                  |   `moveZoomModule`    |
+| Resize  |          Increase or decrease element sizes gradually or reset to default element size.          | <kbd>ALT</kbd>+<kbd>A</kbd> then <kbd>+</kbd> \|\| <kbd>-</kbd> \|\| <kbd>CTRL</kbd>+<kbd>0</kbd> |   `resizeKeyModule`   |
+
+## Usage
+
+#### Search
+
+The search palette allows to search labelled elements or edges that have a labelled node as source or target. The result set will be highlighted accordingly, to also be able to visually distinguish between the searched and the remaining parts of the given diagram.
+
+#### Read / Select via Search
+
+1. <kbd>CTRL</kbd> + <kbd>F</kbd>: Open the search palette
+2. In the palette's input field enter either the **type** or the **label** of nodes or edges. The arrow keys can be used to navigate in the search result list.
+3. <kbd>ENTER</kbd>: Select the node or edge that is highlighted in the search result list.
+
+### Model Exploration
+
+#### Move
+
+The move functionality can be used to move parts of the model, such as selected nodes or edges or the whole viewport in all directions.
+
+##### Steps
+
+1. Select one or multiple elements or the viewport.
+2. Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to move element(s) or viewport to the desired location.
+
+#### Zoom
+
+This zoom functionality can be used to gradually adapt the zoom level of one element, a set of elements or the
+viewport.
+
+#### Steps
+
+1. Select one or multiple elements or the viewport.
+2. Use <kbd>+</kbd> or <kbd>-</kbd> to zoom in or out gradually.
+3. <kbd>CTRL</kbd>+<kbd>0</kbd>: Set the zoom level to default.
+
+### Resize element
+
+The resize functionality helps to set the size of the nodes, by either increasing or decreasing the size of the nodes’ shape gradually.
+
+#### Steps
+
+1. Select one or multiple elements.
+2. <kbd>ALT</kbd>+<kbd>A</kbd>: Activate the resize mode.
+3. <kbd>+</kbd> or <kbd>-</kbd> to increase or decrease the size of the element(s) gradually.
+4. <kbd>CTRL</kbd>+<kbd>0</kbd>: Set the size of the element(s) to default.
+5. <kbd>ESC</kbd>: Deactivate the resize mode.

package/src/features/accessibility/accessibility-module.ts

@@ -0,0 +1,34 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { FeatureModule } from '~glsp-sprotty';
+import { configureShortcutHelpTool } from './key-shortcut/di.config';
+import { configureMoveZoom } from './move-zoom/move-zoom-module';
+import { configureResizeTools } from './resize-key-tool/resize-key-module';
+import { configureSearchPaletteModule } from './search/search-palette-module';
+import { configureViewKeyTools } from './view-key-tools/view-key-tools-module';
+
+/**
+ * Enables the accessibility tools for a keyboard-only-usage
+ */
+export const accessibilityModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureResizeTools(context);
+    configureViewKeyTools(context);
+    configureMoveZoom(context);
+    configureSearchPaletteModule(context);
+    configureShortcutHelpTool(context);
+});

package/src/features/accessibility/key-shortcut/accessible-key-shortcut-tool.ts

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { inject, injectable } from 'inversify';
+import { Action, KeyListener, KeyTool, matchesKeystroke, SetUIExtensionVisibilityAction, SModelElement } from '~glsp-sprotty';
+import { BaseGLSPTool } from '../../tools/base-glsp-tool';
+import { KeyShortcutUIExtension } from './accessible-key-shortcut';
+
+@injectable()
+export class AccessibleKeyShortcutTool extends BaseGLSPTool {
+    static ID = 'accessible-key-shortcut-tool';
+
+    @inject(KeyTool) protected readonly keytool: KeyTool;
+
+    protected shortcutKeyListener = new AccessibleShortcutKeyListener();
+
+    get id(): string {
+        return AccessibleKeyShortcutTool.ID;
+    }
+
+    enable(): void {
+        this.keytool.register(this.shortcutKeyListener);
+    }
+
+    override disable(): void {
+        this.keytool.deregister(this.shortcutKeyListener);
+    }
+}
+
+export class AccessibleShortcutKeyListener extends KeyListener {
+    protected readonly token = Symbol(AccessibleShortcutKeyListener.name);
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+        if (this.matchesActivateShortcutHelpKeystroke(event)) {
+            return [SetUIExtensionVisibilityAction.create({ extensionId: KeyShortcutUIExtension.ID, visible: true })];
+        }
+        return [];
+    }
+
+    protected matchesActivateShortcutHelpKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'KeyH', 'alt');
+    }
+}

package/src/features/accessibility/key-shortcut/accessible-key-shortcut.ts

@@ -0,0 +1,182 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable } from 'inversify';
+import { groupBy } from 'lodash';
+import { AbstractUIExtension, Action, IActionHandler, ICommand, matchesKeystroke, SModelRoot } from '~glsp-sprotty';
+
+export interface AccessibleKeyShortcutProvider {
+    registerShortcutKey(): void;
+}
+
+export interface AccessibleKeyShortcut {
+    shortcuts: string[];
+    description: string;
+    group: string;
+    position: number;
+}
+
+export interface SetAccessibleKeyShortcutAction extends Action {
+    kind: typeof SetAccessibleKeyShortcutAction.KIND;
+    token: string;
+    keys: AccessibleKeyShortcut[];
+}
+
+export namespace SetAccessibleKeyShortcutAction {
+    export const KIND = 'setAccessibleKeyShortcut';
+
+    export function is(object: any): object is SetAccessibleKeyShortcutAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: { token: string; keys: AccessibleKeyShortcut[] }): SetAccessibleKeyShortcutAction {
+        return { kind: KIND, token: options.token, keys: options.keys };
+    }
+}
+
+@injectable()
+export class KeyShortcutUIExtension extends AbstractUIExtension implements IActionHandler {
+    static readonly ID = 'key-shortcut';
+    protected container: HTMLDivElement;
+    protected shortcutsContainer: HTMLDivElement;
+    protected registrations: Record<string, AccessibleKeyShortcut[]> = {};
+
+    handle(action: Action): ICommand | Action | void {
+        if (SetAccessibleKeyShortcutAction.is(action)) {
+            this.registrations[action.token] = action.keys;
+            if (this.containerElement) {
+                this.refreshUI();
+            }
+        }
+    }
+    id(): string {
+        return KeyShortcutUIExtension.ID;
+    }
+
+    containerClass(): string {
+        return KeyShortcutUIExtension.ID;
+    }
+
+    override show(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        super.show(root, ...contextElementIds);
+        this.shortcutsContainer.focus();
+    }
+
+    protected refreshUI(): void {
+        this.shortcutsContainer.innerHTML = '';
+
+        const registrations = Object.values(this.registrations).flatMap(r => r);
+        registrations.sort((a, b) => {
+            if (a.group < b.group) {
+                return -1;
+            }
+            if (a.group > b.group) {
+                return 1;
+            }
+
+            return a.position - b.position;
+        });
+
+        const grouped = groupBy(registrations, k => k.group);
+
+        const groupTable = document.createElement('table');
+        const tableHead = document.createElement('thead');
+        const tableBody = document.createElement('tbody');
+
+        const headerRow = document.createElement('tr');
+        const commandCell = document.createElement('th');
+        const keybindingCell = document.createElement('th');
+
+        commandCell.classList.add('columnTitle');
+        commandCell.classList.add('columnTitle');
+
+        commandCell.innerText = 'Command';
+        keybindingCell.innerText = 'Keybinding';
+
+        headerRow.appendChild(commandCell);
+        headerRow.appendChild(keybindingCell);
+        tableHead.appendChild(headerRow);
+
+        for (const [, shortcuts] of Object.entries(grouped)) {
+            shortcuts.forEach(s => {
+                tableBody.appendChild(this.createEntry(s));
+            });
+        }
+
+        groupTable.appendChild(tableHead);
+        groupTable.appendChild(tableBody);
+
+        this.shortcutsContainer.append(groupTable);
+    }
+
+    protected getShortcutHTML(shortcuts: string[]): HTMLElement {
+        const shortcutKeys = document.createElement('span');
+        shortcutKeys.innerHTML = shortcuts.map(key => `<kbd>${key}</kbd>`).join(' + ');
+
+        return shortcutKeys;
+    }
+
+    protected createEntry(registration: AccessibleKeyShortcut): HTMLDivElement {
+        const entryRow = document.createElement('tr');
+        const shortcutElement = document.createElement('td');
+        const descElement = document.createElement('td');
+
+        const shortcut = this.getShortcutHTML(registration.shortcuts);
+        descElement.innerText = registration.description;
+
+        shortcutElement.appendChild(shortcut);
+        entryRow.appendChild(descElement);
+        entryRow.appendChild(shortcutElement);
+
+        return entryRow;
+    }
+
+    protected initializeContents(containerElement: HTMLElement): void {
+        this.container = document.createElement('div');
+        this.container.classList.add('keyboard-shortcuts-menu');
+
+        // create title
+        const menuTitle = document.createElement('h3');
+        menuTitle.classList.add('menu-header');
+        menuTitle.innerText = 'Keyboard Shortcuts';
+        this.container.appendChild(menuTitle);
+
+        const closeBtn = document.createElement('button');
+        closeBtn.id = 'key-shortcut-close-btn';
+        closeBtn.textContent = 'x';
+        closeBtn.addEventListener('click', () => {
+            this.hide();
+        });
+
+        this.container.appendChild(closeBtn);
+
+        // create shortcuts container
+        this.shortcutsContainer = document.createElement('div');
+        this.shortcutsContainer.classList.add('keyboard-shortcuts-container');
+        this.shortcutsContainer.tabIndex = 30;
+        this.shortcutsContainer.addEventListener('keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Escape' || matchesKeystroke(event, 'KeyH', 'alt')) {
+                this.hide();
+            }
+        });
+
+        this.container.appendChild(this.shortcutsContainer);
+        containerElement.appendChild(this.container);
+        containerElement.ariaLabel = 'Shortcut-Menu';
+
+        this.refreshUI();
+    }
+}