Focus gets reset when exitting "Connect" dialog via "more connect options"

[kmcnaught]

Bug Description

GOOD: When you use the "Send to micro:bit" button and then cancel the "Connect cable" dialog, the focus is correctly put back on the "Send to micro:bit" button. Hurrah.

BAD: If you access the same dialog from the "more connect options" button -> "Connect" workflow, focus is reset to the top left of the screen and if you are navigating with a screen reader or keyboard control, then it is a pain to get back to the project actions.

How To Reproduce

Steps to reproduce the behavior:

1. There is no micro:bit connected
2. Click on the 'more actions' menu button
3. Click on "Connect"
4. Exit the dialog either by pressing escape, clicking on the "X" or "Cancel" or using keyboard controls to select "X" or "Cancel"
5. Press tab to observe focus

Expected behavior

Focus should be put back to the 'more actions' menu button or at least the project actions region

Environment

Windows 10 / Chrome / live site

[microbit-matt-hillsdon]

Thanks @kmcnaught.

This seems to be generally true of focus after modals triggered by this kind of menu item.

It applies to the About dialog from the Help menu and the Language and Settings dialogs from the settings cog menu.

We'll have to do something explicit as the previously focussed element is no longer visible once a menu item has been selected. It should probably be fixed by passing a ref to the triggering button to the dialog opening code. I think the dialog component itself already has a finalFocusRef prop but we might need to pass it through dialog helper code.