diff --git a/accessibility/keyboardui.js b/accessibility/keyboardui.js index b4b3dc4a..770463a8 100644 --- a/accessibility/keyboardui.js +++ b/accessibility/keyboardui.js @@ -58,7 +58,9 @@ const AreaManager = { this.previousFocus = document.activeElement; setTimeout(() => this.overlay.focus(), 0); } else { - this._previousInertStates?.forEach((wasInert, el) => (el.inert = wasInert)); + this._previousInertStates?.forEach( + (wasInert, el) => (el.inert = wasInert), + ); this._previousInertStates = null; this.previousFocus?.focus(); } @@ -111,6 +113,13 @@ const AreaManager = { const area = this.areas.find((a) => a.label === focused.innerText); if (area) this.activateArea(area); }); + + // Re-render if the browser window gets resized + window.addEventListener("resize", () => { + if (!this.overlay.classList.contains("hidden")) { + requestAnimationFrame(() => this.renderHighlights()); + } + }); }, // Set the focus to this area and close overlay @@ -379,6 +388,11 @@ function getShortcuts() { keys: `${mod} + E`, category: translate("shortcut_category_editor"), }, + { + label: translate("shortcut_toolbox"), + keys: `T`, + category: translate("shortcut_category_editor"), + }, { label: translate("shortcut_add_block_by_name"), keys: `${mod} + ]`, diff --git a/locale/de.js b/locale/de.js index b70e23e0..83993c9f 100644 --- a/locale/de.js +++ b/locale/de.js @@ -1235,6 +1235,7 @@ export default { shortcut_toggle_area: "Bereich umschalten", shortcut_select_area: "Bereich auswählen", shortcut_code_editor: "Code-Editor", + shortcut_toolbox: "Werkzeugkasten", shortcut_add_block_by_name: "Block nach Name hinzufügen", shortcut_search_block: "Nach einem Block suchen", shortcut_move_through_blocks: "Durch Blöcke navigieren", diff --git a/locale/en.js b/locale/en.js index 4e0e8597..7dc5fa22 100644 --- a/locale/en.js +++ b/locale/en.js @@ -1285,6 +1285,7 @@ export default { shortcut_toggle_area: "Toggle area", shortcut_select_area: "Select area", shortcut_code_editor: "Code editor", + shortcut_toolbox: "Toolbox", shortcut_add_block_by_name: "Add block by name", shortcut_search_block: "Search for a block", shortcut_move_through_blocks: "Move through blocks", diff --git a/locale/es.js b/locale/es.js index 12781ba8..7ef71216 100644 --- a/locale/es.js +++ b/locale/es.js @@ -1248,6 +1248,7 @@ export default { shortcut_toggle_area: "Cambiar área", shortcut_select_area: "Seleccionar área", shortcut_code_editor: "Editor de código", + shortcut_toolbox: "Caja de herramientas", shortcut_add_block_by_name: "Añadir bloque por nombre", shortcut_search_block: "Buscar un bloque", shortcut_move_through_blocks: "Navegar por los bloques", diff --git a/locale/fr.js b/locale/fr.js index fd1e4e3f..d3a4a44a 100644 --- a/locale/fr.js +++ b/locale/fr.js @@ -1231,7 +1231,8 @@ export default { // Keyboard shortcuts panel — labels shortcut_show_hide_help: "Afficher/masquer les raccourcis clavier", - shortcut_move_between_areas: "Se déplacer entre les menus, le canvas et l'éditeur", + shortcut_move_between_areas: + "Se déplacer entre les menus, le canvas et l'éditeur", shortcut_confirm: "Confirmer", shortcut_exit: "Quitter", shortcut_play: "Lancer", @@ -1246,6 +1247,7 @@ export default { shortcut_toggle_area: "Changer de zone", shortcut_select_area: "Sélectionner une zone", shortcut_code_editor: "Éditeur de code", + shortcut_toolbox: "Boîte à outils", shortcut_add_block_by_name: "Ajouter un bloc par nom", shortcut_search_block: "Rechercher un bloc", shortcut_move_through_blocks: "Naviguer dans les blocs", diff --git a/locale/it.js b/locale/it.js index ecec3eca..0cb92908 100644 --- a/locale/it.js +++ b/locale/it.js @@ -1237,6 +1237,7 @@ export default { shortcut_toggle_area: "Cambia area", shortcut_select_area: "Seleziona area", shortcut_code_editor: "Editor di codice", + shortcut_toolbox: "Casella degli strumenti", shortcut_add_block_by_name: "Aggiungi blocco per nome", shortcut_search_block: "Cerca un blocco", shortcut_move_through_blocks: "Navigare tra i blocchi", diff --git a/locale/pl.js b/locale/pl.js index bcfc3c53..89a38c99 100644 --- a/locale/pl.js +++ b/locale/pl.js @@ -1242,6 +1242,7 @@ export default { shortcut_toggle_area: "Przełącz obszar", shortcut_select_area: "Wybierz obszar", shortcut_code_editor: "Edytor kodu", + shortcut_toolbox: "Przybornik", shortcut_add_block_by_name: "Dodaj blok według nazwy", shortcut_search_block: "Szukaj bloku", shortcut_move_through_blocks: "Nawiguj między blokami", diff --git a/locale/pt.js b/locale/pt.js index f46f90a1..33ae84d7 100644 --- a/locale/pt.js +++ b/locale/pt.js @@ -1234,6 +1234,7 @@ export default { shortcut_toggle_area: "Alternar área", shortcut_select_area: "Selecionar área", shortcut_code_editor: "Editor de código", + shortcut_toolbox: "Caixa de ferramentas", shortcut_add_block_by_name: "Adicionar bloco por nome", shortcut_search_block: "Procurar um bloco", shortcut_move_through_blocks: "Navegar pelos blocos", diff --git a/locale/sv.js b/locale/sv.js index 857f49d1..e0c7ce25 100644 --- a/locale/sv.js +++ b/locale/sv.js @@ -1224,6 +1224,7 @@ export default { shortcut_toggle_area: "Växla område", shortcut_select_area: "Välj område", shortcut_code_editor: "Kodeditor", + shortcut_toolbox: "Verktygslåda", shortcut_add_block_by_name: "Lägg till block efter namn", shortcut_search_block: "Sök efter ett block", shortcut_move_through_blocks: "Navigera bland block", diff --git a/main/main.js b/main/main.js index c7cf802d..edb9a5ef 100644 --- a/main/main.js +++ b/main/main.js @@ -50,7 +50,7 @@ import { } from "./translation.js"; import { ShortcutsPanel } from "../accessibility/keyboardui.js"; import { InputManager } from "./inputmanager.js"; -import "./context.js"; +import { ContextManager } from "./context.js"; function isEmbedModeEnabled() { const embedParam = new URLSearchParams(window.location.search).get("embed"); @@ -596,10 +596,8 @@ function initializeApp() { zoomInBtn.addEventListener("click", () => workspace.zoomCenter(1)); if (zoomOutBtn) zoomOutBtn.addEventListener("click", () => workspace.zoomCenter(-1)); - if (undoBtn) - undoBtn.addEventListener("click", () => workspace.undo(false)); - if (redoBtn) - redoBtn.addEventListener("click", () => workspace.undo(true)); + if (undoBtn) undoBtn.addEventListener("click", () => workspace.undo(false)); + if (redoBtn) redoBtn.addEventListener("click", () => workspace.undo(true)); // Make open button work with keyboard if (openButton) { @@ -643,6 +641,18 @@ function initializeApp() { Blockly.keyboardNavigationController?.setIsActive?.(true); Blockly.getFocusManager()?.focusTree?.(workspace); }); + InputManager.on("*", "KeyT", (e) => { + const ctx = ContextManager.getCurrentContext(); + if (ctx === "TYPING" || ctx === "EDITOR") return; + if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return; + e.preventDefault(); + const toolbox = workspace.getToolbox?.(); + if (!toolbox) return; + const toolboxDiv = + toolbox.HtmlDiv || document.querySelector(".blocklyToolboxDiv"); + toolboxDiv?.focus(); + Blockly.getFocusManager()?.focusTree?.(toolbox); + }); if (toggleDesignButton) { toggleDesignButton.addEventListener("click", toggleDesignMode); } diff --git a/style/blockly.css b/style/blockly.css index 1f60c75f..b7809612 100644 --- a/style/blockly.css +++ b/style/blockly.css @@ -12,6 +12,7 @@ --color-shadow: grey; --color-outline-focus: #fc3; --block-outline-focus: #fff200; + --color-toolbox-focus: var(--color-outline-focus); /* Dropdown & menu semantics */ --color-dropdown-text: var(--color-text); @@ -57,6 +58,10 @@ --color-outline-focus: #e0e0e0; } +[data-theme="low-vision"] { + --color-toolbox-focus: #fc3; +} + [data-theme="dark-contrast"] .blocklyInsertionMarker path { fill: grey !important; } @@ -354,8 +359,19 @@ body[data-theme="low-vision"] { > .blocklyToolboxCategory, .blocklyToolboxCategoryContainer[aria-selected="true"][aria-level="2"] > .blocklyToolboxCategory { - outline: 2px solid var(--color-outline-focus); - outline-offset: -2px; + outline: 5px solid var(--color-toolbox-focus); + outline-offset: 0px; + border-radius: 4px; +} + +/* Keyboard-focused toolbox category (Blockly 13 FocusManager active node) */ +.blocklyKeyboardNavigation .blocklyToolbox .blocklyActiveFocus, +.blocklyKeyboardNavigation + .blocklyToolbox + .blocklyActiveFocus + > .blocklyToolboxCategory { + outline: 5px solid var(--color-toolbox-focus) !important; + outline-offset: 0px !important; border-radius: 4px; }