maybe fix focus-visible accessibility

OperationSpark · Jun 12, 2024 · c9d7f72 · c9d7f72
1 parent cb56533
commit c9d7f72
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 21 deletions.
diff --git a/next.config.js b/next.config.js
@@ -40,11 +40,14 @@ module.exports = (phase, { defaultConfig }) => {
   /**
    * @type {import('next').NextConfig}
    */
-  return {
+  const config = {
     ...defaultConfig,
     reactStrictMode: true,
     compiler: {
-      styledComponents: true,
+      styledComponents: {
+        pure: true,
+        displayName: true,
+      },
     },
     env: {
       OVERRIDE_NODE_ENV: OVERRIDE_NODE_ENV || '',
@@ -99,6 +102,8 @@ module.exports = (phase, { defaultConfig }) => {
       ].filter(Boolean);
     },
   };
+
+  return config;
 };
 
 function checkEnvVars(requiredVars) {

diff --git a/src/components/Navbar/elements/NavAccordion/NavAccordionItem.tsx b/src/components/Navbar/elements/NavAccordion/NavAccordionItem.tsx
@@ -1,8 +1,8 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { ReactNode, useState } from 'react';
-import styled from 'styled-components';
-import { motion, AnimatePresence } from 'framer-motion';
 import { FiChevronRight } from 'react-icons/fi';
+import styled from 'styled-components';
 
 const NavAccordionItemStyles = styled(motion.div)`
   box-shadow: 0 -3px 3px rgba(25, 25, 25, 0) inset;
@@ -31,15 +31,21 @@ const NavAccordionItemStyles = styled(motion.div)`
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    :hover {
+    .accordion-item-title {
+      transition: all 250ms;
+    }
+    :hover .accordion-item-title,
+    :focus-visible .accordion-item-title {
       background: linear-gradient(
         90deg,
         ${({ theme }) => theme.primary[800]} 0%,
         ${({ theme }) => theme.primary[600]} 4%,
         ${({ theme }) => theme.primary[600]} 96%,
         ${({ theme }) => theme.primary[800]} 100%
       );
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
+      border-radius: 0.25rem;
+      padding: 0 0.5rem;
     }
   }
   .sub-links {
@@ -80,7 +86,7 @@ export const NavAccordionItem = ({ title, children, href, link }: NavAccordionIt
       aria-label={title}
     >
       <button className='accordion-item'>
-        <div>{title}</div>
+        <div className='accordion-item-title'>{title}</div>
         <motion.div
           animate={{ rotate: isOpen ? 90 : 0 }}
           transition={{ type: 'tween', duration: 0.1 }}

diff --git a/src/components/Navbar/elements/NavAccordion/NavAccordionLink.tsx b/src/components/Navbar/elements/NavAccordion/NavAccordionLink.tsx
@@ -5,6 +5,9 @@ import styled from 'styled-components';
 import { checkActiveSubLink } from '@this/src/helpers/navigation';
 
 const NavAccordionLinkStyles = styled.div`
+  a {
+    all: unset;
+  }
   font-family: 'Red Hat Display', sans-serif;
   font-weight: 500;
   cursor: pointer;
@@ -25,6 +28,22 @@ const NavAccordionLinkStyles = styled.div`
   &.sub-link {
     padding-left: 2.5rem;
   }
+  a {
+    transition: all 250ms;
+  }
+  a:focus-visible,
+  a:hover {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.primary[800]} 0%,
+      ${({ theme }) => theme.primary[600]} 4%,
+      ${({ theme }) => theme.primary[600]} 96%,
+      ${({ theme }) => theme.primary[800]} 100%
+    );
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+  }
 `;
 
 export const NavAccordionLink = ({
@@ -47,18 +66,12 @@ export const NavAccordionLink = ({
     closeMenu();
   };
   return (
-    <a
-      style={{ all: 'unset' }}
-      href={href}
-      title={linkTitle}
-      aria-label={linkTitle}
-      onClick={handleClick}
+    <NavAccordionLinkStyles
+      className={`${checkActiveSubLink(href, pathname) ? 'active' : ''} ${className || ''}`}
     >
-      <NavAccordionLinkStyles
-        className={`${checkActiveSubLink(href, pathname) ? 'active' : ''} ${className || ''}`}
-      >
+      <a href={href} title={linkTitle} aria-label={linkTitle} onClick={handleClick}>
         {children}
-      </NavAccordionLinkStyles>
-    </a>
+      </a>
+    </NavAccordionLinkStyles>
   );
 };
diff --git a/src/components/Navbar/elements/NavLink.tsx b/src/components/Navbar/elements/NavLink.tsx
@@ -73,13 +73,11 @@ export const NavLinkStyles = styled.div.attrs(({ color }: { color?: '' | 'yellow
     :focus {
       background: ${({ theme }) => theme.bgHover};
       color: ${({ theme }) => theme.fg};
-
       box-shadow: 0 0 3px 0px ${({ theme }) => theme.alpha.fg} inset;
-
       z-index: 1;
     }
     :focus-visible {
-      outline: 2px solid ${({ theme }) => theme.secondary[800]};
+      outline: 2px solid ${({ theme }) => theme.secondary[800]} !important;
     }
   }
   &.sub-nav.sub-nav-active {

diff --git a/src/theme/styled/GlobalStyles.ts b/src/theme/styled/GlobalStyles.ts
@@ -37,6 +37,9 @@ const GlobalStyles = createGlobalStyle`
     color: ${({ theme }) => theme.white};
     font-size: 1rem;
     font-family: 'Red Hat Display', sans-serif;
+    :focus-visible {
+      outline: 2px solid ${({ theme }) => theme.secondary[800]};
+    }
   }
 
   input, textarea, select {