Flyout only default focuses blocks

[BenHenning]

Check for duplicates

• I have searched for similar issues before opening a new one.

Description

Navigating to the flyout with tab navigation with the keyboard experimentation plugin results in only the first block of the flyout being auto-focused rather than the first item.

Reproduction steps

1. Check out the latest versions of core Blockly and the keyboard experimentation plugin.
2. Link core Blockly to the keyboard experimentation plugin.
3. Start the keyboard experimentation plugin test environment playground.
4. Tab navigate to the toolbox.
5. Use arrow keys to navigate to 'Variables'.
6. Create a variable.
7. Refocus the toolbox (there's currently a bug wherein focus is completely lost after creating a variable).
8. Arrow key navigate back to 'Variables'.
9. Press 'right'.
10. Observe that the 'set variable' block is selected first rather than 'Create variable'.

The same can be observed via the 'misc' category, but that requires a fix for RaspberryPiFoundation/blockly-keyboard-experimentation#241 in order to navigate (since otherwise it's impossible to navigate to a category's flyout).

Stack trace

Screenshots

No response

Browsers

Chrome desktop

[BenHenning]

@rachel-fenichel it's not clear to me how critical this is to fix.

[BenHenning]

NB: This requires a fix here:

https://github.com/google/blockly/blob/d2c4016fcc271a93e7be543fd032b446441f67bd/core/workspace_svg.ts#L2703-L2710

We need to introduce a specialization case for flyouts so that the first item is selected rather than the first block. Probably something like this:

  /** See IFocusableTree.getRestoredFocusableNode. */
  getRestoredFocusableNode(
    previousNode: IFocusableNode | null,
  ): IFocusableNode | null {
    if (!previousNode) {
      const flyout = this.targetWorkspace?.getFlyout();
      if (this.isFlyout && flyout) {
        // Return the first focusable item of the flyout.
        for (const flyoutItem of flyout.getContents()) {
          const elem = flyoutItem.getElement();
          if (isFocusableNode(elem) && elem.canBeFocused()) {
            return elem;
          }
        }
      }
      return this.getTopBlocks(true)[0] ?? null;
    } else return null;
  }

(This is untested).

[microbit-robert]

This has a bigger impact in MakeCode due to the caching flyout implementation. When we tab to the flyout, the first item is a flyout label so fails this check. We then call super.getCurNode() which can return a hidden and disabled block that was previously focused in the flyout while a different toolbox category was open. We have worked around this problem in MakeCode so this comment is only to raise awareness of other scenarios where this has an impact.