Passive focus tweaks

Author: microbit-matt-hillsdon

src/index.ts

@@ -35,6 +35,25 @@ export class KeyboardNavigation {
    */
   private originalTheme: Blockly.Theme;
 
+  /**
+   * Layer for the workspace.
+   */
+  private workspaceFocusRingDiv: HTMLElement | null = null;
+
+  /**
+   * Updates the focus ring layer for the workspace when focus moves to the
+   * workspace.
+   */
+  private workspaceFocusInListener = () => {
+    this.workspaceFocusRingDiv?.classList.add('blocklyWorkspaceFocused');
+  };
+  /**
+   * Updates the focus ring layer for the workspace when focus moves elsewhere.
+   */
+  private workspaceFocusOutListener = () => {
+    this.workspaceFocusRingDiv?.classList.remove('blocklyWorkspaceFocused');
+  };
+
   /**
    * Constructs the keyboard navigation.
    *
@@ -75,12 +94,40 @@ export class KeyboardNavigation {
         workspace.getParentSvg(),
       );
     }
+
+    // Add a layer for a workspace outline and wire up events.
+    this.workspaceFocusRingDiv = workspace
+      .getInjectionDiv()
+      .appendChild(document.createElement('div')) as HTMLElement;
+    this.workspaceFocusRingDiv.className = 'blocklyWorkspaceFocusRingLayer';
+    Object.assign(this.workspaceFocusRingDiv.style, {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      bottom: '0px',
+      right: '0px',
+      pointerEvents: 'none',
+      zIndex: '999',
+    } satisfies Partial<CSSStyleDeclaration>);
+    workspace
+      .getSvgGroup()
+      .addEventListener('focusin', this.workspaceFocusInListener);
+    workspace
+      .getSvgGroup()
+      .addEventListener('focusout', this.workspaceFocusOutListener);
   }
 
   /**
    * Disables keyboard navigation for this navigator's workspace.
    */
   dispose() {
+    this.workspace
+      .getSvgGroup()
+      .removeEventListener('focusin', this.workspaceFocusInListener);
+    this.workspace
+      .getSvgGroup()
+      .removeEventListener('focusout', this.workspaceFocusOutListener);
+
     // Remove the event listener that enables blocks on drag
     this.workspace.removeChangeListener(enableBlocksOnDrag);
 

test/index.html

@@ -31,13 +31,6 @@
         width: 100%;
         max-height: 100%;
         position: relative;
-        --outline-width: 5px;
-      }
-
-      .blocklyFlyout {
-        top: var(--outline-width);
-        left: var(--outline-width);
-        height: calc(100% - calc(var(--outline-width) * 2));
       }
 
       .blocklyToolboxDiv ~ .blocklyFlyout:focus {
@@ -97,53 +90,49 @@
         font-weight: bold;
       }
 
-      .blocklyActiveFocus:is(
-          .blocklyField,
-          .blocklyPath,
-          .blocklyHighlightedConnectionPath
-        ) {
-        stroke: #ffa200;
-        stroke-width: 3px;
+      html {
+        --blockly-active-node-color: #ffa200;
+        --blockly-active-tree-color: rgb(97, 91, 127);
+        --blockly-selection-width: 3px;
       }
-      .blocklyActiveFocus > .blocklyFlyoutBackground,
-      .blocklyActiveFocus > .blocklyMainBackground {
-        stroke: #ffa200;
-        stroke-width: 3px;
+      * {
+        box-sizing: border-box;
       }
-      .blocklyActiveFocus:is(
-          .blocklyToolbox,
-          .blocklyToolboxCategoryContainer
-        ) {
-        outline: 3px solid #ffa200;
+
+      /* Blocks, connections and fields. */
+      .blocklyActiveFocus:is(.blocklyPath, .blocklyHighlightedConnectionPath),
+      .blocklyActiveFocus.blocklyField > .blocklyFieldRect {
+        stroke: var(--blockly-active-node-color);
+        stroke-width: var(--blockly-selection-width);
       }
       .blocklyPassiveFocus:is(
-          .blocklyField,
-          .blocklyPath,
+          .blocklyPath:not(.blocklyFlyout .blocklyPath),
           .blocklyHighlightedConnectionPath
-        ) {
-        stroke: #ffa200;
-        stroke-dasharray: 5px 3px;
-        stroke-width: 3px;
-      }
-      .blocklyPassiveFocus > .blocklyFlyoutBackground,
-      .blocklyPassiveFocus > .blocklyMainBackground {
-        stroke: #ffa200;
+        ),
+      .blocklyPassiveFocus.blocklyField > .blocklyFieldRect {
+        stroke: var(--blockly-active-node-color);
         stroke-dasharray: 5px 3px;
-        stroke-width: 3px;
+        stroke-width: var(--blockly-selection-width);
       }
-      .blocklyPassiveFocus:is(
-          .blocklyToolbox,
-          .blocklyToolboxCategoryContainer
-        ) {
-        border: 3px dashed #ffa200;
-      }
-      .blocklySelected:is(.blocklyPath) {
-        stroke: #ffa200;
-        stroke-width: 5;
-      }
-      .blocklySelected > .blocklyPathLight {
-        display: none;
+
+      /* Toolbox and flyout. */
+      .blocklyFlyout:has(.blocklyActiveFocus),
+      .blocklyToolbox:has(.blocklyActiveFocus),
+      .blocklyActiveFocus:is(.blocklyFlyout, .blocklyToolbox) {
+        outline-offset: calc(var(--blockly-selection-width) * -1);
+        outline: var(--blockly-selection-width) solid
+          var(--blockly-active-tree-color);
+      }
+      /* Separate layer so we can have a visible outline. */
+      .blocklyWorkspaceFocusRingLayer.blocklyWorkspaceFocused {
+        outline-offset: calc(var(--blockly-selection-width) * -1);
+        outline: var(--blockly-selection-width) solid
+          var(--blockly-active-tree-color);
+      }
+      .blocklyToolboxCategoryContainer:focus-visible {
+        outline: none;
       }
+      /*TODO: moving a block should have active styling for connection & block */
     </style>
   </head>