a11y: focus modals and esc closes err modal

[microbit-mark]

closes https://github.com/microbit-foundation/platform-software-issue-tracker/issues/540 and closes https://github.com/microbit-foundation/platform-software-issue-tracker/issues/547

[microbit-carlos]

I've tested this on firefox and the WebUB not available modal was not focused. The esc key worked, but couldn't navigate to the "Find Out More" like with the keyboard.

[microbit-mark]

I've tested this on firefox and the WebUB not available modal was not focused. The esc key worked, but couldn't navigate to the "Find Out More" like with the keyboard.

I can't recreate this issue. It seems to work for me

Does the text look grey in the title of the modal? Not sure why that happened, can't recreate again.

[microbit-carlos]

Why is the WebUSB text and cross grey? Do you have uncommited code in your local repo?

Pulling the latest code from this branch and still cannot tab into the modal (you can follow the mouse to see what tab is doing):

[microbit-mark]

I have opened an issue for the link focus issue here https://github.com/microbit-foundation/platform-software-issue-tracker/issues/596

[microbit-carlos]

Hey @microbit-mark when testing the modalMsg (trigger for the webUSB-not-available message, or trying to load an .mpy file into the editor) I found a couple of issues with keeping the focus on the modal, so I've added a few commits.
Could you review them and run your tests?

There is also an issue with tabbing into the "Find Out More" link inside the WebUSB-not-available message, but that falls out of scope for this PR and we can fix as part of https://github.com/microbit-foundation/platform-software-issue-tracker/issues/596.

[microbit-mark]

Thanks @microbit-carlos. LGTM I've tested the changes in FF, Safari Chrome and Edge