Focus outlines are not showing on the first tab navigation (first time)

[joreneng]

Check for duplicates

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

Description

The focus outlines are not showing on the first tab navigation before any arrow navigation (toolbox/workspace/flyout).

Reproduction steps

1. Start tabbing on a freshly opened page
2. Observe the focus styles

Stack trace

Screenshots

Active.focus.mp4

Browsers

No response

[microbit-matt-hillsdon]

I think this is related to the decision not to count tabbing to the toolbox/workspace as keyboard navigation. Very few of the keyboard nav styles take effect until the keyboard navigation controller in core is set active, e.g. via arrow navigation.

The outline around the toolbox category is likely a mistake and needs a CSS fix. I think the rest is by design, but it's something I've been meaning to come back to and discuss as I don't understand the reason why tabbing to the toolbox/flyout/workspace doesn't count as keyboard navigation.

If the workspace is empty when you tab back in (not possible in the test app) then there is no focus indication at all.

You can also see the same state as the video after arrow navigation by performing a mouse drag, which sets the keyboard navigation controller back to inactive, then shift-tabbing back to the toolbox.