Skip to content

Standardise area highlights#641

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
lawsie merged 5 commits into from
May 18, 2026
Merged

Standardise area highlights #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
20c8ff1
Remove blue highlight from workspace
lawsie May 18, 2026
209d27b
Remove search box highlight
lawsie May 18, 2026
d19ed2e
Darker yellow highlight for workspace
lawsie May 18, 2026
28cec93
Properly highlight categories
lawsie May 18, 2026
43411ae
Delete line
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
9 changes: 7 additions & 2 deletions main/main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -620,12 +620,16 @@ function registerTopBlockReorderShortcuts() {
callback: (ws, event, shortcut) => handler(ws, event, shortcut, orig),
});
}

function openSession(ws) {
session = null;
const block = focusedBlock();
if (!TOP_BLOCK_TYPES.includes(block.type)) return;
console.log("Moving top block", block.type, TOP_BLOCK_TYPES.includes(block.type));
console.log(
"Moving top block",
block.type,
TOP_BLOCK_TYPES.includes(block.type),
);
const snapshot = new Map();
for (const b of ws.getTopBlocks(false) || []) {
snapshot.set(b, b.getRelativeToSurfaceXY().y);
Expand DownExpand Up@@ -869,6 +873,7 @@ function initializeApp() {
// <input> when the toolbox receives focus, so moving focus inline
// here causes the 't' keypress to be typed into the search box.
setTimeout(() => {
Blockly.keyboardNavigationController?.setIsActive(true);
const toolbox = workspace.getToolbox?.();
if (!toolbox) return;

Expand Down
32 changes: 15 additions & 17 deletions style/blockly.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@
--color-shadow: grey;
--color-outline-focus: #fc3;
--block-outline-focus: #fff200;
--color-toolbox-focus: var(--color-outline-focus);
--color-toolbox-focus: var(--block-outline-focus);

/* Dropdown & menu semantics */
--color-dropdown-text: var(--color-text);
Expand DownExpand Up@@ -263,7 +263,6 @@ body[data-theme="low-vision"] {
.blockly-ws-search {
background: var(--color-bg);
margin-top: 5px;
border: solid var(--color-border-highlight) 4px;
box-shadow: 0px 10px 20px var(--color-shadow);
justify-content: center;
padding: 0.25em;
Expand DownExpand Up@@ -370,24 +369,16 @@ body[data-theme="low-vision"] {
outline: none;
}

/* Toolbox category selection outline */
.blocklyToolboxCategoryContainer[aria-selected="true"][aria-level="1"]
> .blocklyToolboxCategory,
.blocklyToolboxCategoryContainer[aria-selected="true"][aria-level="2"]
> .blocklyToolboxCategory {
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;
> .blocklyToolboxCategory,
.blocklyKeyboardNavigation
.blocklyToolbox
.blocklyToolboxCategory.blocklyActiveFocus {
outline: none !important;
box-shadow: inset 0 0 0 3px var(--color-toolbox-focus) !important;
border-radius: 4px;
}

Expand DownExpand Up@@ -538,7 +529,10 @@ body[data-theme="low-vision"] {
box-shadow: 0 0 0 4px #000 !important;
}

[data-theme="low-vision"] .blocklyFieldColour .blocklyFieldGrid .blocklyFieldGridItem:focus {
[data-theme="low-vision"]
.blocklyFieldColour
.blocklyFieldGrid
.blocklyFieldGridItem:focus {
box-shadow: 0 0 0 4px #fff !important;
}

Expand DownExpand Up@@ -627,6 +621,10 @@ body[data-theme="dark"] .blocklyTreeLabel {
outline: none !important;
}

.blocklyWorkspaceFocusRing {
stroke: var(--color-outline-focus) !important;
}

.blocklyKeyboardNavigation .blocklyToolbox:has(.blocklyActiveFocus),
.blocklyKeyboardNavigation .blocklyActiveFocus.blocklyToolbox,
.blocklyKeyboardNavigation .blocklyFlyout:has(.blocklyActiveFocus),
Expand Down
Loading