@eclipse-glsp/client 1.1.0-next.c40feb3.207 → 1.1.0-next.c5afbfa.273

package/src/features/accessibility/element-navigation/local-element-navigator.ts

@@ -0,0 +1,147 @@
+/********************************************************************************
+ * 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 { BoundsAware, EdgeRouterRegistry, SConnectableElement, SEdge, SModelElement, SModelRoot, TYPES } from '~glsp-sprotty';
+import { ElementNavigator } from './element-navigator';
+import { inject, injectable, optional } from 'inversify';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { applyCssClasses, deleteCssClasses } from '../../../base/feedback/css-feedback';
+import { SelectableBoundsAware } from '../../../utils/smodel-util';
+
+@injectable()
+export class LocalElementNavigator implements ElementNavigator {
+    navigableElementCSS = 'navigable-element';
+    @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
+    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
+
+    previous(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getPreviousElement(current, predicate);
+    }
+
+    next(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNextElement(current, predicate);
+    }
+
+    up(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getIterable(current, previousCurrent, predicate);
+    }
+
+    down(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getIterable(current, previousCurrent, predicate);
+    }
+
+    process(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        target: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): void {
+        let elements: SModelElement[] = [];
+
+        // Mark only edges
+        if (target instanceof SEdge) {
+            // If current is a edge, we have to check the source and target
+            if (current instanceof SEdge) {
+                elements = this.getIterables(target, current.source === target.source ? current.source : current.target, predicate);
+            } else {
+                // Otherwise take the current as it is
+                elements = this.getIterables(target, current, predicate);
+            }
+        }
+        elements.filter(e => e.id !== target.id).forEach(e => this.actionDispatcher.dispatch(applyCssClasses(e, this.navigableElementCSS)));
+    }
+
+    clean(root: Readonly<SModelRoot>, current?: SelectableBoundsAware, previousCurrent?: SelectableBoundsAware): void {
+        root.index.all().forEach(e => this.actionDispatcher.dispatch(deleteCssClasses(e, this.navigableElementCSS)));
+    }
+
+    protected getIterables(
+        current: SelectableBoundsAware,
+        previousCurrent?: SModelElement & BoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement[] {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SEdge) {
+            if (current.target === previousCurrent) {
+                current.target?.incomingEdges.forEach(e => elements.push(e));
+            } else {
+                current.source?.outgoingEdges.forEach(e => elements.push(e));
+            }
+        }
+
+        return elements.filter(predicate);
+    }
+
+    protected getIterable(
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        return this.getIterables(current, previousCurrent, predicate).filter(e => e.id !== current.id)[0];
+    }
+    protected getNextElement(
+        current: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SConnectableElement) {
+            current.outgoingEdges.forEach(e => elements.push(e));
+        } else if (current instanceof SEdge) {
+            const target = current.target as SModelElement;
+            elements.push(target);
+        }
+
+        return elements.filter(predicate)[0];
+    }
+
+    protected getPreviousElement(
+        current: SelectableBoundsAware,
+        predicate: (element: SModelElement) => boolean = () => true
+    ): SModelElement | undefined {
+        const elements: SModelElement[] = [];
+
+        if (current instanceof SConnectableElement) {
+            current.incomingEdges.forEach(e => elements.push(e));
+        } else if (current instanceof SEdge) {
+            const source = current.source as SModelElement;
+            elements.push(source);
+        }
+
+        return elements.filter(predicate)[0];
+    }
+}

package/src/features/accessibility/element-navigation/position-navigator.ts

@@ -0,0 +1,102 @@
+/********************************************************************************
+ * 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 { isBoundsAware, isSelectable, SChildElement, SModelElement, SModelRoot, SNode, TYPES, Bounds, Point } from '~glsp-sprotty';
+import { ElementNavigator } from './element-navigator';
+import { inject, injectable } from 'inversify';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import { SelectableBoundsAware } from '../../../utils/smodel-util';
+
+@injectable()
+export class PositionNavigator implements ElementNavigator {
+    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
+
+    previous(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).x < this.bounds(root, current).x);
+    }
+
+    next(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).x > this.bounds(root, current).x);
+    }
+
+    up(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).y < this.bounds(root, current).y);
+    }
+
+    down(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        previousCurrent?: SelectableBoundsAware,
+        predicate?: (element: SModelElement) => boolean
+    ): SModelElement | undefined {
+        return this.getNearestElement(root, current, e => this.bounds(root, e).y > this.bounds(root, current).y);
+    }
+
+    protected getNearestElement(
+        root: Readonly<SModelRoot>,
+        current: SelectableBoundsAware,
+        filter: (e: SelectableBoundsAware) => boolean
+    ): SModelElement | undefined {
+        const elements = this.boundElements(root).filter(filter);
+        return this.sortByDistance(root, current, elements)[0];
+    }
+
+    protected sortByDistance(root: SModelRoot, current: SelectableBoundsAware, elements: SelectableBoundsAware[]): SelectableBoundsAware[] {
+        // https://www.tutorialspoint.com/sort-array-of-points-by-ascending-distance-from-a-given-point-javascript
+        const distance = (coor1: Point, coor2: Point): number => {
+            const x = coor2.x - coor1.x;
+            const y = coor2.y - coor1.y;
+            return Math.sqrt(x * x + y * y);
+        };
+
+        return elements.sort(
+            (a, b) =>
+                distance(this.bounds(root, a), this.bounds(root, current)) - distance(this.bounds(root, b), this.bounds(root, current))
+        );
+    }
+
+    protected boundElements(root: Readonly<SModelRoot>): SelectableBoundsAware[] {
+        return toArray(root.index.all().filter(e => e instanceof SNode && isSelectable(e) && isBoundsAware(e))) as SelectableBoundsAware[];
+    }
+
+    protected bounds(root: Readonly<SModelRoot>, element: SelectableBoundsAware): Bounds {
+        return this.boundsInViewport(element, element.bounds, root);
+    }
+
+    protected boundsInViewport(element: SModelElement, bounds: Bounds, viewport: SModelRoot): Bounds {
+        if (element instanceof SChildElement && element.parent !== viewport) {
+            return this.boundsInViewport(element.parent, element.parent.localToParent(bounds) as Bounds, viewport);
+        } else {
+            return bounds;
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+/********************************************************************************
+ * 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 { ContainerModule } from 'inversify';
+import { FocusTrackerTool } from './focus-tracker-tool';
+import { BindingContext, TYPES, bindAsService } from '~glsp-sprotty';
+
+/**
+ * Handles actions for tracking the focus of the cursor.
+ */
+
+export const glspFocusTrackerModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureFocusTrackerTool(context);
+});
+
+export function configureFocusTrackerTool(context: BindingContext): void {
+    bindAsService(context, TYPES.IDefaultTool, FocusTrackerTool);
+}

