@eclipse-glsp/client 2.4.0-next.414 → 2.4.0-next.416

package/src/features/accessibility/keyboard-tool-palette/keyboard-tool-palette.ts

@@ -26,28 +26,18 @@ import {
     TriggerNodeCreationAction
 } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
+import { messages } from '../../../base/messages';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../../base/tool-manager/tool';
-import {
-    changeCodiconClass,
-    compare,
-    createIcon,
-    createToolGroup,
-    EnableToolPaletteAction,
-    ToolPalette
-} from '../../tool-palette/tool-palette';
+import { compare, createIcon, createToolGroup, EnableToolPaletteAction, ToolPalette } from '../../tool-palette/tool-palette';
 import { MouseDeleteTool } from '../../tools/deletion/delete-tool';
 import { MarqueeMouseTool } from '../../tools/marquee-selection/marquee-mouse-tool';
 import { FocusDomAction } from '../actions';
 import { EdgeAutocompletePaletteMetadata } from '../edge-autocomplete/edge-autocomplete-palette';
 import { ElementNavigatorKeyListener } from '../element-navigation/diagram-navigation-tool';
 import { KeyboardNodeGridMetadata } from '../keyboard-grid/constants';
-import * as messages from '../toast/messages.json';
 import { ShowToastMessageAction } from '../toast/toast-handler';
 
 const SEARCH_ICON_ID = 'search';
-const PALETTE_ICON_ID = 'tools';
-const CHEVRON_DOWN_ICON_ID = 'chevron-right';
-const PALETTE_HEIGHT = '500px';
 const SELECTION_TOOL_KEY: KeyCode[] = ['Digit1', 'Numpad1'];
 const DELETION_TOOL_KEY: KeyCode[] = ['Digit2', 'Numpad2'];
 const MARQUEE_TOOL_KEY: KeyCode[] = ['Digit3', 'Numpad3'];
@@ -103,9 +93,10 @@ export class KeyboardToolPalette extends ToolPalette {
     }
 
     protected override initializeContents(_containerElement: HTMLElement): void {
-        this.containerElement.setAttribute('aria-label', 'Tool Palette');
+        this.containerElement.setAttribute('aria-label', messages.tool_palette.label);
         this.containerElement.tabIndex = 20;
         this.containerElement.classList.add('accessibility-tool-palette');
+        this.addMinimizePaletteButton();
         this.createHeader();
         this.createBody();
         this.lastActiveButton = this.defaultToolsButton;
@@ -147,31 +138,6 @@ export class KeyboardToolPalette extends ToolPalette {
         }
     }
 
