Skip to content

Shortcut panel refactor #643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tracygardner merged 8 commits into from
May 19, 2026
Merged

Shortcut panel refactor #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
08f1e63
Don't overlap menus
lawsie May 18, 2026
9c54b85
Move search when panel open
lawsie May 18, 2026
8978bb8
Change panel title
lawsie May 18, 2026
288214d
Remove close button
lawsie May 18, 2026
3732f33
Add many more controls
lawsie May 18, 2026
c6f0e45
Update panel when lang changes
lawsie May 18, 2026
31d1a6a
Additional direction
lawsie May 18, 2026
f903a35
Update aria for help link
lawsie May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 106 additions & 45 deletions accessibility/keyboardui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ function getShortcuts() {
},
{
label: translate("shortcut_move_between_areas"),
keys: `Tab`,
keys: `Tab / Shift + Tab`,
category: translate("shortcut_category_main"),
},
{
Expand Down Expand Up @@ -385,14 +385,56 @@ function getShortcuts() {
category: translate("shortcut_category_area_menu"),
},

{
label: translate("shortcut_toolbox"),
keys: `T`,
category: translate("shortcut_category_toolbox"),
},
{
label: translate("shortcut_toolbox_typing"),
keys: `"${translate("shortcut_toolbox_typing_hint")}"`,
category: translate("shortcut_category_toolbox"),
},
{
label: translate("shortcut_nav_toolbox_blocks"),
keys: `↑ ↓ ← →`,
category: translate("shortcut_category_toolbox"),
},
{
label: translate("shortcut_add_block"),
keys: `Enter`,
category: translate("shortcut_category_toolbox"),
},

{
label: translate("shortcut_code_editor"),
keys: `${mod} + E`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_toolbox"),
keys: `T`,
label: translate("shortcut_select_workspace"),
keys: `W`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_move_through_blocks"),
keys: `↑ ↓`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_move_in_out_blocks"),
keys: `← →`,
category: translate("shortcut_category_editor"),
},

{
label: translate("shortcut_next_block_stack"),
keys: `N`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_prev_block_stack"),
keys: `B`,
category: translate("shortcut_category_editor"),
},
{
Expand All @@ -401,8 +443,33 @@ function getShortcuts() {
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_move_through_blocks"),
keys: `↑ ↓ ← →`,
label: translate("shortcut_context_menu"),
keys: `${mod} + Enter`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_duplicate_block"),
keys: `D`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_detach_block"),
keys: `X`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_start_move_block"),
keys: `M`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_move_arrows"),
keys: `↑ ↓`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_move_anywhere"),
keys: `${mod} + ↑ ↓ ← →`,
category: translate("shortcut_category_editor"),
},
{
Expand All @@ -425,11 +492,6 @@ function getShortcuts() {
keys: `Esc`,
category: translate("shortcut_category_editor"),
},
{
label: translate("shortcut_start_move_block"),
keys: `M`,
category: translate("shortcut_category_editor"),
},

{
label: translate("shortcut_open_gizmos"),
Expand Down Expand Up @@ -463,7 +525,7 @@ function getShortcuts() {
},
{
label: translate("shortcut_quick_colour"),
keys: `P`,
keys: `C`,
category: translate("shortcut_category_gizmos"),
},
{
Expand All @@ -477,54 +539,60 @@ function getShortcuts() {
// Formats keys for menu nicely
// You can use + or / and these won't be <kbd> tagged
function formatKeys(keys) {
if (keys.startsWith('"') && keys.endsWith('"')) {
return keys.slice(1, -1);
}
return keys
.split(/( \+ | \/ )/)
.map((part) =>
part === " + " || part === " / "
part === " + "
? part
: part
.split(" ")
.map((k) => `<kbd>${k}</kbd>`)
.join(" "),
: part === " / "
? "<br>"
: part
.split(" ")
.map((k) => `<kbd>${k}</kbd>`)
.join(" "),
)
.join("");
}

const ShortcutsPanel = {
panel: null,
dock: "left",
previousFocus: null,

init() {
this.createPanel();
this.setupListeners();
window.flockShortcutsPanel = this;
},

createPanel() {
const div = document.createElement("div");
div.id = "shortcutsPanel";
div.className = "shortcuts-panel hidden shortcuts-panel--left";
div.className = "shortcuts-panel hidden";
div.setAttribute("role", "region");
div.setAttribute("aria-label", translate("shortcut_panel_title"));
div.tabIndex = 0;
div.innerHTML = `
<button type="button" class="close-button" id="closeShortcutsPanel" aria-label="${translate("shortcut_panel_close")}">&times;</button>
<a href="${SHORTCUTS_HELP_URL}" target="_blank" rel="noopener noreferrer" class="help-link-button" aria-label="Open keyboard shortcuts help page"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" aria-hidden="true"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg></a>
<h1 id="shortcuts-panel-title">${translate("shortcut_panel_title")}</h1>
<div class="shortcuts-panel-header">
<h1 id="shortcuts-panel-title">${translate("shortcut_panel_title")}</h1>
<a href="${SHORTCUTS_HELP_URL}" target="_blank" rel="noopener noreferrer" class="help-link-button" aria-label="${translate("shortcut_panel_help_link")}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" aria-hidden="true"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg></a>
</div>
<table id="shortcuts-table"><tbody></tbody></table>
`;
document.body.appendChild(div);
document.getElementById("maincontent").appendChild(div);
this.panel = div;
},

show() {
renderContent() {
this.panel.setAttribute("aria-label", translate("shortcut_panel_title"));
this.panel.querySelector("#shortcuts-panel-title").textContent = translate(
"shortcut_panel_title",
);
this.panel
.querySelector("#closeShortcutsPanel")
.setAttribute("aria-label", translate("shortcut_panel_close"));
.querySelector(".help-link-button")
.setAttribute("aria-label", translate("shortcut_panel_help_link"));
const tbody = this.panel.querySelector("tbody");
const groups = getShortcuts().reduce((acc, s) => {
(acc[s.category] ??= []).push(s);
Expand All @@ -538,44 +606,37 @@ const ShortcutsPanel = {
`,
)
.join("");
},

show() {
this.renderContent();
this.previousFocus = document.activeElement;
this.panel.classList.remove("hidden");
document.body.classList.add("shortcuts-panel-open");
this.panel.focus();
document.getElementById("shortcutsBtn")?.classList.add("active");
},

refreshTranslations() {
if (!this.panel.classList.contains("hidden")) {
this.renderContent();
}
},

hide() {
this.previousFocus?.focus();
this.previousFocus = null;
this.panel.classList.add("hidden");
document.body.classList.remove("shortcuts-panel-open");
document.getElementById("shortcutsBtn")?.classList.remove("active");
},

toggle() {
this.panel.classList.contains("hidden") ? this.show() : this.hide();
},

setDock(side) {
this.dock = side;
this.panel.classList.toggle("shortcuts-panel--left", side === "left");
this.panel.classList.toggle("shortcuts-panel--right", side === "right");
},

setupListeners() {
// Not handled by InputManager as they are set specifically
// to listen when the panel has focus, not globally
document.addEventListener("click", (e) => {
if (e.target.id === "closeShortcutsPanel") this.hide();
});
this.panel.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") {
e.preventDefault();
this.setDock("left");
}
if (e.key === "ArrowRight") {
e.preventDefault();
this.setDock("right");
}
if (e.key === "ArrowUp") {
e.preventDefault();
this.panel.scrollBy({ top: -100, behavior: "instant" });
Expand All @@ -584,7 +645,7 @@ const ShortcutsPanel = {
e.preventDefault();
this.panel.scrollBy({ top: 100, behavior: "instant" });
}
if (e.key === "Tab" || e.key === "Escape") {
if (e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
this.hide();
Expand Down
25 changes: 20 additions & 5 deletions locale/de.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1215,8 +1215,9 @@ export default {
toolbar_zoom_out_ui: "Verkleinern",
toolbar_zoom_in_ui: "Vergrößern",
// Keyboard shortcuts panel — title and close button
shortcut_panel_title: "Tastaturkürzel",
shortcut_panel_title: "Tastatursteuerung",
shortcut_panel_close: "Tastaturkürzel schließen",
shortcut_panel_help_link: "Hilfe-Link für Tastatursteuerung öffnen",

// Keyboard shortcuts panel — labels
shortcut_show_hide_help: "Tastaturkürzel ein-/ausblenden",
Expand All @@ -1237,12 +1238,25 @@ export default {
shortcut_code_editor: "Code-Editor",
shortcut_toolbox: "Werkzeugkasten",
shortcut_add_block_by_name: "Block nach Name hinzufügen",
shortcut_add_block: "Ausgewählten Block hinzufügen",
shortcut_search_block: "Nach einem Block suchen",
shortcut_select_next_result: "Nächstes Suchergebnis",
shortcut_select_previous_result: "Vorheriges Suchergebnis",
shortcut_focus_result: "Zum ausgewählten Suchergebnis springen",
shortcut_move_through_blocks: "Durch Blöcke navigieren",
shortcut_select_next_result: "Suche: Nächstes Ergebnis",
shortcut_select_previous_result: "Suche: Vorheriges Ergebnis",
shortcut_focus_result: "Suche: Zum ausgewählten Block springen",
shortcut_nav_toolbox_blocks: "Kategorien und Blöcke navigieren",
shortcut_toolbox_typing: "Zur Kategorie springen",
shortcut_toolbox_typing_hint: "Namen eintippen",
shortcut_context_menu: "Kontextmenü öffnen",
shortcut_duplicate_block: "Block duplizieren",
shortcut_detach_block: "Block trennen",
shortcut_start_move_block: "Block verschieben",
shortcut_move_arrows: "Verschieben: zur Verbindung",
shortcut_move_anywhere: "Verschieben: überall",
shortcut_select_workspace: "Arbeitsbereich auswählen",
shortcut_move_through_blocks: "Durch Blöcke bewegen",
shortcut_move_in_out_blocks: "In/aus einem Block navigieren",
shortcut_next_block_stack: "Nächster Blockstapel",
shortcut_prev_block_stack: "Vorheriger Blockstapel",
shortcut_open_gizmos: "Gizmos",
shortcut_select_gizmo: "Gizmo auswählen",
shortcut_keyboard_cursor_gizmos: "Tastaturcursor für Gizmos",
Expand All @@ -1256,6 +1270,7 @@ export default {
shortcut_category_main: "Allgemein",
shortcut_category_menu: "Menü",
shortcut_category_area_menu: "Bereichsmenü",
shortcut_category_toolbox: "Werkzeugkasten",
shortcut_category_editor: "Editor",
shortcut_category_gizmos: "Gizmos",

Expand Down
25 changes: 20 additions & 5 deletions locale/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1265,8 +1265,9 @@ export default {
toolbar_zoom_out_ui: "Zoom out",
toolbar_zoom_in_ui: "Zoom in",
// Keyboard shortcuts panel — title and close button
shortcut_panel_title: "Keyboard shortcuts",
shortcut_panel_title: "Keyboard Controls",
shortcut_panel_close: "Close keyboard shortcuts",
shortcut_panel_help_link: "Open keyboard controls help link",

// Keyboard shortcuts panel — labels
shortcut_show_hide_help: "Show/hide shortcut help",
Expand All @@ -1287,12 +1288,25 @@ export default {
shortcut_code_editor: "Code editor",
shortcut_toolbox: "Toolbox",
shortcut_add_block_by_name: "Add block by name",
shortcut_add_block: "Add selected block",
shortcut_search_block: "Search for a block",
shortcut_select_next_result: "Next search result",
shortcut_select_previous_result: "Previous search result",
shortcut_focus_result: "Go to selected search result",
shortcut_move_through_blocks: "Move through blocks",
shortcut_select_next_result: "Search: Next result",
shortcut_select_previous_result: "Search: Previous result",
shortcut_focus_result: "Search: Go to selected block",
shortcut_nav_toolbox_blocks: "Navigate categories and blocks",
shortcut_toolbox_typing: "Skip to category",
shortcut_toolbox_typing_hint: "Start typing its name",
shortcut_context_menu: "Open context menu",
shortcut_duplicate_block: "Duplicate block",
shortcut_detach_block: "Detach block",
shortcut_start_move_block: "Move block",
shortcut_move_arrows: "Move: to connection",
shortcut_move_anywhere: "Move: anywhere",
shortcut_select_workspace: "Select workspace",
shortcut_move_through_blocks: "Move through blocks",
shortcut_move_in_out_blocks: "Move in/out of a block",
shortcut_next_block_stack: "Next block stack",
shortcut_prev_block_stack: "Previous block stack",
shortcut_open_gizmos: "Gizmos",
shortcut_select_gizmo: "Select gizmo",
shortcut_keyboard_cursor_gizmos: "Keyboard cursor for gizmos",
Expand All @@ -1306,6 +1320,7 @@ export default {
shortcut_category_main: "Main",
shortcut_category_menu: "Menu",
shortcut_category_area_menu: "Area menu",
shortcut_category_toolbox: "Toolbox",
shortcut_category_editor: "Editor",
shortcut_category_gizmos: "Gizmos",

Expand Down
Loading
Loading