package/src/features/accessibility/focus-tracker/focus-tracker-tool.ts

@@ -0,0 +1,129 @@
+/********************************************************************************
+ * 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 { TYPES, ViewerOptions } from '~glsp-sprotty';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { Tool } from '../../../base/tool-manager/tool';
+import * as messages from '../toast/messages.json';
+import { ShowToastMessageAction } from '../toast/toast-handler';
+
+@injectable()
+export class FocusTrackerTool implements Tool {
+    static ID = 'glsp.focus-tracker';
+
+    isEditTool = false;
+    @inject(TYPES.IActionDispatcher)
+    protected actionDispatcher: GLSPActionDispatcher;
+    @inject(TYPES.ViewerOptions)
+    protected readonly viewerOptions: ViewerOptions;
+
+    protected readonly focusInFunction = (event: FocusEvent): Promise<void> => this.focusIn(event);
+    protected readonly focusOutFunction = (event: FocusEvent): Promise<void> => this.focusOut(event);
+    protected registered = false;
+
+    get id(): string {
+        return FocusTrackerTool.ID;
+    }
+
+    enable(): void {
+        if (!this.registered) {
+            document.addEventListener('focusin', this.focusInFunction);
+            document.addEventListener('focusout', this.focusOutFunction);
+        }
+        this.registered = true;
+    }
+
+    disable(): void {
+        // the focus tracker cannot be disabled after enabling it
+    }
+
+    protected async focusOut(event: FocusEvent): Promise<void> {
+        await this.showToast('Focus not set');
+    }
+
+    protected async focusIn(event: FocusEvent): Promise<void> {
+        let message: string | undefined;
+        const target = event.target;
+
+        if (target instanceof HTMLElement) {
+            const parent = this.parentWithAriaLabel(target);
+            const textMessage = this.handleTextNode(target);
+            // eslint-disable-next-line no-null/no-null
+            if (target.ariaLabel !== null) {
+                message = this.handleAriaLabel(target);
+            } else {
+                if (parent === undefined && textMessage !== undefined) {
+                    message = textMessage;
+                } else if (parent !== undefined && textMessage === undefined) {
+                    message = `Focus is in ${parent.ariaLabel}`;
+                } else if (parent !== undefined && textMessage !== undefined) {
+                    message = `${parent.ariaLabel} -> ${textMessage}`;
+                }
+            }
+        }
+
+        await this.showToast(message);
+    }
+
+    protected handleTextNode(target: HTMLElement): string | undefined {
+        const textNode = Array.prototype.filter
+            .call(target.childNodes, element => element.nodeType === Node.TEXT_NODE)
+            .map(element => element.textContent)
+            .join('');
+
+        if (textNode.trim().length !== 0) {
+            return textNode;
+        }
+
+        return undefined;
+    }
+
+    protected handleAriaLabel(target: HTMLElement): string | undefined {
+        // eslint-disable-next-line no-null/no-null
+        return target.ariaLabel === null ? undefined : target.ariaLabel;
+    }
+
+    protected showToast(message?: string): Promise<void> {
+        return this.actionDispatcher.dispatchAll([
+            ShowToastMessageAction.create({
+                id: Symbol.for(FocusTrackerTool.ID),
+                message: `${messages.focus.focus_on} ${message ?? 'unknown'}`,
+                position: 'left'
+            })
+        ]);
+    }
+    protected parentWithAriaLabel(target: HTMLElement): HTMLElement | undefined {
+        let current = target.parentElement;
+
+        while (
+            // eslint-disable-next-line no-null/no-null
+            current !== null &&
+            current !== document.body &&
+            current !== document.getElementById(this.viewerOptions.baseDiv) &&
+            // eslint-disable-next-line no-null/no-null
+            current.ariaLabel === null
+        ) {
+            current = current.parentElement;
+        }
+
+        if (current === document.getElementById(this.viewerOptions.baseDiv) || current === document.body) {
+            return undefined;
+        }
+
+        return current ?? undefined;
+    }
+}

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, SModelElement, SetUIExtensionVisibilityAction, matchesKeystroke } from '~glsp-sprotty';
+import { BaseEditTool } from '../../tools/base-tools';
+import { KeyShortcutUIExtension } from './accessible-key-shortcut';
+
+@injectable()
+export class AccessibleKeyShortcutTool extends BaseEditTool {
+    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,197 @@
+/********************************************************************************
+ * 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');
+        groupTable.classList.add('shortcut-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('column-title');
+
+        commandCell.innerText = 'Command';
+        keybindingCell.innerText = 'Keybinding';
+
+        headerRow.appendChild(commandCell);
+        headerRow.appendChild(keybindingCell);
+        tableHead.appendChild(headerRow);
+
+        for (const [group, shortcuts] of Object.entries(grouped)) {
+            tableBody.appendChild(this.createGroupHeader(group));
+            shortcuts.forEach(s => {
+                tableBody.appendChild(this.createEntry(s));
+            });
+        }
+
+        groupTable.appendChild(tableHead);
+        groupTable.appendChild(tableBody);
+
+        this.shortcutsContainer.append(groupTable);
+    }
+
+    protected createGroupHeader(group: string): HTMLElement {
+        const entryRow = document.createElement('tr');
+        const groupElement = document.createElement('td');
+        const text = document.createElement('strong');
+        const emptyElement = document.createElement('td');
+
+        text.innerText = group;
+        groupElement.appendChild(text);
+        entryRow.appendChild(groupElement);
+        entryRow.appendChild(emptyElement);
+
+        return entryRow;
+    }
+
+    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();
+    }
+}