Improve tooltip using aria-label (#533)

Author: microbit-robert

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"

src/components/ClickableTooltip.tsx

@@ -1,9 +1,11 @@
 import { Flex, Tooltip, TooltipProps, useDisclosure } from "@chakra-ui/react";
 import { ReactNode, useCallback, useRef } from "react";
+import { useIntl } from "react-intl";
 
 interface ClickableTooltipProps extends TooltipProps {
   children: ReactNode;
   isFocusable?: boolean;
+  titleId?: string;
 }
 
 // Chakra Tooltip doesn't support triggering on mobile/tablets:
@@ -12,10 +14,12 @@ interface ClickableTooltipProps extends TooltipProps {
 const ClickableTooltip = ({
   children,
   isFocusable = false,
+  titleId,
   isDisabled,
   ...rest
 }: ClickableTooltipProps) => {
   const label = useDisclosure();
+  const intl = useIntl();
   const ref = useRef<HTMLDivElement>(null);
   const handleMouseEnter = useCallback(() => {
     const focussedTooltips = Array.from(
@@ -46,6 +50,12 @@ const ClickableTooltip = ({
   return (
     <Tooltip isOpen={label.isOpen} {...rest} closeOnEsc={true}>
       <Flex
+        as="span"
+        aria-label={
+          titleId
+            ? intl.formatMessage({ id: `${titleId}-tooltip-aria` })
+            : undefined
+        }
         className={isFocusable ? "focusable-tooltip" : undefined}
         onKeyDown={handleKeydown}
         ref={ref}

src/components/InfoToolTip.tsx

@@ -1,8 +1,8 @@
 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";
+import ClickableTooltip from "./ClickableTooltip";
 
 export interface InfoToolTipProps extends Omit<TooltipProps, "children"> {
   titleId: string;
@@ -13,6 +13,7 @@ const InfoToolTip = ({ titleId, descriptionId, ...rest }: InfoToolTipProps) => {
   return (
     <ClickableTooltip
       isFocusable
+      titleId={titleId}
       hasArrow
       placement="right"
       {...rest}

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,