Increase session button focus visible indicator outline

microbit-foundation · Nov 18, 2024 · 9936711 · 9936711
1 parent a09d4dc
commit 9936711
Showing 1 changed file with 57 additions and 47 deletions.
diff --git a/src/components/NewPageChoice.tsx b/src/components/NewPageChoice.tsx
@@ -6,7 +6,7 @@ import {
   IconButton,
   Stack,
 } from "@chakra-ui/react";
-import { ReactElement, ReactNode, useCallback } from "react";
+import { ReactElement, ReactNode, useCallback, useState } from "react";
 
 interface NewPageChoice extends BoxProps {
   children: ReactNode;
@@ -29,53 +29,63 @@ const NewPageChoice = ({
       onClick();
     }
   }, [disabled, onClick]);
+  const [isFocused, setIsFocused] = useState(false);
   return (
-    <HStack
-      flex="1"
-      spacing={0}
-      boxShadow="lg"
-      borderRadius="md"
-      bgColor="white"
-      onClick={handleClick}
-      cursor="pointer"
-      alignItems="stretch"
-      opacity={disabled ? 0.5 : undefined}
-      userSelect={disabled ? "none" : undefined}
-      _hover={{
-        bgColor: disabled ? undefined : "brand.50",
-      }}
-      role="group"
-      {...props}
-    >
-      <Stack as="section" py={5} px={5} minH={40} flex="1 1 auto">
-        <Heading as="h3" fontSize="xl">
-          {label}
-        </Heading>
-        {children}
-      </Stack>
-      <Box>
-        <IconButton
-          w={40}
-          isDisabled={disabled}
-          aria-label={label}
-          bgColor="brand.700"
-          color="white"
-          height="100%"
-          variant="unstyled"
-          icon={icon}
-          borderInlineEndRadius="md"
-          _groupHover={{
-            color: disabled ? undefined : "#efedf5",
-          }}
-          _hover={{
-            bgColor: "brand.700",
-          }}
-          _disabled={{
-            opacity: 1,
-          }}
-        />
-      </Box>
-    </HStack>
+    <Box boxShadow="lg" flex="1">
+      <HStack
+        spacing={0}
+        borderRadius="md"
+        bgColor="white"
+        onClick={handleClick}
+        cursor="pointer"
+        alignItems="stretch"
+        opacity={disabled ? 0.5 : undefined}
+        userSelect={disabled ? "none" : undefined}
+        transitionDuration="200ms"
+        transitionProperty="background-color"
+        _hover={{
+          bgColor: disabled ? undefined : "brand.50",
+        }}
+        boxShadow={isFocused ? "outline" : "none"}
+        role="group"
+        {...props}
+      >
+        <Stack as="section" py={5} px={5} minH={40} flex="1 1 auto">
+          <Heading as="h3" fontSize="xl">
+            {label}
+          </Heading>
+          {children}
+        </Stack>
+        <Box>
+          <IconButton
+            w={40}
+            isDisabled={disabled}
+            aria-label={label}
+            bgColor="brand.700"
+            color="white"
+            height="100%"
+            variant="unstyled"
+            icon={icon}
+            borderInlineEndRadius="md"
+            _groupHover={{
+              color: disabled ? undefined : "#efedf5",
+            }}
+            _focusVisible={{
+              boxShadow: "none",
+            }}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            boxShadow="none"
+            _hover={{
+              bgColor: "brand.700",
+            }}
+            _disabled={{
+              opacity: 1,
+            }}
+          />
+        </Box>
+      </HStack>
+    </Box>
   );
 };