Ensure focus returns to menu buttons for accessibility purposes (#991)

Closes #974

Note that this will not be available on the beta until later today.

Author: microbit-robert

src/common/GenericDialog.tsx

@@ -24,6 +24,7 @@ export interface GenericDialogProps {
   size?: ThemeTypings["components"]["Modal"]["sizes"];
   onClose: () => void;
   returnFocusOnClose?: boolean;
+  finalFocusRef?: React.RefObject<HTMLButtonElement>;
 }
 
 export const GenericDialog = ({
@@ -33,13 +34,15 @@ export const GenericDialog = ({
   size,
   onClose,
   returnFocusOnClose = true,
+  finalFocusRef = undefined,
 }: GenericDialogProps) => {
   return (
     <Modal
       isOpen
       onClose={onClose}
       size={size}
       returnFocusOnClose={returnFocusOnClose}
+      finalFocusRef={finalFocusRef}
     >
       <ModalOverlay>
         <ModalContent minWidth="560px" my="auto">

src/common/InputDialog.tsx

@@ -35,6 +35,7 @@ export interface InputDialogProps<T> {
   size?: ThemeTypings["components"]["Modal"]["sizes"];
   validate?: (input: T) => string | undefined;
   customFocus?: boolean;
+  finalFocusRef?: React.RefObject<HTMLButtonElement>;
   callback: (value: ValueOrCancelled<T>) => void;
 }
 
@@ -50,6 +51,7 @@ export const InputDialog = <T,>({
   initialValue,
   size,
   customFocus,
+  finalFocusRef = undefined,
   validate = noValidation,
   callback,
 }: InputDialogProps<T>) => {
@@ -70,6 +72,7 @@ export const InputDialog = <T,>({
       onClose={onCancel}
       size={size}
       initialFocusRef={customFocus ? undefined : leastDestructiveRef}
+      finalFocusRef={finalFocusRef}
     >
       <ModalOverlay>
         <ModalContent>

src/common/MultipleFilesDialog.tsx

@@ -16,11 +16,16 @@ export const enum MultipleFilesChoice {
 
 interface MultipleFilesDialogProps {
   callback: (value: MultipleFilesChoice) => void;
+  finalFocusRef: React.RefObject<HTMLButtonElement>;
 }
 
-export const MultipleFilesDialog = ({ callback }: MultipleFilesDialogProps) => {
+export const MultipleFilesDialog = ({
+  callback,
+  finalFocusRef,
+}: MultipleFilesDialogProps) => {
   return (
     <GenericDialog
+      finalFocusRef={finalFocusRef}
       onClose={() => callback(MultipleFilesChoice.Close)}
       body={<MultipleFilesDialogBody />}
       footer={

src/common/PostSaveDialog.tsx

@@ -18,18 +18,21 @@ export const enum PostSaveChoice {
 interface PostSaveDialogProps {
   callback: (value: PostSaveChoice) => void;
   dialogNormallyHidden: boolean;
+  finalFocusRef: React.RefObject<HTMLButtonElement>;
 }
 
 export const PostSaveDialog = ({
   callback,
   dialogNormallyHidden,
+  finalFocusRef,
 }: PostSaveDialogProps) => {
   const onShowTransferHexHelp = useCallback(() => {
     callback(PostSaveChoice.ShowTransferHexHelp);
   }, [callback]);
   return (
     <GenericDialog
       onClose={() => callback(PostSaveChoice.Close)}
+      finalFocusRef={finalFocusRef}
       body={
         <PostSaveDialogBody onShowTransferHexHelp={onShowTransferHexHelp} />
       }

src/project/FlashButton.tsx

@@ -9,31 +9,38 @@ import {
   MenuButtonProps,
   ThemeTypings,
 } from "@chakra-ui/react";
+import React, { ForwardedRef } from "react";
 import { MdMoreVert } from "react-icons/md";
 
 interface MoreMenuButtonProps extends MenuButtonProps {
   size?: ThemeTypings["components"]["Button"]["sizes"];
   variant?: string;
 }
 
-const MoreMenuButton = ({ size, variant, ...props }: MoreMenuButtonProps) => {
-  return (
-    <MenuButton
-      variant={variant}
-      borderLeft="1px"
-      borderRadius="button"
-      as={IconButton}
-      icon={
-        <MdMoreVert
-          style={{
-            marginLeft: "calc(-0.15 * var(--chakra-radii-button))",
-          }}
-        />
-      }
-      size={size}
-      {...props}
-    />
-  );
-};
+const MoreMenuButton = React.forwardRef(
+  (
+    { size, variant, ...props }: MoreMenuButtonProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    return (
+      <MenuButton
+        ref={ref}
+        variant={variant}
+        borderLeft="1px"
+        borderRadius="button"
+        as={IconButton}
+        icon={
+          <MdMoreVert
+            style={{
+              marginLeft: "calc(-0.15 * var(--chakra-radii-button))",
+            }}
+          />
+        }
+        size={size}
+        {...props}
+      />
+    );
+  }
+);
 
 export default MoreMenuButton;

src/project/MoreMenuButton.tsx

@@ -10,8 +10,15 @@ import OpenButton from "./OpenButton";
 import { widthXl } from "../common/media-queries";
 import React, { ForwardedRef } from "react";
 
+interface ProjectActionBarProps extends BoxProps {
+  sendButtonRef: React.RefObject<HTMLButtonElement>;
+}
+
 const ProjectActionBar = React.forwardRef(
-  (props: BoxProps, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { sendButtonRef, ...props }: ProjectActionBarProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
     const [isWideScreen] = useMediaQuery(widthXl);
     const size = "lg";
     return (
@@ -21,7 +28,7 @@ const ProjectActionBar = React.forwardRef(
         py={5}
         px={isWideScreen ? 10 : 5}
       >
-        <SendButton size={size} ref={ref} />
+        <SendButton size={size} ref={ref} sendButtonRef={sendButtonRef} />
         <HStack spacing={2.5}>
           <SaveMenuButton size={size} />
           {/* Min-width to avoid collapsing when out of space. Needs some work on responsiveness of the action bar. */}

src/project/ProjectActionBar.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Tooltip } from "@chakra-ui/react";
+import { useRef } from "react";
 import { RiDownload2Line } from "react-icons/ri";
 import { useIntl } from "react-intl";
 import CollapsibleButton, {
@@ -25,6 +26,7 @@ interface SaveButtonProps
 const SaveButton = (props: SaveButtonProps) => {
   const actions = useProjectActions();
   const intl = useIntl();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
   return (
     <Tooltip
       hasArrow
@@ -34,9 +36,10 @@ const SaveButton = (props: SaveButtonProps) => {
       })}
     >
       <CollapsibleButton
+        ref={menuButtonRef}
         {...props}
         icon={<RiDownload2Line />}
-        onClick={() => actions.save()}
+        onClick={() => actions.save(menuButtonRef)}
         text={intl.formatMessage({
           id: "save-action",
         })}

src/project/SaveButton.tsx

@@ -18,6 +18,7 @@ import { zIndexAboveTerminal } from "../common/zIndex";
 import SaveButton from "./SaveButton";
 import MoreMenuButton from "./MoreMenuButton";
 import { useProjectActions } from "./project-hooks";
+import { useRef } from "react";
 
 interface SaveMenuButtonProps {
   size?: ThemeTypings["components"]["Button"]["sizes"];
@@ -32,12 +33,14 @@ interface SaveMenuButtonProps {
 const SaveMenuButton = ({ size }: SaveMenuButtonProps) => {
   const intl = useIntl();
   const actions = useProjectActions();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
   return (
     <HStack>
       <Menu>
         <ButtonGroup isAttached>
           <SaveButton mode="button" size={size} borderRight="1px" />
           <MoreMenuButton
+            ref={menuButtonRef}
             aria-label={intl.formatMessage({ id: "more-save-options" })}
             size={size}
             data-testid="more-save-options"
@@ -46,7 +49,7 @@ const SaveMenuButton = ({ size }: SaveMenuButtonProps) => {
             <MenuList zIndex={zIndexAboveTerminal}>
               <MenuItem
                 icon={<RiDownload2Line />}
-                onClick={actions.saveMainFile}
+                onClick={() => actions.saveMainFile(menuButtonRef)}
               >
                 <FormattedMessage id="save-python-action" />
               </MenuItem>

src/project/SaveMenuButton.tsx

@@ -25,18 +25,22 @@ import { useProjectActions } from "./project-hooks";
 
 interface SendButtonProps {
   size?: ThemeTypings["components"]["Button"]["sizes"];
+  sendButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
 const SendButton = React.forwardRef(
-  ({ size }: SendButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { size, sendButtonRef }: SendButtonProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
     const status = useConnectionStatus();
     const connected = status === ConnectionStatus.CONNECTED;
     const actions = useProjectActions();
     const handleToggleConnected = useCallback(async () => {
       if (connected) {
-        await actions.disconnect();
+        await actions.disconnect(menuButtonRef);
       } else {
-        await actions.connect(false, ConnectionAction.CONNECT);
+        await actions.connect(false, ConnectionAction.CONNECT, menuButtonRef);
       }
     }, [connected, actions]);
     const intl = useIntl();
@@ -54,14 +58,14 @@ const SendButton = React.forwardRef(
         lastCompleteFlash: flashing.current.lastCompleteFlash,
       };
       try {
-        await actions.flash();
+        await actions.flash(sendButtonRef);
       } finally {
         flashing.current = {
           flashing: false,
           lastCompleteFlash: new Date().getTime(),
         };
       }
-    }, [flashing, actions]);
+    }, [flashing, actions, sendButtonRef]);
     const handleFocus = useCallback(
       (e) => {
         const inProgress = flashing.current.flashing;
@@ -74,6 +78,7 @@ const SendButton = React.forwardRef(
       },
       [flashing]
     );
+    const menuButtonRef = useRef<HTMLButtonElement>(null);
     return (
       <HStack>
         <Menu>
@@ -97,6 +102,7 @@ const SendButton = React.forwardRef(
               </Button>
             </Tooltip>
             <MoreMenuButton
+              ref={menuButtonRef}
               variant="solid"
               aria-label={intl.formatMessage({ id: "more-connect-options" })}
               data-testid="more-connect-options"