feat: allow for toolbox with multiple tab stops (#358)

- Switch to focusin/out for toolbox (maybe in future elsewhere)
- Drop the tab index fiddling as it's not practical to get it right in the face
  of more than one tab stop in the toolbox, especially if that toolbox has a
  DOM structure not known to the plugin.

  Given that we're reinstating the ability to shift-tab flyout->toolbox it
  makes sense to allow tab to the flyout. Shift-tab to the flyout remains not
  possible in the auto-hide case but that's not unreasonable.

This version can be made to work with MakeCode without further modifications.

Author: microbit-matt-hillsdon

src/index.ts

@@ -34,10 +34,10 @@ export class KeyboardNavigation {
   private widgetDropDownDivFocusOutListener: (e: Event) => void;
 
   /** Event handler run when the toolbox gains focus. */
-  private toolboxFocusListener: () => void;
+  private toolboxFocusInListener: (e: Event) => void;
 
   /** Event handler run when the toolbox loses focus. */
-  private toolboxBlurListener: (e: Event) => void;
+  private toolboxFocusOutListener: (e: Event) => void;
 
   /** Event handler run when the flyout gains focus. */
   private flyoutFocusListener: () => void;
@@ -112,10 +112,6 @@ export class KeyboardNavigation {
       flyoutElement,
       workspace.getParentSvg(),
     );
-    // Allow tab to the flyout only when there's no toolbox.
-    if (workspace.getToolbox() && flyoutElement) {
-      flyoutElement.tabIndex = -1;
-    }
 
     // Temporary workaround for #136.
     this.oldMarkFocused = workspace.markFocused;
@@ -179,10 +175,26 @@ export class KeyboardNavigation {
     );
 
     const toolboxElement = getToolboxElement(workspace);
-    this.toolboxFocusListener = () => {
+    this.toolboxFocusInListener = (e: Event) => {
+      if (
+        (e.currentTarget as Element).contains(
+          (e as FocusEvent).relatedTarget as Node,
+        )
+      ) {
+        return;
+      }
+
       this.navigationController.handleFocusToolbox(workspace);
     };
-    this.toolboxBlurListener = (e: Event) => {
+    this.toolboxFocusOutListener = (e: Event) => {
+      if (
+        (e.currentTarget as Element).contains(
+          (e as FocusEvent).relatedTarget as Node,
+        )
+      ) {
+        return;
+      }
+
       this.navigationController.handleBlurToolbox(
         workspace,
         this.shouldCloseFlyoutOnBlur(
@@ -191,8 +203,8 @@ export class KeyboardNavigation {
         ),
       );
     };
-    toolboxElement?.addEventListener('focus', this.toolboxFocusListener);
-    toolboxElement?.addEventListener('blur', this.toolboxBlurListener);
+    toolboxElement?.addEventListener('focusin', this.toolboxFocusInListener);
+    toolboxElement?.addEventListener('focusout', this.toolboxFocusOutListener);
 
     this.flyoutFocusListener = () => {
       this.navigationController.handleFocusFlyout(workspace);
@@ -238,8 +250,11 @@ export class KeyboardNavigation {
     );
 
     const toolboxElement = getToolboxElement(this.workspace);
-    toolboxElement?.removeEventListener('focus', this.toolboxFocusListener);
-    toolboxElement?.removeEventListener('blur', this.toolboxBlurListener);
+    toolboxElement?.removeEventListener('focusin', this.toolboxFocusInListener);
+    toolboxElement?.removeEventListener(
+      'focusout',
+      this.toolboxFocusOutListener,
+    );
 
     const flyoutElement = getFlyoutElement(this.workspace);
     flyoutElement?.removeEventListener('focus', this.flyoutFocusListener);

src/navigation.ts

@@ -540,12 +540,6 @@ export class Navigation {
     if (!Blockly.Gesture.inProgress()) {
       this.defaultFlyoutCursorIfNeeded(workspace);
     }
-
-    // Prevent shift-tab to the toolbox while the flyout has focus.
-    const toolboxElement = getToolboxElement(workspace);
-    if (toolboxElement) {
-      toolboxElement.tabIndex = -1;
-    }
   }
 
   /**
@@ -561,12 +555,6 @@ export class Navigation {
       workspace.hideChaff();
     }
     this.getFlyoutCursor(workspace)?.hide();
-
-    // Reinstate tab to toolbox.
-    const toolboxElement = getToolboxElement(workspace);
-    if (toolboxElement) {
-      toolboxElement.tabIndex = 0;
-    }
   }
 
   /**