Allow tooltips to be focusable (#526)

* Allow tooltips to be focusable
* Prevent multiple tooltips, add escape to close
* Disabled tooltips are not focusable

Author: microbit-robert

src/components/ClickableTooltip.tsx

@@ -1,21 +1,62 @@
 import { Flex, Tooltip, TooltipProps, useDisclosure } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import { ReactNode, useCallback, useRef } from "react";
 
 interface ClickableTooltipProps extends TooltipProps {
   children: ReactNode;
+  isFocusable?: boolean;
 }
 
 // Chakra Tooltip doesn't support triggering on mobile/tablets:
 // https://github.com/chakra-ui/chakra-ui/issues/2691
 
-const ClickableTooltip = ({ children, ...rest }: ClickableTooltipProps) => {
+const ClickableTooltip = ({
+  children,
+  isFocusable = false,
+  isDisabled,
+  ...rest
+}: ClickableTooltipProps) => {
   const label = useDisclosure();
+  const ref = useRef<HTMLDivElement>(null);
+  const handleMouseEnter = useCallback(() => {
+    const openTooltips = document.querySelectorAll(
+      '[role="tooltip"]:not([hidden])'
+    );
+    if (!openTooltips.length) {
+      label.onOpen();
+    }
+  }, [label]);
+  const handleMouseLeave = useCallback(() => {
+    if (
+      !isFocusable ||
+      (ref.current !== document.activeElement && isFocusable)
+    ) {
+      label.onClose();
+    }
+  }, [isFocusable, label]);
+  const handleKeydown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Escape") {
+        label.onClose();
+      }
+    },
+    [label]
+  );
   return (
-    <Tooltip isOpen={label.isOpen} {...rest}>
+    <Tooltip isOpen={label.isOpen} {...rest} closeOnEsc={true}>
       <Flex
-        onMouseEnter={label.onOpen}
-        onMouseLeave={label.onClose}
+        onKeyDown={handleKeydown}
+        ref={ref}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
         onClick={label.onOpen}
+        tabIndex={isDisabled ? undefined : 0}
+        onFocus={isFocusable ? label.onOpen : undefined}
+        onBlur={isFocusable ? label.onClose : undefined}
+        _focusVisible={{
+          boxShadow: "outline",
+          outline: "none",
+        }}
+        borderRadius="50%"
       >
         {children}
       </Flex>

src/components/HeadingGrid.tsx

@@ -35,14 +35,14 @@ const GridColumnHeadingItem = (props: GridColumnHeadingItemProps) => {
     <GridItem>
       {props.titleId && props.descriptionId && (
         <HStack justifyContent="space-between">
-          <HStack opacity={0.7}>
-            <Text>
+          <HStack>
+            <Text opacity={0.7}>
               <FormattedMessage id={props.titleId} />
             </Text>
             <InfoToolTip
               titleId={props.titleId}
               descriptionId={props.descriptionId}
-            ></InfoToolTip>
+            />
           </HStack>
           {props.itemsRight}
         </HStack>

src/components/InfoToolTip.tsx

@@ -1,19 +1,21 @@
-import { Icon, Text, VStack } from "@chakra-ui/react";
+import { Icon, Text, TooltipProps, VStack } from "@chakra-ui/react";
 import { RiInformationLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import ClickableTooltip from "./ClickableTooltip";
 import { useDeployment } from "../deployment";
 
-export interface InfoToolTipProps {
+export interface InfoToolTipProps extends Omit<TooltipProps, "children"> {
   titleId: string;
   descriptionId: string;
 }
-const InfoToolTip = ({ titleId, descriptionId }: InfoToolTipProps) => {
+const InfoToolTip = ({ titleId, descriptionId, ...rest }: InfoToolTipProps) => {
   const { appNameFull } = useDeployment();
   return (
     <ClickableTooltip
+      isFocusable
       hasArrow
       placement="right"
+      {...rest}
       label={
         <VStack textAlign="left" alignContent="left" alignItems="left" m={3}>
           <Text fontWeight="bold">
@@ -25,7 +27,7 @@ const InfoToolTip = ({ titleId, descriptionId }: InfoToolTipProps) => {
         </VStack>
       }
     >
-      <Icon h={5} w={5} as={RiInformationLine} />
+      <Icon opacity={0.7} h={5} w={5} as={RiInformationLine} />
     </ClickableTooltip>
   );
 };

src/components/LiveGraphPanel.tsx

@@ -123,6 +123,7 @@ const LiveGraphPanel = ({
                 <InfoToolTip
                   titleId="live-graph"
                   descriptionId="live-graph-tooltip"
+                  isDisabled={isDisconnected}
                 />
               </HStack>
               {isConnected && (