Update ambiguous label names; tooltip fixes (#528)

* Update label names so they are less ambiguous * Fix clickable tooltip tabIndex bug * Another tooltip fix
microbit-foundation · Nov 19, 2024 · d5b5c70 · d5b5c70
1 parent cb43a76
commit d5b5c70
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 20 deletions.
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -119,6 +119,10 @@
     "defaultMessage": "Connect",
     "description": "Connect action to connect to data collection micro:bit via Bluetooth or micro:bit radio"
   },
+  "connect-action-aria": {
+    "defaultMessage": "Connect to micro:bit",
+    "description": "Connect action to connect to data collection micro:bit via Bluetooth or micro:bit radio"
+  },
   "connect-battery-heading": {
     "defaultMessage": "Disconnect USB and connect battery pack",
     "description": "Battery connection dialog "
@@ -444,7 +448,7 @@
     "description": "Confirmation dialog text"
   },
   "delete-recording-aria": {
-    "defaultMessage": "Delete recording",
+    "defaultMessage": "Delete recording {sample} of {numSamples}",
     "description": "Aria label for data sample delete action"
   },
   "disconnect-action": {
@@ -1252,7 +1256,7 @@
     "description": "Label for recording graph"
   },
   "recording-options-aria": {
-    "defaultMessage": "More recording options",
+    "defaultMessage": "More recording options for action \"{action}\"",
     "description": "Aria label for more recording options button"
   },
   "reload-action": {
@@ -1312,7 +1316,11 @@
     "description": "Notification after a hex file has been downloaded"
   },
   "select-icon-action-aria": {
-    "defaultMessage": "Pick icon",
+    "defaultMessage": "Pick icon for action \"{action}\"",
+    "description": "Aria label for pick icon button"
+  },
+  "select-icon-action-untitled-aria": {
+    "defaultMessage": "Pick icon for untitled action",
     "description": "Aria label for pick icon button"
   },
   "select-icon-option-action-aria": {

diff --git a/src/components/ActionDataSamplesCard.tsx b/src/components/ActionDataSamplesCard.tsx
@@ -51,6 +51,7 @@ const ActionDataSamplesCard = ({
   newRecordingId,
   clearNewRecordingId,
 }: ActionDataSamplesCardProps) => {
+  const intl = useIntl();
   const deleteActionRecording = useStore((s) => s.deleteActionRecording);
   const view = useStore((s) => s.settings.dataSamplesView);
   if (view === DataSamplesView.GraphAndDataFeatures) {
@@ -76,6 +77,15 @@ const ActionDataSamplesCard = ({
             key={recording.ID}
           >
             <CloseButton
+              aria-label={intl.formatMessage(
+                {
+                  id: "delete-recording-aria",
+                },
+                {
+                  sample: value.recordings.length - idx,
+                  numSamples: value.recordings.length,
+                }
+              )}
               position="absolute"
               top={-2}
               right={-2}
@@ -88,6 +98,7 @@ const ActionDataSamplesCard = ({
             />
             <DataSample
               recording={recording}
+              numRecordings={value.recordings.length}
               actionId={value.ID}
               recordingIndex={idx}
               isNew={newRecordingId === recording.ID}
@@ -124,6 +135,7 @@ const ActionDataSamplesCard = ({
           actionId={value.ID}
           recordingIndex={idx}
           recording={recording}
+          numRecordings={value.recordings.length}
           isNew={newRecordingId === recording.ID}
           onDelete={deleteActionRecording}
           onNewAnimationEnd={clearNewRecordingId}
@@ -199,7 +211,10 @@ const RecordingArea = ({
           <MoreMenuButton
             minW={8}
             variant={selected ? "record" : "recordOutline"}
-            aria-label={intl.formatMessage({ id: "recording-options-aria" })}
+            aria-label={intl.formatMessage(
+              { id: "recording-options-aria" },
+              { action: action.name }
+            )}
           />
           <Portal>
             <MenuList>
@@ -271,6 +286,7 @@ const RecordingArea = ({
 
 const DataSample = ({
   recording,
+  numRecordings,
   actionId,
   recordingIndex,
   isNew,
@@ -280,6 +296,7 @@ const DataSample = ({
   hasClose = true,
 }: {
   recording: RecordingData;
+  numRecordings: number;
   actionId: number;
   recordingIndex: number;
   isNew: boolean;
@@ -307,9 +324,15 @@ const DataSample = ({
           right={0}
           zIndex={1}
           size="sm"
-          aria-label={intl.formatMessage({
-            id: "delete-recording-aria",
-          })}
+          aria-label={intl.formatMessage(
+            {
+              id: "delete-recording-aria",
+            },
+            {
+              sample: numRecordings - recordingIndex,
+              numSamples: numRecordings,
+            }
+          )}
           onClick={handleDelete}
         />
       )}

diff --git a/src/components/ActionNameCard.tsx b/src/components/ActionNameCard.tsx
@@ -121,7 +121,12 @@ const ActionNameCard = ({
             ) : (
               <LedIconSvg icon={icon} />
             )}
-            {!readOnly && <LedIconPicker onIconSelected={handleIconSelected} />}
+            {!readOnly && (
+              <LedIconPicker
+                actionName={value.name}
+                onIconSelected={handleIconSelected}
+              />
+            )}
           </HStack>
           <Input
             autoFocus={localName.length === 0}

diff --git a/src/components/ClickableTooltip.tsx b/src/components/ClickableTooltip.tsx
@@ -18,10 +18,12 @@ const ClickableTooltip = ({
   const label = useDisclosure();
   const ref = useRef<HTMLDivElement>(null);
   const handleMouseEnter = useCallback(() => {
-    const openTooltips = document.querySelectorAll(
-      '[role="tooltip"]:not([hidden])'
+    const focussedTooltips = Array.from(
+      document.querySelectorAll(".focusable-tooltip")
     );
-    if (!openTooltips.length) {
+    if (
+      focussedTooltips.every((tooltip) => tooltip !== document.activeElement)
+    ) {
       label.onOpen();
     }
   }, [label]);
@@ -44,12 +46,13 @@ const ClickableTooltip = ({
   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={isDisabled ? undefined : 0}
+        tabIndex={isFocusable && !isDisabled ? 0 : undefined}
         onFocus={isFocusable ? label.onOpen : undefined}
         onBlur={isFocusable ? label.onClose : undefined}
         _focusVisible={{

diff --git a/src/components/LedIconPicker.tsx b/src/components/LedIconPicker.tsx
@@ -14,10 +14,11 @@ import { MakeCodeIcon, makecodeIcons } from "../utils/icons";
 import LedIconSvg from "./icons/LedIconSvg";
 
 interface LedIconPicker {
+  actionName: string;
   onIconSelected: (icon: MakeCodeIcon) => void;
 }
 
-const LedIconPicker = ({ onIconSelected }: LedIconPicker) => {
+const LedIconPicker = ({ actionName, onIconSelected }: LedIconPicker) => {
   const intl = useIntl();
   const handleClick = useCallback(
     (icon: MakeCodeIcon, callback: () => void) => {
@@ -35,7 +36,16 @@ const LedIconPicker = ({ onIconSelected }: LedIconPicker) => {
             <IconButton
               variant="ghost"
               color="blackAlpha.700"
-              aria-label={intl.formatMessage({ id: "select-icon-action-aria" })}
+              aria-label={
+                actionName
+                  ? intl.formatMessage(
+                      { id: "select-icon-action-aria" },
+                      { action: actionName }
+                    )
+                  : intl.formatMessage({
+                      id: "select-icon-action-untitled-aria",
+                    })
+              }
               size="sm"
             >
               <RiArrowDropDownFill size={32} />

diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
@@ -9,7 +9,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useCallback, useRef } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ConnectionStatus } from "../connect-status-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import microbitImage from "../images/stylised-microbit-black.svg";
@@ -64,7 +64,7 @@ const LiveGraphPanel = ({
     });
     void actions.disconnect();
   }, [actions, logging]);
-
+  const intl = useIntl();
   return (
     <HStack
       position="relative"
@@ -92,7 +92,11 @@ const LiveGraphPanel = ({
             <Text>
               <FormattedMessage id={disconnectedTextId} />
             </Text>
-            <Button variant="primary" onClick={handleConnectOrReconnect}>
+            <Button
+              variant="primary"
+              onClick={handleConnectOrReconnect}
+              aria-label={intl.formatMessage({ id: "connect-action-aria" })}
+            >
               <FormattedMessage id="connect-action" />
             </Button>
           </VStack>

diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -221,6 +221,12 @@
       "value": "Connect"
     }
   ],
+  "connect-action-aria": [
+    {
+      "type": 0,
+      "value": "Connect to micro:bit"
+    }
+  ],
   "connect-battery-heading": [
     {
       "type": 0,
@@ -758,7 +764,19 @@
   "delete-recording-aria": [
     {
       "type": 0,
-      "value": "Delete recording"
+      "value": "Delete recording "
+    },
+    {
+      "type": 1,
+      "value": "sample"
+    },
+    {
+      "type": 0,
+      "value": " of "
+    },
+    {
+      "type": 1,
+      "value": "numSamples"
     }
   ],
   "disconnect-action": [
@@ -2204,7 +2222,15 @@
   "recording-options-aria": [
     {
       "type": 0,
-      "value": "More recording options"
+      "value": "More recording options for action \""
+    },
+    {
+      "type": 1,
+      "value": "action"
+    },
+    {
+      "type": 0,
+      "value": "\""
     }
   ],
   "reload-action": [
@@ -2302,7 +2328,21 @@
   "select-icon-action-aria": [
     {
       "type": 0,
-      "value": "Pick icon"
+      "value": "Pick icon for action \""
+    },
+    {
+      "type": 1,
+      "value": "action"
+    },
+    {
+      "type": 0,
+      "value": "\""
+    }
+  ],
+  "select-icon-action-untitled-aria": [
+    {
+      "type": 0,
+      "value": "Pick icon for untitled action"
     }
   ],
   "select-icon-option-action-aria": [