Fix accessibility issues, update IconButton styling

threshold-network · Nov 10, 2021 · 5cd69d6 · 5cd69d6
1 parent 833fb72
commit 5cd69d6
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 34 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,10 @@
 import theme from "../src/theme"
+import { addDecorator } from "@storybook/react"
+import { MemoryRouter } from "react-router"
+
+addDecorator((story) => (
+  <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
+))
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

diff --git a/package.json b/package.json
@@ -22,13 +22,14 @@
     "@types/node": "^16.9.1",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.2",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/ledger-connector": "^6.1.9",
     "@web3-react/walletconnect-connector": "^6.2.4",
     "ethereum-blockies-base64": "^1.0.2",
     "ethers": "^5.4.7",
-    "@types/react-router-dom": "^5.3.2",
+    "focus-visible": "^5.2.0",
     "framer-motion": "^4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
+import "focus-visible/dist/focus-visible"
 import { FC } from "react"
-import { Box, ChakraProvider, Container, Heading } from "@chakra-ui/react"
+import { Box, ChakraProvider, Container } from "@chakra-ui/react"
 import { Provider as ReduxProvider } from "react-redux"
 import { Web3ReactProvider } from "@web3-react/core"
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom"

diff --git a/src/components/Navbar/NavbarComponent.tsx b/src/components/Navbar/NavbarComponent.tsx
@@ -8,7 +8,7 @@ import {
 import { FC } from "react"
 import WalletConnectionAlert from "./WalletConnectionAlert"
 import HamburgerButton from "./HamburgerButton"
-import DarkModeSwitcher from "../DarkModeSwitcher"
+import DarkModeSwitcher from "../Sidebar/DarkModeSwitcher"
 import AccountButton from "./AccountButton"
 import NetworkButton from "./NetworkButton"
 

diff --git a/src/components/Sidebar/BrandIcon.tsx b/src/components/Sidebar/BrandIcon.tsx
@@ -11,7 +11,6 @@ const BrandIcon = () => {
     return (
       <Image
         src={useColorModeValue(ThresholdBrandFull, ThresholdBrandFullWhite)}
-        height="14px"
         mx="auto"
         marginTop="35px"
         paddingRight="12px"

diff --git a/src/components/DarkModeSwitcher/index.tsx → src/components/Sidebar/DarkModeSwitcher.tsx b/src/components/DarkModeSwitcher/index.tsx → src/components/Sidebar/DarkModeSwitcher.tsx
@@ -6,16 +6,23 @@ import {
   useColorMode,
 } from "@chakra-ui/react"
 import { MoonIcon, SunIcon } from "@chakra-ui/icons"
+import { useSidebar } from "../../hooks/useSidebar"
 
 const DarkModeSwitcher: FC<Omit<IconButtonProps, "aria-label">> = () => {
   const { colorMode, toggleColorMode } = useColorMode()
+  const { isOpen } = useSidebar()
 
   return (
     <IconButton
-      variant="ghost"
+      variant="side-bar"
       aria-label="color mode"
       onClick={toggleColorMode}
-      icon={<Icon as={colorMode === "light" ? MoonIcon : SunIcon} />}
+      icon={
+        <Icon
+          boxSize={isOpen ? "16px" : "24px"}
+          as={colorMode === "light" ? MoonIcon : SunIcon}
+        />
+      }
     />
   )
 }

diff --git a/src/components/Sidebar/ExpanderIcon.tsx b/src/components/Sidebar/ExpanderIcon.tsx
@@ -13,7 +13,7 @@ const ExpanderIcon = () => {
       top="30px"
       borderRadius="50%"
       bg={useColorModeValue("white", "gray.800")}
-      color="gray.700"
+      color={useColorModeValue("gray.700", "gray.500")}
       border="1px solid"
       borderColor={useColorModeValue("gray.100", "gray.700")}
       h={6}

diff --git a/src/components/Sidebar/NavItem.tsx b/src/components/Sidebar/NavItem.tsx
@@ -22,7 +22,7 @@ const NavItem: FC<NavItemDetail> = ({ icon, text, href, isActive }) => {
   const { isOpen } = useSidebar()
 
   return (
-    <Box position="relative">
+    <Box position="relative" my={2}>
       {/* Active Border Highlight */}
       {isActive && (
         <Box
@@ -47,7 +47,12 @@ const NavItem: FC<NavItemDetail> = ({ icon, text, href, isActive }) => {
         gutter={32}
         arrowSize={16}
       >
-        <Link as={RouterLink} to={href} _hover={{ textDecoration: "none" }}>
+        <Link
+          as={RouterLink}
+          to={href}
+          _hover={{ textDecoration: "none" }}
+          tabIndex={-1}
+        >
           {isOpen ? (
             <Button
               isOpen

diff --git a/src/components/Sidebar/SidebarFooter.tsx b/src/components/Sidebar/SidebarFooter.tsx
@@ -1,10 +1,18 @@
-import { HStack, Icon, Link, Stack, useColorModeValue } from "@chakra-ui/react"
+import {
+  Button,
+  HStack,
+  Icon,
+  IconButton,
+  Link,
+  Stack,
+  useColorModeValue,
+} from "@chakra-ui/react"
 import { BsDiscord, BsGithub } from "react-icons/all"
 import { useSidebar } from "../../hooks/useSidebar"
 import { Body1, Body3 } from "../Typography"
 import { ExternalLink } from "../../enums"
 import { FC } from "react"
-import DarkModeSwitcher from "../DarkModeSwitcher"
+import DarkModeSwitcher from "./DarkModeSwitcher"
 
 const FooterItem: FC<{ href: string; icon: any; text: string }> = ({
   href,
@@ -13,19 +21,28 @@ const FooterItem: FC<{ href: string; icon: any; text: string }> = ({
 }) => {
   const { isOpen } = useSidebar()
   return (
-    <HStack as={Link} href={href} target="_blank">
-      <Icon
-        h={6}
-        w={6}
-        as={icon}
-        color="gray.300"
-        m={isOpen ? undefined : "auto"}
-        mr={isOpen ? 2 : undefined}
-      />
-      {isOpen && (
-        <Body1 fontWeight="bold" color="gray.300">
+    <HStack
+      as={Link}
+      href={href}
+      target="_blank"
+      tabIndex={-1}
+      _hover={{ textDecoration: "none" }}
+    >
+      {isOpen ? (
+        <Button
+          variant="side-bar"
+          leftIcon={<Icon as={icon} />}
+          w="100%"
+          justifyContent="flex-start"
+        >
           {text}
-        </Body1>
+        </Button>
+      ) : (
+        <IconButton
+          variant="side-bar"
+          aria-label={text}
+          icon={<Icon boxSize="24px" as={icon} />}
+        />
       )}
     </HStack>
   )
@@ -40,7 +57,7 @@ const SidebarFooter = () => {
       borderColor={useColorModeValue("gray.100", "gray.700")}
       padding={4}
       width="100%"
-      spacing={4}
+      // spacing={4}
     >
       <DarkModeSwitcher />
       <FooterItem

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -5,11 +5,11 @@ import SidebarFooter from "./SidebarFooter"
 import BrandIcon from "./BrandIcon"
 import NavItem, { NavItemDetail } from "./NavItem"
 import {
-  IoBarChart,
+  IoBarChartSharp,
   IoBarChartOutline,
-  IoHome,
+  IoHomeSharp,
   IoHomeOutline,
-  IoSwapHorizontal,
+  IoSwapHorizontalSharp,
 } from "react-icons/all"
 import { useLocation } from "react-router-dom"
 import { useMemo } from "react"
@@ -22,19 +22,19 @@ const Sidebar = () => {
     () => [
       {
         text: "Overview",
-        icon: pathname === "/" ? IoHome : IoHomeOutline,
+        icon: pathname === "/" ? IoHomeSharp : IoHomeOutline,
         href: "/",
         isActive: pathname === "/",
       },
       {
         text: "Upgrade",
-        icon: IoSwapHorizontal,
+        icon: IoSwapHorizontalSharp,
         href: "/upgrade",
         isActive: pathname === "/upgrade",
       },
       {
         text: "Portfolio",
-        icon: pathname === "/portfolio" ? IoBarChart : IoBarChartOutline,
+        icon: pathname === "/portfolio" ? IoBarChartSharp : IoBarChartOutline,
         href: "/portfolio",
         isActive: pathname === "/portfolio",
       },
@@ -64,9 +64,7 @@ const Sidebar = () => {
         h="100%"
       >
         {navItems.map((props) => (
-          <Box py={2}>
-            <NavItem key={props.text} {...props} />
-          </Box>
+          <NavItem key={props.text} {...props} />
         ))}
       </Stack>
 

diff --git a/src/static/icons/ThresholdWhite.tsx b/src/static/icons/ThresholdWhite.tsx
@@ -11,7 +11,7 @@ const ThresholdWhite = createIcon({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_1872:4521)">
+      <g clipPath="url(#clip0_1872:4521)">
         <path
           d="M31.8666 0.0334473H21.2903V3.55867H31.8666V0.0334473ZM14.2372 3.55867H10.7118V7.08601H14.2372V3.55867ZM10.7118 21.189H14.2372V10.6112H10.7118V21.189ZM17.7627 3.55867V7.08601H21.2903V3.55867H17.7627ZM17.7627 21.189H21.2903V10.6112H17.7627V21.189ZM17.7627 0.0334473H14.2372V3.55867H17.7627V0.0334473ZM0.133301 0.0334473V3.55867H10.7118V0.0334473H0.133301ZM31.8666 10.6112V7.08601H21.2903V10.6112H31.8666ZM14.2372 7.08601V10.6112H17.7627V7.08601H14.2372ZM0.133301 7.08601V10.6112H10.7118V7.08601H0.133301Z"
           fill="#FCF9FF"

diff --git a/src/theme/Button.ts b/src/theme/Button.ts
@@ -61,6 +61,7 @@ export const Button = {
     },
     "side-bar": (props: any) => {
       const { isOpen } = props
+
       return {
         bg: "transparent",
         display: "flex",

diff --git a/yarn.lock b/yarn.lock
@@ -10713,6 +10713,11 @@ focus-lock@^0.8.1:
   dependencies:
     tslib "^1.9.3"
 
+focus-visible@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
+  integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
+
 follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.4:
   version "1.14.5"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"