Alternative tooltip approach

microbit-foundation · Nov 19, 2024 · 1287ec6 · 1287ec6
1 parent 5dbf9e6
commit 1287ec6
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 62 deletions.
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -23,6 +23,10 @@
     "defaultMessage": "Action",
     "description": "Label for a movement-related action, e.g. clapping"
   },
+  "action-label-tooltip-aria": {
+    "defaultMessage": "Action tooltip",
+    "description": "Aria label for action tooltip icon"
+  },
   "action-length-error": {
     "defaultMessage": "Action names cannot be longer than {maxLen} characters.",
     "description": "Error message shown when an action name is too long"
@@ -403,6 +407,10 @@
     "defaultMessage": "Data samples",
     "description": "Heading for data samples column"
   },
+  "data-samples-label-tooltip-aria": {
+    "defaultMessage": "Data samples tooltip",
+    "description": "Aria label for data samples tooltip icon"
+  },
   "data-samples-status-count": {
     "defaultMessage": "{numSamples} samples recorded",
     "description": "Data samples status text"
@@ -555,6 +563,10 @@
     "defaultMessage": "Estimated action",
     "description": "Heading for estimated action area next to the live graph"
   },
+  "estimated-action-label-tooltip-aria": {
+    "defaultMessage": "Estimated action tooltip",
+    "description": "Aria label for estimated action tooltip icon"
+  },
   "estimated-action-tooltip": {
     "defaultMessage": "This is the action the model thinks you are currently doing.",
     "description": "Tooltip for the estimated action heading"
@@ -979,6 +991,10 @@
     "defaultMessage": "This graph shows movement data from the micro:bit's accelerometer in real time. Try moving your data collection micro:bit to see the X, Y and Z axes change. Each coloured line represents a different direction (dimension) you are moving the micro:bit in.",
     "description": "Tooltip for live graph heading"
   },
+  "live-graph-tooltip-aria": {
+    "defaultMessage": "Live graph tooltip",
+    "description": "Aria label for live graph tooltip icon"
+  },
   "loading": {
     "defaultMessage": "Loading",
     "description": "Aria label for loading spinner"

diff --git a/src/components/ClickableTooltip.tsx b/src/components/ClickableTooltip.tsx
@@ -1,68 +1,17 @@
-import { Flex, Tooltip, TooltipProps, useDisclosure } from "@chakra-ui/react";
-import { ReactNode, useCallback, useRef } from "react";
+import { Flex, Tooltip, TooltipProps } from "@chakra-ui/react";
+import { ReactNode } 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,
-  isFocusable = false,
-  isDisabled,
-  ...rest
-}: ClickableTooltipProps) => {
-  const label = useDisclosure();
-  const ref = useRef<HTMLDivElement>(null);
-  const handleMouseEnter = useCallback(() => {
-    const focussedTooltips = Array.from(
-      document.querySelectorAll(".focusable-tooltip")
-    );
-    if (
-      focussedTooltips.every((tooltip) => tooltip !== document.activeElement)
-    ) {
-      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]
-  );
+const ClickableTooltip = ({ children, ...rest }: ClickableTooltipProps) => {
   return (
-    <Tooltip isOpen={label.isOpen} {...rest} closeOnEsc={true}>
-      <Flex
-        className={isFocusable ? "focusable-tooltip" : undefined}
-        onKeyDown={handleKeydown}
-        ref={ref}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={label.onOpen}
-        tabIndex={isFocusable && !isDisabled ? 0 : undefined}
-        onFocus={isFocusable ? label.onOpen : undefined}
-        onBlur={isFocusable ? label.onClose : undefined}
-        _focusVisible={{
-          boxShadow: "outline",
-          outline: "none",
-        }}
-        borderRadius="50%"
-      >
-        {children}
-      </Flex>
+    <Tooltip {...rest}>
+      <Flex>{children}</Flex>
     </Tooltip>
   );
 };

diff --git a/src/components/InfoToolTip.tsx b/src/components/InfoToolTip.tsx
@@ -1,18 +1,23 @@
-import { Icon, Text, TooltipProps, VStack } from "@chakra-ui/react";
+import { IconButton, Text, TooltipProps, VStack } from "@chakra-ui/react";
 import { RiInformationLine } from "react-icons/ri";
-import { FormattedMessage } from "react-intl";
-import ClickableTooltip from "./ClickableTooltip";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useDeployment } from "../deployment";
+import ClickableTooltip from "./ClickableTooltip";
 
 export interface InfoToolTipProps extends Omit<TooltipProps, "children"> {
   titleId: string;
   descriptionId: string;
 }
-const InfoToolTip = ({ titleId, descriptionId, ...rest }: InfoToolTipProps) => {
+const InfoToolTip = ({
+  titleId,
+  descriptionId,
+  isDisabled,
+  ...rest
+}: InfoToolTipProps) => {
   const { appNameFull } = useDeployment();
+  const intl = useIntl();
   return (
     <ClickableTooltip
-      isFocusable
       hasArrow
       placement="right"
       {...rest}
@@ -27,7 +32,21 @@ const InfoToolTip = ({ titleId, descriptionId, ...rest }: InfoToolTipProps) => {
         </VStack>
       }
     >
-      <Icon opacity={0.7} h={5} w={5} as={RiInformationLine} />
+      <IconButton
+        size="xs"
+        icon={<RiInformationLine opacity={0.7} />}
+        fontSize="xl"
+        variant="ghost"
+        _hover={{
+          bgColor: "transparent",
+        }}
+        _active={{
+          bgColor: "transparent",
+        }}
+        color="chakra-body-text._dark"
+        aria-label={intl.formatMessage({ id: `${titleId}-tooltip-aria` })}
+        isDisabled={isDisabled}
+      />
     </ClickableTooltip>
   );
 };

diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -45,6 +45,12 @@
       "value": "Action"
     }
   ],
+  "action-label-tooltip-aria": [
+    {
+      "type": 0,
+      "value": "Action tooltip"
+    }
+  ],
   "action-length-error": [
     {
       "type": 0,
@@ -675,6 +681,12 @@
       "value": "Data samples"
     }
   ],
+  "data-samples-label-tooltip-aria": [
+    {
+      "type": 0,
+      "value": "Data samples tooltip"
+    }
+  ],
   "data-samples-status-count": [
     {
       "type": 1,
@@ -951,6 +963,12 @@
       "value": "Estimated action"
     }
   ],
+  "estimated-action-label-tooltip-aria": [
+    {
+      "type": 0,
+      "value": "Estimated action tooltip"
+    }
+  ],
   "estimated-action-tooltip": [
     {
       "type": 0,
@@ -1675,6 +1693,12 @@
       "value": "This graph shows movement data from the micro:bit's accelerometer in real time. Try moving your data collection micro:bit to see the X, Y and Z axes change. Each coloured line represents a different direction (dimension) you are moving the micro:bit in."
     }
   ],
+  "live-graph-tooltip-aria": [
+    {
+      "type": 0,
+      "value": "Live graph tooltip"
+    }
+  ],
   "loading": [
     {
       "type": 0,