Disabled tooltips are not focusable

microbit-foundation · Nov 19, 2024 · 6c3d0b8 · 6c3d0b8
1 parent 9d49403
commit 6c3d0b8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/ClickableTooltip.tsx b/src/components/ClickableTooltip.tsx
@@ -12,6 +12,7 @@ interface ClickableTooltipProps extends TooltipProps {
 const ClickableTooltip = ({
   children,
   isFocusable = false,
+  isDisabled,
   ...rest
 }: ClickableTooltipProps) => {
   const label = useDisclosure();
@@ -48,7 +49,7 @@ const ClickableTooltip = ({
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onClick={label.onOpen}
-        tabIndex={0}
+        tabIndex={isDisabled ? undefined : 0}
         onFocus={isFocusable ? label.onOpen : undefined}
         onBlur={isFocusable ? label.onClose : undefined}
         _focusVisible={{

diff --git a/src/components/InfoToolTip.tsx b/src/components/InfoToolTip.tsx
@@ -1,20 +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">

diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
@@ -123,6 +123,7 @@ const LiveGraphPanel = ({
                 <InfoToolTip
                   titleId="live-graph"
                   descriptionId="live-graph-tooltip"
+                  isDisabled={isDisconnected}
                 />
               </HStack>
               {isConnected && (