Integrate blockly kb controls

[lawsie]

Summary

Tasks for #357

• Blue outline when toolbox/flyout is focused has been removed
• Comment is styled consistently with a text box when editing to make it more visible
• Grid picker square is now much more visible in all themes

AI usage

Claude Sonnet 4.6 used throughout, colours and decisions made by a human and all code changes individually approved.

Summary by CodeRabbit

• Bug Fixes

  • Fixed workspace search highlighting behavior
  • Improved keyboard focus navigation in toolbox and flyout areas

• Style

  • Enhanced comment textarea text visibility and styling
  • Added focus indicators for color picker elements
  • Improved focus styling throughout the editor interface

[coderabbitai]

Warning

Rate limit exceeded

@lawsie has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 52 minutes and 21 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 152cf070-fec7-41c1-afa8-201566097179

📥 Commits

Reviewing files that changed from the base of the PR and between e2396cb and 564e653.

📒 Files selected for processing (1)

• style/blockly.css

📝 Walkthrough

Walkthrough

Refactors the Blockly event selection handler with optional chaining for safer parent-chain traversal and enhances CSS styling for keyboard navigation focus states across comment text, color field selection, and toolbox/flyout containers.

Changes

Blockly focus behavior

Layer / File(s)	Summary
Event handler and search refactoring main/blocklyinit.js	workspaceSearch.highlightSearchGroup callback refactored to multi-line format, and Blockly.Events.SELECTED handler updated with optional chaining around inputList and getParent for safer parent chain walking while preserving XYZ block detection rules. Comment added noting Blockly 13 toast assumption.
Focus and keyboard navigation styling style/blockly.css	Comment textarea text forced to black with explicit blocklyActiveFocus styling (2px border, black color, white background). Color field grid items styled with 4px box-shadow on focus, with low-vision override. Toolbox/flyout keyboard focus outlines suppressed when containing .blocklyActiveFocus.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• Integrate Blockly keyboard controls #357: CSS and Blockly selection handler changes directly address keyboard-controls integration focus behavior and comment styling requirements.

Suggested labels

codex

---

🐰 Focus flows through the blocks so fine,
With optional chains in a defensive line,
Colors glow and comments stay clear,
Keyboard navigation brings joy here! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The pull request title 'Integrate blockly kb controls' is vague and doesn't clearly convey the specific changes made. The title doesn't explain what 'kb controls' refers to or what integration entails.	Use a more descriptive title that clarifies the main changes, such as 'Add keyboard navigation focus styling and comment editing improvements for Blockly' or 'Improve Blockly keyboard navigation and comment visibility'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

main/blocklyinit.js (1)

505-505: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove the speculative comment about Blockly toasts.

The comment "// Assuming Blockly 13 has removed toasts, this is not needed" is incorrect—Blockly 13 did not remove the Toast API. The Toast namespace and class remain part of Blockly's public API. Additionally, the comment violates the coding guideline that comments should reflect the current state of code only, not assumptions. Remove this comment entirely.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@main/blocklyinit.js` at line 505, Remove the incorrect speculative comment
"// Assuming Blockly 13 has removed toasts, this is not needed" that appears
next to the DOM creation of the block element (the const block =
document.createElement("block") line) in main/blocklyinit.js; simply delete that
comment so the code and comments reflect only factual state (no replacement text
needed), ensuring no other code relies on the removed comment.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@style/blockly.css`:
- Around line 169-170: The CSS rule that forces comment textarea text to black
(the global "color: black !important;" on comment textareas) can make text
unreadable in dark themes; update the stylesheet to pair the forced black text
with a light background for the unfocused state (or add theme-specific overrides
for dark, dark-contrast, low-vision) so comment text remains readable when not
focused—modify the same selector that currently sets "color: black !important;"
and ensure it also sets a contrasting background-color (or adds selectors scoped
to dark-theme classes) consistent with the focused-state rules around lines
177-181.

---

Outside diff comments:
In `@main/blocklyinit.js`:
- Line 505: Remove the incorrect speculative comment "// Assuming Blockly 13 has
removed toasts, this is not needed" that appears next to the DOM creation of the
block element (the const block = document.createElement("block") line) in
main/blocklyinit.js; simply delete that comment so the code and comments reflect
only factual state (no replacement text needed), ensuring no other code relies
on the removed comment.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5618f958-d6be-4b97-afb1-0d298713315d

📥 Commits

Reviewing files that changed from the base of the PR and between 3831306 and e2396cb.

📒 Files selected for processing (2)

• main/blocklyinit.js
• style/blockly.css