Allow tooltips to be focusable

microbit-foundation · Nov 18, 2024 · cf8824b · cf8824b
1 parent 3bd481a
commit cf8824b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/components/ClickableTooltip.tsx b/src/components/ClickableTooltip.tsx
@@ -3,19 +3,32 @@ 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, ...rest }: ClickableTooltipProps) => {
+const ClickableTooltip = ({
+  children,
+  isFocusable = false,
+  ...rest
+}: ClickableTooltipProps) => {
   const label = useDisclosure();
   return (
     <Tooltip isOpen={label.isOpen} {...rest}>
       <Flex
         onMouseEnter={label.onOpen}
         onMouseLeave={label.onClose}
         onClick={label.onOpen}
+        tabIndex={0}
+        onFocus={isFocusable ? label.onOpen : undefined}
+        onBlur={isFocusable ? label.onClose : undefined}
+        _focusVisible={{
+          boxShadow: "outline",
+          outline: "none",
+        }}
+        borderRadius="50%"
       >
         {children}
       </Flex>

diff --git a/src/components/HeadingGrid.tsx b/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>

diff --git a/src/components/InfoToolTip.tsx b/src/components/InfoToolTip.tsx
@@ -12,6 +12,7 @@ const InfoToolTip = ({ titleId, descriptionId }: InfoToolTipProps) => {
   const { appNameFull } = useDeployment();
   return (
     <ClickableTooltip
+      isFocusable
       hasArrow
       placement="right"
       label={
@@ -25,7 +26,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>
   );
 };