-    protected override addMinimizePaletteButton(): void {
-        const baseDiv = document.getElementById(this.options.baseDiv);
-        const minPaletteDiv = document.createElement('div');
-        minPaletteDiv.classList.add('minimize-palette-button');
-        this.containerElement.classList.add('collapsible-palette');
-        if (baseDiv) {
-            const insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
-            const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
-            this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-            minimizeIcon.onclick = _event => {
-                if (this.isPaletteMaximized()) {
-                    this.containerElement.style.overflow = 'hidden';
-                    this.containerElement.style.maxHeight = '0px';
-                } else {
-                    this.containerElement.style.overflow = 'visible';
-                    this.containerElement.style.maxHeight = PALETTE_HEIGHT;
-                }
-                this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-                changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
-                changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
-            };
-            insertedDiv.appendChild(minimizeIcon);
-        }
-    }
-
     protected override createBody(): void {
         const bodyDiv = document.createElement('div');
         bodyDiv.classList.add('palette-body');
@@ -199,11 +165,11 @@ export class KeyboardToolPalette extends ToolPalette {
 
         if (this.paletteItems.length === 0) {
             const noResultsDiv = document.createElement('div');
-            noResultsDiv.innerText = 'No results found.';
+            noResultsDiv.innerText = messages.tool_palette.no_items;
             noResultsDiv.classList.add('tool-button');
             bodyDiv.appendChild(noResultsDiv);
         }
-        // Remove existing body to refresh filtered entries
+        // Replace existing body to refresh filtered entries
         if (this.bodyDiv) {
             this.containerElement.removeChild(this.bodyDiv);
         }
@@ -261,7 +227,7 @@ export class KeyboardToolPalette extends ToolPalette {
     protected override createDefaultToolButton(): HTMLElement {
         const button = createIcon('inspect');
         button.id = 'btn_default_tools';
-        button.title = 'Enable selection tool';
+        button.title = messages.tool_palette.selection_button;
         button.onclick = this.onClickStaticToolButton(button);
         button.appendChild(this.createKeyboardShotcut(SELECTION_TOOL_KEY[0]));
 
@@ -270,7 +236,7 @@ export class KeyboardToolPalette extends ToolPalette {
 
     protected override createMouseDeleteToolButton(): HTMLElement {
         const deleteToolButton = createIcon('chrome-close');
-        deleteToolButton.title = 'Enable deletion tool';
+        deleteToolButton.title = messages.tool_palette.delete_button;
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
         deleteToolButton.appendChild(this.createKeyboardShotcut(DELETION_TOOL_KEY[0]));
 
@@ -279,10 +245,10 @@ export class KeyboardToolPalette extends ToolPalette {
 
     protected override createMarqueeToolButton(): HTMLElement {
         const marqueeToolButton = createIcon('screen-full');
-        marqueeToolButton.title = 'Enable marquee tool';
+        marqueeToolButton.title = messages.tool_palette.marquee_button;
         const toastMessageAction = ShowToastMessageAction.createWithTimeout({
             id: Symbol.for(ElementNavigatorKeyListener.name),
-            message: messages.tool_palette.marqueeTool
+            message: messages.tool_palette.marquee_message
         });
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID, toastMessageAction);
         marqueeToolButton.appendChild(this.createKeyboardShotcut(MARQUEE_TOOL_KEY[0]));
@@ -292,7 +258,7 @@ export class KeyboardToolPalette extends ToolPalette {
 
     protected override createValidateButton(): HTMLElement {
         const validateToolButton = createIcon('pass');
-        validateToolButton.title = 'Validate model';
+        validateToolButton.title = messages.tool_palette.validate_button;
         validateToolButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
             this.actionDispatcher.dispatch(RequestMarkersAction.create(modelIds));
@@ -330,7 +296,7 @@ export class KeyboardToolPalette extends ToolPalette {
             }
         };
         searchIcon.classList.add('search-icon');
-        searchIcon.title = 'Filter palette entries';
+        searchIcon.title = messages.tool_palette.search_button;
         searchIcon.appendChild(this.createKeyboardShotcut(SEARCH_TOOL_KEY[0]));
 
         return searchIcon;
@@ -342,7 +308,7 @@ export class KeyboardToolPalette extends ToolPalette {
         searchField.tabIndex = 21;
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = 'Search...';
+        searchField.placeholder = messages.tool_palette.search_placeholder;
         searchField.style.display = 'none';
         searchField.onkeyup = ev => {
             this.requestFilterUpdate(this.searchField.value);

package/src/features/accessibility/search/search-palette.ts

@@ -34,6 +34,7 @@ import { BaseAutocompletePalette } from '../../../base/auto-complete/base-autoco
 
 import { AutocompleteSuggestion, IAutocompleteSuggestionProvider } from '../../../base/auto-complete/autocomplete-suggestion-providers';
 import { applyCssClasses, deleteCssClasses } from '../../../base/feedback/css-feedback';
+import { messages } from '../../../base/messages';
 import { RepositionAction } from '../../../features/viewport/reposition';
 import { GEdge } from '../../../model';
 
@@ -121,8 +122,8 @@ export class SearchAutocompletePalette extends BaseAutocompletePalette {
     protected override initializeContents(containerElement: HTMLElement): void {
         super.initializeContents(containerElement);
 
-        this.autocompleteWidget.inputField.placeholder = 'Search for elements';
-        containerElement.setAttribute('aria-label', 'Search Field');
+        this.autocompleteWidget.inputField.placeholder = messages.search.placeholder;
+        containerElement.setAttribute('aria-label', messages.search.label);
     }
     protected getSuggestionProviders(root: Readonly<GModelRoot>, input: string): IAutocompleteSuggestionProvider[] {
         return [

package/src/features/accessibility/search/search-tool.ts

@@ -16,6 +16,7 @@
 
 import { Action, GModelElement, KeyListener, matchesKeystroke, SetUIExtensionVisibilityAction, TYPES } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { messages, repeatOnMessagesUpdated } from '../../../base/messages';
 import type { IShortcutManager } from '../../../base/shortcuts/shortcuts-manager';
 import { BaseTool } from '../../tools/base-tools';
 import { SearchAutocompletePalette } from './search-palette';
@@ -36,9 +37,16 @@ export class SearchAutocompletePaletteTool extends BaseTool {
     enable(): void {
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(this.keyListener),
-            this.shortcutManager.register(SearchAutocompletePaletteTool.TOKEN, [
-                { shortcuts: ['CTRL', 'F'], description: 'Activate search for elements', group: 'Search', position: 0 }
-            ])
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(SearchAutocompletePaletteTool.TOKEN, [
+                    {
+                        shortcuts: ['CTRL', 'F'],
+                        description: messages.search.shortcut_activate,
+                        group: messages.shortcut.group_search,
+                        position: 0
+                    }
+                ])
+            )
         );
     }
 }

package/src/features/accessibility/view-key-tools/grid-cell-zoom-key-tool.ts

@@ -28,6 +28,7 @@ import {
     matchesKeystroke
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { messages, repeatOnMessagesUpdated } from '../../../base/messages';
 import { SelectionService } from '../../../base/selection-service';
 import type { IShortcutManager } from '../../../base/shortcuts/shortcuts-manager';
 import { getAbsolutePositionByPoint } from '../../../utils/viewpoint-util';
@@ -35,7 +36,6 @@ import { BaseTool } from '../../tools/base-tools';
 import type { ZoomFactors } from '../../viewport/zoom-viewport-action';
 import { ElementNavigatorKeyListener } from '../element-navigation/diagram-navigation-tool';
 import { EnableKeyboardGridAction, KeyboardGridCellSelectedAction, KeyboardGridKeyboardEventAction } from '../keyboard-grid/action';
-import * as messages from '../toast/messages.json';
 import { HideToastAction, ShowToastMessageAction } from '../toast/toast-handler';
 
 /**
@@ -59,9 +59,16 @@ export class GridCellZoomTool extends BaseTool {
     enable(): void {
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(this.zoomKeyListener),
-            this.shortcutManager.register(GridCellZoomTool.TOKEN, [
-                { shortcuts: ['CTRL', '+'], description: 'Zoom in via Grid', group: 'Zoom', position: 0 }
-            ])
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(GridCellZoomTool.TOKEN, [
+                    {
+                        shortcuts: ['CTRL', '+'],
+                        description: messages.grid.shortcut_zoom_in,
+                        group: messages.shortcut.group_zoom,
+                        position: 0
+                    }
+                ])
+            )
         );
     }
 

package/src/features/change-bounds/resize/resize-default-tool.ts

@@ -16,6 +16,7 @@
 
 import { KeyListener, matchesKeystroke, TYPES, type Action, type GModelElement, type IActionDispatcher } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { messages, repeatOnMessagesUpdated } from '../../../base/messages';
 import { SelectionService } from '../../../base/selection-service';
 import type { ShortcutManager } from '../../../base/shortcuts/shortcuts-manager';
 import { EnableToolsAction } from '../../../base/tool-manager/tool';
@@ -67,9 +68,16 @@ export class DefaultResizeKeyTool extends BaseEditTool {
     enable(): void {
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(this.keyListener),
-            this.shortcutManager.register(DefaultResizeKeyTool.TOKEN, [
-                { shortcuts: ['ALT', 'A'], description: 'Activate resize mode for selected element', group: 'Resize', position: 0 }
-            ])
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(DefaultResizeKeyTool.TOKEN, [
+                    {
+                        shortcuts: ['ALT', 'A'],
+                        description: messages.resize.shortcut_activate,
+                        group: messages.shortcut.group_resize,
+                        position: 0
+                    }
+                ])
+            )
         );
     }
 }

package/src/features/change-bounds/resize/resize-tool.ts

@@ -17,9 +17,9 @@
 import { KeyListener, matchesKeystroke, TYPES, type Action, type GModelElement } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
 import { Disposable } from 'vscode-jsonrpc';
+import { messages, repeatOnMessagesUpdated } from '../../../base/messages';
 import { SelectionService } from '../../../base/selection-service';
 import type { ShortcutManager } from '../../../base/shortcuts/shortcuts-manager';
-import * as messages from '../../accessibility/toast/messages.json';
 import { ShowToastMessageAction } from '../../accessibility/toast/toast-handler';
 import { BaseEditTool } from '../../tools/base-tools';
 import { isResizable } from '../model';
@@ -100,12 +100,34 @@ export class ResizeKeyTool extends BaseEditTool {
 
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(this.keyListener),
-            this.shortcutManager.register(ResizeKeyTool.TOKEN, [
-                { shortcuts: ['Escape'], description: 'Deactivate resize handler ', group: 'Resize', position: 0 },
-                { shortcuts: ['+'], description: 'Increase size of element', group: 'Resize', position: 1 },
-                { shortcuts: ['-'], description: 'Increase size of element', group: 'Resize', position: 2 },
-                { shortcuts: ['CTRL', '0'], description: 'Set element size to default', group: 'Resize', position: 3 }
-            ]),
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(ResizeKeyTool.TOKEN, [
+                    {
+                        shortcuts: ['Escape'],
+                        description: messages.resize.shortcut_deactivate,
+                        group: messages.shortcut.group_resize,
+                        position: 0
+                    },
+                    {
+                        shortcuts: ['+'],
+                        description: messages.resize.shortcut_increase,
+                        group: messages.shortcut.group_resize,
+                        position: 1
+                    },
+                    {
+                        shortcuts: ['-'],
+                        description: messages.resize.shortcut_decrease,
+                        group: messages.shortcut.group_resize,
+                        position: 2
+                    },
+                    {
+                        shortcuts: ['CTRL', '0'],
+                        description: messages.resize.shortcut_reset,
+                        group: messages.shortcut.group_resize,
+                        position: 3
+                    }
+                ])
+            ),
             Disposable.create(() => {
                 this.dispatchActions(this.keyListener.disable());
             })

package/src/features/tool-palette/tool-palette.ts

@@ -35,6 +35,7 @@ import {
 import { inject, injectable, optional, postConstruct } from 'inversify';
 import { EditorContextService, IEditModeListener } from '../../base/editor-context-service';
 import { FocusTracker } from '../../base/focus/focus-tracker';
+import { messages, repeatOnMessagesUpdated } from '../../base/messages';
 import { IDiagramStartup } from '../../base/model/diagram-loader';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
 import { GLSPAbstractUIExtension } from '../../base/ui-extension/ui-extension';
@@ -89,6 +90,8 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
     protected paletteItems: PaletteItem[];
     protected paletteItemsCopy: PaletteItem[] = [];
     protected dynamic = false;
+    protected toggleButton?: HTMLElement;
+    protected headerDiv?: HTMLElement;
     protected bodyDiv?: HTMLElement;
     protected lastActiveButton?: HTMLElement;
     protected defaultToolsButton: HTMLElement;
@@ -105,6 +108,13 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
     @postConstruct()
     postConstruct(): void {
         this.editorContext.onEditModeChanged(change => this.editModeChanged(change.newValue, change.oldValue));
+        repeatOnMessagesUpdated(
+            () => {
+                this.createHeader();
+                this.addMinimizePaletteButton();
+            },
+            { initial: false }
+        );
     }
 
     override initialize(): boolean {
@@ -115,10 +125,11 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
     }
 
     protected initializeContents(containerElement: HTMLElement): void {
+        this.addMinimizePaletteButton();
         this.createHeader();
         this.createBody();
         this.lastActiveButton = this.defaultToolsButton;
-        containerElement.setAttribute('aria-label', 'Tool-Palette');
+        containerElement.setAttribute('aria-label', messages.tool_palette.label);
     }
 
     protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<GModelRoot>): void {
@@ -128,32 +139,40 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected addMinimizePaletteButton(): void {
         const baseDiv = document.getElementById(this.options.baseDiv);
-        const minPaletteDiv = document.createElement('div');
-        minPaletteDiv.classList.add('minimize-palette-button');
+        if (!baseDiv) {
+            return;
+        }
+        const toggleButton = document.createElement('div');
+        toggleButton.classList.add('minimize-palette-button');
         this.containerElement.classList.add('collapsible-palette');
-        if (baseDiv) {
-            const insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
-            const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
-            this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-            minimizeIcon.onclick = _event => {
-                if (this.isPaletteMaximized()) {
-                    this.containerElement.style.maxHeight = '0px';
-                } else {
-                    this.containerElement.style.maxHeight = PALETTE_HEIGHT;
-                }
-                this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-                changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
-                changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
-            };
-            insertedDiv.appendChild(minimizeIcon);
+        const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
+        this.updateMinimizePaletteButtonTooltip(toggleButton);
+        minimizeIcon.onclick = _event => {
+            if (this.isPaletteMaximized()) {
+                this.containerElement.style.maxHeight = '0px';
+            } else {
+                this.containerElement.style.maxHeight = PALETTE_HEIGHT;
+            }
+            this.updateMinimizePaletteButtonTooltip(toggleButton);
+            changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
+            changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
+        };
+        toggleButton.appendChild(minimizeIcon);
+
+        // Replace existing header to refresh
+        if (this.toggleButton) {
+            this.toggleButton.replaceWith(toggleButton);
+        } else {
+            baseDiv.insertBefore(toggleButton, baseDiv.firstChild);
         }
+        this.toggleButton = toggleButton;
     }
 
     protected updateMinimizePaletteButtonTooltip(button: HTMLDivElement): void {
         if (this.isPaletteMaximized()) {
-            button.title = 'Minimize palette';
+            button.title = messages.tool_palette.minimize;
         } else {
-            button.title = 'Maximize palette';
+            button.title = messages.tool_palette.maximize;
         }
     }
 
@@ -176,26 +195,33 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
         });
         if (this.paletteItems.length === 0) {
             const noResultsDiv = document.createElement('div');
-            noResultsDiv.innerText = 'No results found.';
+            noResultsDiv.innerText = messages.tool_palette.no_items;
             noResultsDiv.classList.add('tool-button');
             bodyDiv.appendChild(noResultsDiv);
         }
         // Remove existing body to refresh filtered entries
         if (this.bodyDiv) {
-            this.containerElement.removeChild(this.bodyDiv);
+            this.bodyDiv.replaceWith(bodyDiv);
+        } else {
+            this.containerElement.appendChild(bodyDiv);
         }
-        this.containerElement.appendChild(bodyDiv);
         this.bodyDiv = bodyDiv;
     }
 
     protected createHeader(): void {
-        this.addMinimizePaletteButton();
         const headerCompartment = document.createElement('div');
         headerCompartment.classList.add('palette-header');
         headerCompartment.append(this.createHeaderTitle());
         headerCompartment.appendChild(this.createHeaderTools());
         headerCompartment.appendChild((this.searchField = this.createHeaderSearchField()));
-        this.containerElement.appendChild(headerCompartment);
+
+        // Replace existing header to refresh
+        if (this.headerDiv) {
+            this.headerDiv.replaceWith(headerCompartment);
+        } else {
+            this.containerElement.appendChild(headerCompartment);
+        }
+        this.headerDiv = headerCompartment;
     }
 
     protected createHeaderTools(): HTMLElement {
@@ -237,7 +263,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
     protected createDefaultToolButton(): HTMLElement {
         const button = createIcon('inspect');
         button.id = 'btn_default_tools';
-        button.title = 'Enable selection tool';
+        button.title = messages.tool_palette.selection_button;
         button.onclick = this.onClickStaticToolButton(button);
         button.ariaLabel = button.title;
         button.tabIndex = 1;
@@ -246,7 +272,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createMouseDeleteToolButton(): HTMLElement {
         const deleteToolButton = createIcon('chrome-close');
-        deleteToolButton.title = 'Enable deletion tool';
+        deleteToolButton.title = messages.tool_palette.delete_button;
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
         deleteToolButton.ariaLabel = deleteToolButton.title;
         deleteToolButton.tabIndex = 1;
@@ -255,7 +281,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createMarqueeToolButton(): HTMLElement {
         const marqueeToolButton = createIcon('screen-full');
-        marqueeToolButton.title = 'Enable marquee tool';
+        marqueeToolButton.title = messages.tool_palette.marquee_button;
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID);
         marqueeToolButton.ariaLabel = marqueeToolButton.title;
         marqueeToolButton.tabIndex = 1;
@@ -264,7 +290,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createValidateButton(): HTMLElement {
         const validateActionButton = createIcon('pass');
-        validateActionButton.title = 'Validate model';
+        validateActionButton.title = messages.tool_palette.validate_button;
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
             this.actionDispatcher.dispatch(RequestMarkersAction.create(modelIds, { reason: MarkersReason.BATCH }));
@@ -277,7 +303,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createResetViewportButton(): HTMLElement {
         const resetViewportButton = createIcon('screen-normal');
-        resetViewportButton.title = 'Reset Viewport';
+        resetViewportButton.title = messages.tool_palette.reset_viewport_button;
         resetViewportButton.onclick = _event => {
             this.actionDispatcher.dispatch(OriginViewportAction.create());
             resetViewportButton.focus();
@@ -289,7 +315,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createToggleGridButton(): HTMLElement {
         const toggleGridButton = createIcon('symbol-numeric');
-        toggleGridButton.title = 'Toggle Grid';
+        toggleGridButton.title = messages.tool_palette.toggle_grid_button;
         toggleGridButton.onclick = () => {
             if (this.gridManager?.isGridVisible) {
                 toggleGridButton.classList.remove(CLICKED_CSS_CLASS);
@@ -309,7 +335,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
 
     protected createToggleDebugButton(): HTMLElement {
         const toggleDebugButton = createIcon('debug');
-        toggleDebugButton.title = 'Debug Mode';
+        toggleDebugButton.title = messages.tool_palette.debug_mode_button;
         toggleDebugButton.onclick = () => {
             if (this.debugManager?.isDebugEnabled) {
                 toggleDebugButton.classList.remove(CLICKED_CSS_CLASS);
@@ -341,7 +367,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
             }
         };
         searchIcon.classList.add('search-icon');
-        searchIcon.title = 'Filter palette entries';
+        searchIcon.title = messages.tool_palette.search_button;
         searchIcon.ariaLabel = searchIcon.title;
         searchIcon.tabIndex = 1;
         return searchIcon;
@@ -352,7 +378,7 @@ export class ToolPalette extends GLSPAbstractUIExtension implements IActionHandl
         searchField.classList.add('search-input');
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = 'Search...';
+        searchField.placeholder = messages.tool_palette.search_placeholder;
         searchField.style.display = 'none';
         searchField.onkeyup = () => this.requestFilterUpdate(this.searchField.value);
         searchField.onkeydown = ev => this.clearOnEscape(ev);

package/src/features/tools/change-bounds/change-bounds-tool.ts

@@ -40,6 +40,7 @@ import {
 } from '@eclipse-glsp/sprotty';
 import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
+import { messages, repeatOnMessagesUpdated } from '../../../base/messages';
 import { ISelectionListener, SelectionService } from '../../../base/selection-service';
 import type { IShortcutManager } from '../../../base/shortcuts/shortcuts-manager';
 import {
@@ -117,9 +118,16 @@ export class ChangeBoundsTool extends BaseEditTool {
         const createMoveKeyListener = this.createMoveKeyListener();
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(createMoveKeyListener),
-            this.shortcutManager.register(ChangeBoundsTool.TOKEN, [
-                { shortcuts: ['⬅ ⬆ ➡ ⬇'], description: 'Move element', group: 'Move', position: 0 }
-            ])
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(ChangeBoundsTool.TOKEN, [
+                    {
+                        shortcuts: ['⬅ ⬆ ➡ ⬇'],
+                        description: messages.move.shortcut_move,
+                        group: messages.shortcut.group_move,
+                        position: 0
+                    }
+                ])
+            )
         );
         if (Disposable.is(createMoveKeyListener)) {
             this.toDisposeOnDisable.push(createMoveKeyListener);

package/src/features/viewport/viewport-tool.ts

@@ -16,6 +16,7 @@
 
 import { TYPES } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { messages, repeatOnMessagesUpdated } from '../../base/messages';
 import type { IShortcutManager } from '../../base/shortcuts/shortcuts-manager';
 import { BaseTool } from '../tools/base-tools';
 import { MoveViewportKeyListener, ZoomKeyListener } from './viewport-key-listener';
@@ -44,11 +45,28 @@ export class ViewportKeyTool extends BaseTool {
         this.toDisposeOnDisable.push(
             this.keyTool.registerListener(this.moveKeyListener),
             this.keyTool.registerListener(this.zoomKeyListener),
-            this.shortcutManager.register(ViewportKeyTool.TOKEN, [
-                { shortcuts: ['⬅ ⬆ ➡ ⬇'], description: 'Move viewport', group: 'Move', position: 0 },
-                { shortcuts: ['+ -'], description: 'Zoom viewport', group: 'Zoom', position: 0 },
-                { shortcuts: ['+ -'], description: 'Zoom element', group: 'Zoom', position: 0 }
-            ])
+            repeatOnMessagesUpdated(() =>
+                this.shortcutManager.register(ViewportKeyTool.TOKEN, [
+                    {
+                        shortcuts: ['⬅ ⬆ ➡ ⬇'],
+                        description: messages.viewport.shortcut_move_viewport,
+                        group: messages.shortcut.group_move,
+                        position: 0
+                    },
+                    {
+                        shortcuts: ['+ -'],
+                        description: messages.viewport.shortcut_zoom_viewport,
+                        group: messages.shortcut.group_zoom,
+                        position: 0
+                    },
+                    {
+                        shortcuts: ['+ -'],
+                        description: messages.viewport.shortcut_zoom_element,
+                        group: messages.shortcut.group_zoom,
+                        position: 0
+                    }
+                ])
+            )
         );
     }
 }

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './base/feedback/set-model-command';
 export * from './base/feedback/update-model-command';
 export * from './base/focus/focus-state-change-action';
 export * from './base/focus/focus-tracker';
+export * from './base/messages';
 export * from './base/model/diagram-loader';
 export * from './base/model/glsp-model-source';
 export * from './base/model/model-initialization-constraint';

package/src/views/glsp-projection-view.tsx

@@ -34,6 +34,7 @@ import {
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode, VNodeStyle, h } from 'snabbdom';
+import { messages } from '../base/messages';
 import { GridStyle, IGridManager } from '../features/grid/grid-manager';
 import { GridProperty } from '../features/grid/grid-style';
 
@@ -53,7 +54,7 @@ export class GLSPProjectionView extends ProjectedViewportView {
             </div>
         );
         setAttr(rootNode, 'tabindex', 1);
-        setAttr(rootNode, 'aria-label', 'Diagram');
+        setAttr(rootNode, 'aria-label', messages.diagram.label);
 
         return rootNode;
     }

package/lib/features/accessibility/toast/messages.json

@@ -1,18 +0,0 @@
-{
-    "navigation": {
-        "default_navigation_mode_activated": "Navigation On: Use arrow keys to select preceding (←) or succeding (→) elements. Use the up (↑) and down (↓) arrows to navigate paths. Press 'N' to exit.",
-        "default_navigation_mode_deactivated": "Navigation Off: Press 'N' for default navigation, 'ALT+N' for position based navigation.",
-        "local_navigation_mode_activated": "Position based Nav On: Navigate nearest elements using arrow keys: (↑) for above, (↓) for below, (←) for previous, (→) for next element. Press 'ALT+N' to exit.",
-        "local_navigation_mode_deactivated": "Position based Nav Off: Press 'N' for default navigation, 'ALT+N' for position based navigation."
-    },
-    "focus": {
-        "focus_on": "Currently focused: ",
-        "focus_off": "Currently no element is focused."
-    },
-    "resize": {
-        "resize_mode_activated": "Resize On: Use plus(+) and minus(-) to resize, 'CTRL'+'0' for default size. Press 'ESC' to exit.",
-        "resize_mode_deactivated": "Resize Off: Press 'ALT'+'A' for resize mode."
-    },
-    "grid": { "zoom_in_grid": "Select a digit from 1-9 to zoom in on the respective box." },
-    "tool_palette": { "marqueeTool": "Currently marquee tool is only usable with mouse." }
-}