fix!: Flyout follows toolbox in DOM

[mikeharv]

The basics

• I validated my changes

The details

Resolves

Fixes #9796

Proposed Changes

This change ensures that flyout appears in the DOM directly before the workspace in order to aid in tab navigation.

Reason for Changes

As reported by @microbit-robert:

When tabbing from the toolbox, the workspace takes focus. In the previous implementation, tabbing from the toolbox focused the flyout (or the first item in the flyout to be exact).
When tabbing from the flyout, whatever comes after the blockly injection div takes focus (the workspace is skipped, that includes the trashcan and zoom controls). In the previous implementation, tabbing from the flyout focused the workspace. This feels particularly confusing and it's easy to get lost.

Test Coverage

A new test ensures that the toolbox, flyout, and workspace are all contained in the injection div in the correct order. The ordering is relative rather than absolute in order to permit flexibility with other children, such as scrollbars.

BREAKING CHANGE

This change may affect you if you application relies on the specific child order of elements in the Blockly injective div.

Previously the DOM structure was:

1. toolbox
2. workspace
3. flyout

It is now:

1. toolbox
2. flyout
3. workspace