Version history renders two dialogs and leaves focus on the wrong one

[microbit-robert]

Describe the bug
When triggering "Version History" feature either by mouse or keyboard, two dialogs are rendered.

See this code in dialogs.tsx where core.dialogAsync results in the first dialog being rendered where options.jsx are rendered inside this dialog as a child component. However, in this case, options.jsx is the TimeMachine component which is a dialog in its own right and is rendered as a portal outside and as a sibling to the first dialog.

Focus is moved to the first dialog. Tabbing moves focus to the only focusable element in this dialog which is a back button (as an odd side-effect, if you hit tab, and then enter, both dialogs close). As a result, the second dialog, which is the one actually shown to the user, is not navigable by keyboard and no focus-visible indicators are shown. This also impacts screen reader accessibility.

To Reproduce
Steps to reproduce the behavior:

1. Go to settings and open "Version History"
2. Hit the tab key (once or many times) and see no focus-visible indicators
3. You are unable to interact with the UI via keyboard navigation in any meaningful way
4. Hit "Enter" after hitting the tab key to see the dialogs close. This is because the back button in the first dialog is focussed at this point, but this is not clear to the user.

Expected behavior
Only one dialog should be rendered and take focus.

Screenshots
Screenshot of DOM showing dialogs 1 and 2 as siblings:

micro:bit version (please complete the following information):
Not hardware related

Desktop (please complete the following information):

• Windows 11
• Browser Chrome v132

Additional context
N/A