Upgrade to latest Blockly keyboard navigation plugin #10512

microbit-robert · 2025-04-10T09:21:14Z

We are opening this PR in draft mainly for visibility at this point. This PR has now been rebased on master after the upgrade to Blockly v12.0.0-beta.4, on which the new keyboard navigation plugin depends.

Link to demo. Please note that 'accessible blocks' need to be set to 'on' in the settings menu.

A summary of changes and blockers to the plugin upgrade are listed below:

Use blockly/keyboard-experiment v0.0.7
Remove toolbox tab stops and use arrow keys for toolbox nav
Improve area for toolbox
Add skip link for the workspace when keyboard nav is enabled
Remove second step to enable keyboard nav after enabling the experiment, the objective is always enabled keyboard nav.

Resolved blockers

MakeCode cut / copy / paste modifications are disabled to prevent conflict, next step needs discussion. The current implementation in MakeCode reuses Blockly code and hooks in localStorage to copy and paste between tabs - it is not clear if the same approach can be taken with the new keyboard plugin and needs investigation
- Currently you need access to plugin internals to follow this route so exploring other options.
- As a stopgap to enable moving forward with this PR, we could disable MakeCode's copy/paste overrides when the experiment was enabled.
We've sidestepped the caching MakeCode's flyout does (directly using CachingFlyout), to avoid breaking Blockly assumptions that the flyout / flyout workspace doesn't change over time. Caching is valuable though, need to explore reinstating perhaps at a different level.
- Not sure that the same stopgap approach is so reasonable here. This is our next task but suggestions very welcome. Rachel suggested looking at the continuous toolbox plugin, which does some degree of caching/recycling (not at the whole-flyout level).
- No longer a blocker thanks to move flyout caching functionality into a block inflater #10533

Follow-up issues:

Help docs
Global shortcuts
Black focus outline around the toolbox, flyout and workspace, respectively, when using keyboard navigation. The workspace currently shows this outline on click which is not desired behaviour.
- We think it's not so bad that this happens for a mouse click if you've enabled the keyboard nav experiment but it's not reasonable if we moved to enabling it by default. Propose tracking separately.
Avoid affecting theme
- We're going to try to fix this in Blockly but I think they switched from yellow to orange for visibility reasons so it's worth considering making this change in MakeCode. We'll try to make the theme the source of truth for color for the selection color and the related cursor positions the plugin draws.
- We discussed this on the last MakeCode call and agreed that the colour change was OK for users who opt-in to block keyboard navigation. Changing it globally is a discussion for the future.
It's common to hit the issue addressed by this PR so it would be good to agree a way forward for that: Clear system clipboard on block copy to prevent pasting files. #10463

@riknoll @microbit-matt-hillsdon

Closes #10464

Temporarily based on a micro:bit team upgrade-blockly-12 branch. - Remove toolbox tab stops; use arrow keys for toolbox nav - Add skip link for the workspace when keyboard nav is enabled - Keyboard navigation plugin is using a tar file for now but we'll ask Blockly for a release soon and update - Remove second step to enable keyboard nav after enabling the experiment, the objective is always enabled keyboard nav. - Blockers: - [ ] MakeCode copy/paste modifications are disabled to prevent conflict, next step needs discussion - [ ] Caching flyout is used, sidestepping caching, to avoid breaking Blockly assumptions that the flyout / flyout workspace doesn't change over time. Caching is valuable though, need to explore reinstating perhaps at a different level. - [ ] Focus outlines for the workspace need discussion and are currently incorrectly showing for some mouse interactions. Maybe OK for the experiment but not for enabled by default.

The connection lines are rendered incorrectly when moving blocks via keyboard, which use underlying drag methods. Easier to disable them than to try and get the right coords.

