Add plugin, fix focus outlines

Maybe we'll want workspace focus to be inside of the toolbox, TBD.

Plugin based on the Blockly 11 commit of
RaspberryPiFoundation/blockly-keyboard-experimentation#358

Author: microbit-matt-hillsdon

blockly-keyboard-experiment-0.0.5.tgz

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@blockly/field-colour": "5.0.5",
-    "@blockly/keyboard-experiment": "0.0.1",
+    "@blockly/keyboard-experiment": "file:blockly-keyboard-experiment-0.0.5.tgz",
     "@blockly/plugin-workspace-search": "9.1.0",
     "@crowdin/crowdin-api-client": "^1.33.0",
     "@fortawesome/fontawesome-free": "^5.15.4",

package.json

@@ -50,13 +50,7 @@ svg.blocklySvg {
     }
 }
 
-.blocklyWorkspace:focus {
-    outline: none;
-}
-.blocklyWorkspace:focus-visible .blocklyMainBackground {
-    outline: 5px solid black;
-    outline-offset: -5px;
-}
+
 
 .blocklyMainBackground {
     stroke: none !important;
@@ -390,3 +384,45 @@ text.blocklyCheckbox {
         font-size: 17pt !important;
     }
 }
+
+
+/*******************************
+        Focus styles
+*******************************/
+
+.accessibleBlocks .blocklyWorkspace:focus,.blocklyWorkspaceFocusLayer:focus {
+    outline: none;
+}
+
+.accessibleBlocks .blocklyWorkspaceFocusRingLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    pointer-events: none;
+    z-index: 99;
+}
+
+.accessibleBlocks .blocklyWorkspaceFocusRingLayer[data-focused = 'true'] {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}
+
+div.blocklyTreeRoot > div[role="tree"]:focus-visible {
+    outline: none;
+}
+
+.accessibleBlocks div.blocklyTreeRoot > div[role="tree"]:focus-visible {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}
+
+.accessibleBlocks .blocklyFlyout:focus {
+    outline: none;
+}
+
+.accessibleBlocks .blocklyFlyout:focus-visible {
+    outline: 3px solid black;
+    outline-offset: -3px;
+}

theme/blockly-core.less

@@ -59,15 +59,6 @@ div.blocklyTreeRoot:focus {
     outline: none;
 }
 
-div.blocklyTreeRoot > div[role="tree"]:focus-visible {
-    outline: 3px solid black;
-    outline-offset: -3px;
-}
-
-div.blocklyTreeRoot > div[role="tree"] > div:focus-visible {
-    outline: none;
-}
-
 /*******************************
         Toolbox tree row
 *******************************/

theme/toolbox.less

@@ -498,16 +498,19 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
         /**
          * Override blockly methods to support our custom toolbox.
+         *
+         * We don't generally use this selection but keyboard nav will trigger
+         * it to select the first category and clear the selection.
          */
         const that = this;
-        (Blockly as any).Toolbox.prototype.updateFlyout_ = function (oldItem: Blockly.ISelectableToolboxItem | null, newItem: Blockly.ISelectableToolboxItem | null) {
-            // Keyboard nav triggers selection on the Blockly toolbox
-            // (first item + clear as we intercept all other events).
-            // Hook in just to hide the flyout when selection is cleared.
+        (Blockly as any).Toolbox.prototype.setSelectedItem = function (newItem: Blockly.ISelectableToolboxItem | null) {
             if (newItem === null) {
                 that.hideFlyout();
             }
         };
+        (Blockly as any).Toolbox.prototype.clearSelection = function () {
+            that.hideFlyout();
+        };
         (Blockly.WorkspaceSvg as any).prototype.refreshToolboxSelection = function () {
             let ws = this.isFlyout ? this.targetWorkspace : this;
             if (ws && !ws.currentGesture_ && ws.toolbox_ && ws.toolbox_.flyout_) {
@@ -547,6 +550,17 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         const enabled = pxt.appTarget.appTheme?.accessibleBlocks;
         if (enabled && !this.keyboardNavigation) {
             this.keyboardNavigation = new KeyboardNavigation(this.editor);
+
+            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;
+            })
         }
     }
 
@@ -937,21 +951,23 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         if (pxt.shell.isReadOnly()) return;
         const blocklyToolboxDiv = this.getBlocklyToolboxDiv();
         const blocklyToolbox = <div className="blocklyToolbox">
-            <div className="blocklyToolboxContents" tabIndex={-1}>
+            <div className="blocklyToolboxContents" tabIndex={-1} onFocus={this.handleToolboxContentsFocusCapture}>
                 <toolbox.Toolbox ref={this.handleToolboxRef} editorname="blocks" parent={this} />
                 {<div id="debuggerToolbox"></div>}
             </div>
         </div>;
         Util.assert(!!blocklyToolboxDiv);
         ReactDOM.render(blocklyToolbox, blocklyToolboxDiv);
-        blocklyToolboxDiv.querySelector(".blocklyToolboxContents").addEventListener("focus", () => {
-            console.log("Did it happen?");
-            (blocklyToolboxDiv.querySelector("[role=tree]") as HTMLElement).focus()
-        })
 
         if (!immediate) this.toolbox.showLoading();
     }
 
+    private handleToolboxContentsFocusCapture = (e: React.FocusEvent) => {
+        if (e.target === e.currentTarget) {
+            (this.getBlocklyToolboxDiv().querySelector("[role=tree]") as HTMLElement).focus()
+        }
+    }
+
     updateToolbox() {
         const container = document.getElementById('debuggerToolbox');
         if (!container) return;