Show an overlay when native dialogs are up (#608)

I tried using before/afterrequestdevice events but it was more involved and had
gaps in the radio bridge flow with no overlay.

Bluetooth is already fine as a "connecting" dialog is shown in the background.

Author: microbit-matt-hillsdon

src/components/ChooseDeviceOverlay.tsx

@@ -0,0 +1,29 @@
+/**
+ * (c) 2025, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { Box } from "@chakra-ui/react";
+import { useIntl } from "react-intl";
+
+const ChooseDeviceOverlay = () => {
+  const intl = useIntl();
+  return (
+    <Box
+      // We don't really expect it to be possible to interact with this overlay
+      // as it is only shown when the native browser requestDeviceDialog is
+      // open. But still useful for code trying to identify open dialogs.
+      role="dialog"
+      aria-label={intl.formatMessage({ id: "connect-popup-instruction1" })}
+      width="100vw"
+      height="100vh"
+      background="blackAlpha.600"
+      position="fixed"
+      top={0}
+      left={0}
+      zIndex="overlay"
+    />
+  );
+};
+
+export default ChooseDeviceOverlay;

src/components/ConnectionFlowDialogs.tsx

@@ -32,6 +32,7 @@ import TryAgainDialog from "./TryAgainDialog";
 import UnsupportedMicrobitDialog from "./UnsupportedMicrobitDialog";
 import WebUsbBluetoothUnsupportedDialog from "./WebUsbBluetoothUnsupportedDialog";
 import WhatYouWillNeedDialog from "./WhatYouWillNeedDialog";
+import ChooseDeviceOverlay from "./ChooseDeviceOverlay";
 
 const ConnectionDialogs = () => {
   const { stage, actions } = useConnectionStage();
@@ -174,7 +175,7 @@ const ConnectionDialogs = () => {
     }
     case ConnectionFlowStep.WebUsbChooseMicrobit: {
       // Browser dialog is shown, no custom dialog shown at the same time
-      return <></>;
+      return <ChooseDeviceOverlay />;
     }
     case ConnectionFlowStep.FlashingInProgress: {
       return (