… block (#35)

theme/blockly-core.less

webapp/src/blocks.tsx

webapp/src/draganddrop.ts

microbit-matt-hillsdon · 2025-04-24T15:57:17Z

webapp/src/blocks.tsx

+            const injectionDiv = document.getElementById('blocksEditor');
+            injectionDiv.classList.add("accessibleBlocks");
+            const focusRingDiv = injectionDiv.appendChild(document.createElement("div"))
+            focusRingDiv.className = "blocklyWorkspaceFocusRingLayer";
+            this.editor.getSvgGroup().addEventListener("focus", () => {
+                focusRingDiv.dataset.focused = "true";
+            })
+            this.editor.getSvgGroup().addEventListener("blur", () => {
+                delete focusRingDiv.dataset.focused;
+            })


This gives a more reasonable focus ring for the workspace, one that isn't occluded on the left hand side by the toolbox. We should discuss this with Blockly and potentially move the behaviour to the plugin (maybe with options for a better implementation).

We are continuing to have discussions regarding the focus indicators, but we propose moving forward with this change for this initial PR.

webapp/src/app.tsx

microbit-matt-hillsdon · 2025-04-24T16:23:50Z

Agreed to restructure this around a setting rather than an experiment. Setting can reload the page.

riknoll · 2025-04-24T16:46:30Z

re: copy/paste, i assume this means the blockly plugin is also broken? seems like this should be something tackled by the blockly team. for now, your suggestion of disabling it when the experiment is active seems like an acceptable temporary solution

i'll look into a plan for the flyout

) - Removes accessible blocks onboarding dialog. - Remove use of theme to determine accessible blocks enablement. - Changes in accessible blocks settings should persist via user accounts / local storage.

This copies over some internals from the Blockly keyboard experimentation plugin and modifies them to suite our needs. We would welcome suggestions from Blockly regarding a more concrete solution.

Stop gap for cut/copy/paste conflicts with MakeCode

webapp/src/blocks.tsx

microbit-robert · 2025-05-01T13:51:21Z

re: copy/paste, i assume this means the blockly plugin is also broken? seems like this should be something tackled by the blockly team. for now, your suggestion of disabling it when the experiment is active seems like an acceptable temporary solution

Yes, we think it has the same issue. We've now disabled the custom copy/paste overrides in MakeCode if the keyboard nav plugin is enabled as a temporary work around. We explored whether the copy/paste behaviour in the keyboard nav plugin could be implemented in MakeCode, but it requires access to internals. We will raise this with the Blockly team to get their view on the best solution @rachel-fenichel.

This replaces 'c' to clean up workspace

microbit-robert · 2025-05-01T15:03:15Z

This PR is now in a state where it can be reviewed. Blockers have been addressed and the related follow-up issues will be tackled in follow-up PRs.

microbit-robert · 2025-05-01T16:44:56Z

Just highlighting that the keyboard navigation plugin is at a somewhat arbitrary point in its development. Blocks inserted from the flyout are currently inserted in 'move mode', but this is not clear in this version. A move icon has been added since, but is not in this released version. You will need to hit "Enter" to confirm the block position before doing anything else.

I've added some information about the keyboard controls below, but expect this PR to be more about the integration, than the plugin behaviour itself as this will change with updates going forward.

The basic keyboard controls:

Move mode controls:

riknoll

looks pretty good! just some minor comments

pxtblocks/plugins/duplicateOnDrag/dragStrategy.ts

theme/blockly-core.less

webapp/src/blocks.tsx

webapp/src/toolbox.tsx

riknoll · 2025-05-01T17:58:58Z

@microbit-matt-hillsdon here is an uploaded build with the changes from this PR:

https://makecode.microbit.org/app/5b64f555bd29c0c75350023549b02a28cb03c1b0-74c00c13f3

microbit-matt-hillsdon and others added 8 commits April 22, 2025 11:54

Don't show connection lines when moving blocks via keyboard

2c60e92

The connection lines are rendered incorrectly when moving blocks via keyboard, which use underlying drag methods. Easier to disable them than to try and get the right coords.

Don't show trash icon unless overlapping toolbox when keyboard moving…

8fd7376

… block (#35)

Upgrade keyboard navigation plugin

27c8a75

Override clean_up_workspace shortcut to use flow function (#36)

f945abb

Rebase fix

893197d

Use latest published version of keyboard experiment plugin

0eaa51e

Revert changes that are not required / workarounds

4a542e9

microbit-robert force-pushed the blockly-12-keyboard-exp branch from b8bf9fe to 4a542e9 Compare April 22, 2025 12:00

microbit-robert added 4 commits April 22, 2025 13:10

Update ThirdPartyNotice

aa39ba3

Tidy and minimize diff

ef660be

Avoid focus-visible style on toolbox categories on click

8e0bb98

Consistent approach to determine a mouse drag vs keyboard move

ab48b57

This was referenced Apr 24, 2025

Add global shortcuts to improve keyboard navigation microsoft/pxt-microbit#6151

Open

Keyboard navigation help documentation microsoft/pxt-microbit#6152

Open

microbit-matt-hillsdon reviewed Apr 24, 2025

View reviewed changes

theme/blockly-core.less Show resolved Hide resolved

microbit-matt-hillsdon reviewed Apr 24, 2025

View reviewed changes

webapp/src/blocks.tsx Outdated Show resolved Hide resolved

microbit-matt-hillsdon reviewed Apr 24, 2025

View reviewed changes

webapp/src/draganddrop.ts Outdated Show resolved Hide resolved

microbit-matt-hillsdon reviewed Apr 24, 2025

View reviewed changes

webapp/src/app.tsx Outdated Show resolved Hide resolved

microbit-grace and others added 4 commits April 30, 2025 11:56

Enable accessible blocks via settings option instead of experiments (#39

8770e21

) - Removes accessible blocks onboarding dialog. - Remove use of theme to determine accessible blocks enablement. - Changes in accessible blocks settings should persist via user accounts / local storage.

Merge branch 'master' into blockly-12-keyboard-exp

0ae8719

Add workaround for flyout cursor after new caching implementation

d5f19f0

This copies over some internals from the Blockly keyboard experimentation plugin and modifies them to suite our needs. We would welcome suggestions from Blockly regarding a more concrete solution.

Disable clipboard overwrite when accessible blocks enabled (#41)

4fc0ad4

Stop gap for cut/copy/paste conflicts with MakeCode

microbit-robert mentioned this pull request Apr 30, 2025

Add global shortcuts to improve keyboard navigation #10551

Closed

2 tasks

microbit-robert commented May 1, 2025

View reviewed changes

webapp/src/blocks.tsx Outdated Show resolved Hide resolved

Tidy up following review comments

d0d6bb0

Use 'f' as shortcut to format code

39f657a

This replaces 'c' to clean up workspace

microbit-robert marked this pull request as ready for review May 1, 2025 15:03

riknoll requested changes May 1, 2025

View reviewed changes

microbit-robert added 7 commits May 2, 2025 09:06

Remove unused import

ae4f56b

Fix CSS formatting

e13240a

Remove stray quotes

3312769

Fix tabs/spaces in function

242de2a

Single quotes -> double quotes

2d62a69

Add and use method to return SVGElement to CachingFlyout

4b72884

Tidy isFlyoutItemDisposed and prevent unnecessary flyout re-render

a52729d

microbit-robert requested a review from riknoll May 2, 2025 14:47

microbit-robert mentioned this pull request May 2, 2025

Add keyboard navigation help documentation #10556

Merged

Merge branch 'master' into blockly-12-keyboard-exp

7d14034

riknoll approved these changes May 5, 2025

View reviewed changes

riknoll merged commit 489df47 into microsoft:master May 5, 2025
12 checks passed

Upgrade to latest Blockly keyboard navigation plugin #10512

Upgrade to latest Blockly keyboard navigation plugin #10512

Uh oh!

Conversation

microbit-robert commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolved blockers

Follow-up issues:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

microbit-matt-hillsdon Apr 24, 2025

Choose a reason for hiding this comment

Uh oh!

microbit-robert May 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

microbit-matt-hillsdon commented Apr 24, 2025

Uh oh!

riknoll commented Apr 24, 2025

Uh oh!

Uh oh!

microbit-robert commented May 1, 2025

Uh oh!

microbit-robert commented May 1, 2025

Uh oh!

microbit-robert commented May 1, 2025

Uh oh!

riknoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

riknoll commented May 1, 2025

Uh oh!

Uh oh!

Uh oh!

microbit-robert commented Apr 10, 2025 •

edited

Loading