fix: improved accesibility

michaelbrusegard · Jan 4, 2025 · a5c6b10 · a5c6b10
1 parent e9d06c6
commit a5c6b10
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 62 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -41,7 +41,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <html
       lang='en'
       dir='ltr'
-      className={`h-full w-full ${sfProDisplay.variable} ${sfProText.variable} ${sfMono.variable}`}
+      className={`h-full w-full scroll-smooth ${sfProDisplay.variable} ${sfProText.variable} ${sfMono.variable}`}
       suppressHydrationWarning
     >
       <body className='relative h-full w-full bg-background font-sf-pro-text text-foreground antialiased'>

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
@@ -14,9 +14,16 @@ type NavProps = {
 function Nav({ isMobile = false, animate = 'show' }: NavProps) {
   const duration = isMobile ? 0.2 : 1;
   return (
-    <nav className={isMobile ? 'mb-6' : 'hidden sm:flex'}>
-      <ul className={isMobile ? 'flex flex-col gap-3' : 'flex gap-10'}>
+    <nav
+      className={isMobile ? 'mb-6' : 'hidden sm:flex'}
+      aria-label={isMobile ? 'Mobile navigation' : 'Main navigation'}
+    >
+      <ul
+        className={isMobile ? 'flex flex-col gap-3' : 'flex gap-10'}
+        role='menubar'
+      >
         <m.li
+          role='none'
           variants={fadeIn('down', '', isMobile ? 0.8 : 0.25, duration)}
           initial='hidden'
           animate={animate}
@@ -26,11 +33,14 @@ function Nav({ isMobile = false, animate = 'show' }: NavProps) {
           <Link
             className='rounded-md font-sf-mono font-medium outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
             href='#about'
+            role='menuitem'
+            aria-current={location.hash === '#about' ? 'page' : undefined}
           >
             About
           </Link>
         </m.li>
         <m.li
+          role='none'
           variants={fadeIn('down', '', isMobile ? 0.8 : 0.5, duration)}
           initial='hidden'
           animate={animate}
@@ -40,11 +50,14 @@ function Nav({ isMobile = false, animate = 'show' }: NavProps) {
           <Link
             className='rounded-md font-sf-mono font-medium outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
             href='#work'
+            role='menuitem'
+            aria-current={location.hash === '#work' ? 'page' : undefined}
           >
             Work
           </Link>
         </m.li>
         <m.li
+          role='none'
           variants={fadeIn('down', '', isMobile ? 0.8 : 0.75, duration)}
           initial='hidden'
           animate={animate}
@@ -54,12 +67,15 @@ function Nav({ isMobile = false, animate = 'show' }: NavProps) {
           <Link
             className='rounded-md font-sf-mono font-medium outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
             href='#contact'
+            role='menuitem'
+            aria-current={location.hash === '#contact' ? 'page' : undefined}
           >
             Contact
           </Link>
         </m.li>
         <m.li
           className={`flex items-center ${isMobile ? 'gap-5' : 'gap-2'}`}
+          role='none'
           variants={fadeIn('down', '', isMobile ? 0.8 : 1, duration)}
           initial='hidden'
           animate={animate}

diff --git a/src/components/layout/SectionWrapper.tsx b/src/components/layout/SectionWrapper.tsx
@@ -0,0 +1,26 @@
+import { m } from 'motion/react';
+import { ComponentType, PropsWithoutRef } from 'react';
+import { staggerContainer } from '@/utils/motion';
+
+function SectionHOC<T extends object>(Component: ComponentType<T>, id: string) {
+  function Wrapper(props: PropsWithoutRef<T>) {
+    return (
+      <m.section
+        id={id}
+        variants={staggerContainer()}
+        initial='hidden'
+        whileInView='show'
+        viewport={{ once: true, amount: 0.15 }}
+        className='padding relative z-10 mx-auto max-w-7xl scroll-mt-24'
+      >
+        <Component {...(props as T)} />
+      </m.section>
+    );
+  }
+
+  Wrapper.displayName = `SectionWrapper(${Component.displayName || Component.name || 'Component'})`;
+
+  return Wrapper;
+}
+
+export { SectionHOC };
diff --git a/src/components/sections/hero/Hero.tsx b/src/components/sections/hero/Hero.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useEffect, useRef } from 'react';
 import { m } from 'motion/react';
 import { useSimulation } from '@/components/providers/SimulationProvider';
@@ -19,10 +20,16 @@ function Hero() {
   }, []);
 
   return (
-    <section className='relative z-10 mx-auto h-screen w-full'>
+    <section
+      className='relative z-10 mx-auto h-screen w-full'
+      aria-label='Introduction section'
+    >
       <HeroPhoto />
       <div className='absolute inset-0 top-[80px] mx-auto flex max-w-7xl flex-row items-start gap-5 px-6 sm:px-11 md:px-16 xs:top-[120px]'>
-        <div className='mt-5 flex flex-col items-center justify-center'>
+        <div
+          className='mt-5 flex flex-col items-center justify-center'
+          aria-hidden='true'
+        >
           <div className='h-5 w-5 rounded-full bg-primary' />
           <div className='h-40 w-1 bg-gradient-to-b from-primary via-secondary to-transparent sm:h-80' />
         </div>
@@ -36,33 +43,38 @@ function Hero() {
             ref={aboutTextRef}
           >
             I&apos;m a{' '}
-            <span className='from-primary to-accent bg-clip-text text-transparent bg-gradient-120'>
+            <span
+              className='from-primary to-accent bg-clip-text text-transparent bg-gradient-120'
+              role='text'
+            >
               Software Developer
             </span>{' '}
             residing in&nbsp;
-            <br className='hidden sm:block' />
+            <br className='hidden sm:block' aria-hidden='true' />
             Trondheim, Norway
             <span className='xs:hidden landscape-sm:inline'>.</span>
             <span className='hidden xs:inline landscape-sm:hidden'>
               , seeking new opportunities&nbsp;
-              <br className='hidden sm:block' />
+              <br className='hidden sm:block' aria-hidden='true' />
               to contribute my skills and knowledge.
             </span>
           </m.p>
           <HeroSocial />
         </div>
       </div>
       <div className='absolute bottom-24 flex w-full items-center justify-center landscape-md:bottom-6'>
-        <button
+        <Link
           className='group pointer-events-auto rounded-md outline-2 outline-offset-2 outline-primary/60 transition-transform duration-200 hover:translate-y-2 focus-visible:outline'
+          href='#about'
           onClick={() => {
             multipleSplats(5);
-            document.querySelector('#about')?.scrollIntoView({
-              behavior: 'smooth',
-            });
           }}
+          aria-label='Scroll to about section'
         >
-          <div className='flex h-[64px] w-[35px] items-start justify-center rounded-3xl border-4 border-foreground p-2 transition-colors group-hover:border-primary'>
+          <div
+            className='flex h-[64px] w-[35px] items-start justify-center rounded-3xl border-4 border-foreground p-2 transition-colors group-hover:border-primary'
+            role='presentation'
+          >
             <m.div
               animate={{
                 y: [0, 24, 0],
@@ -73,9 +85,10 @@ function Hero() {
                 repeatType: 'loop',
               }}
               className='mb-1 h-3 w-3 rounded-full bg-foreground transition-colors group-hover:bg-primary'
+              aria-hidden='true'
             />
           </div>
-        </button>
+        </Link>
       </div>
     </section>
   );

diff --git a/src/components/sections/hero/HeroSocial.tsx b/src/components/sections/hero/HeroSocial.tsx
@@ -6,57 +6,62 @@ import { LinkedInLogo } from '@/components/assets/LinkedInLogo';
 
 function HeroSocial() {
   return (
-    <ul className='mt-5 flex flex-row flex-wrap gap-3'>
-      <m.li
-        className='flex-shrink-0'
-        variants={fadeIn('left', '', 2.0, 0.5)}
-        initial='hidden'
-        animate='show'
-        whileHover={{ translateY: '-2px' }}
-        transition={{ duration: 0.2 }}
-      >
-        <Link
-          href='https://www.linkedin.com/in/michaelbrusegard/'
-          target='_blank'
-          rel='noreferrer'
-          className='block rounded-[3px] outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
+    <nav aria-label='links'>
+      <ul className='mt-5 flex flex-row flex-wrap gap-3'>
+        <m.li
+          className='flex-shrink-0'
+          variants={fadeIn('left', '', 2.0, 0.5)}
+          initial='hidden'
+          animate='show'
+          whileHover={{ translateY: '-2px' }}
+          transition={{ duration: 0.2 }}
         >
-          <LinkedInLogo className='h-9 w-9' aria-hidden='true' />
-        </Link>
-      </m.li>
-      <m.li
-        className='flex-shrink-0'
-        variants={fadeIn('left', '', 2.5, 0.5)}
-        initial='hidden'
-        animate='show'
-        whileHover={{ translateY: '-2px' }}
-        transition={{ duration: 0.2 }}
-      >
-        <Link
-          href='https://github.com/michaelbrusegard/'
-          target='_blank'
-          rel='noreferrer'
-          className='block rounded-[3px] outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
+          <Link
+            href='https://www.linkedin.com/in/michaelbrusegard/'
+            target='_blank'
+            rel='noreferrer'
+            className='block rounded-[3px] outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
+            aria-label='Visit my LinkedIn profile'
+          >
+            <LinkedInLogo className='h-9 w-9' aria-hidden='true' />
+          </Link>
+        </m.li>
+        <m.li
+          className='flex-shrink-0'
+          variants={fadeIn('left', '', 2.5, 0.5)}
+          initial='hidden'
+          animate='show'
+          whileHover={{ translateY: '-2px' }}
+          transition={{ duration: 0.2 }}
         >
-          <GitHubLogo className='h-9 w-9' aria-hidden='true' />
-        </Link>
-      </m.li>
-      <m.li
-        className='w-full sm:w-auto'
-        variants={fadeIn('left', '', 3.0, 0.5)}
-        initial='hidden'
-        animate='show'
-        whileHover={{ translateY: '-2px' }}
-        transition={{ duration: 0.2 }}
-      >
-        <Link
-          href='#contact'
-          className='flex h-9 w-fit items-center rounded-[3px] bg-primary px-4 font-semibold text-background outline-2 outline-offset-2 outline-primary/60 transition-[color,box-shadow] duration-200 hover:from-primary hover:to-accent hover:text-foreground hover:shadow-xl hover:shadow-primary hover:bg-gradient-30 focus-visible:outline'
+          <Link
+            href='https://github.com/michaelbrusegard/'
+            target='_blank'
+            rel='noreferrer'
+            className='block rounded-[3px] outline-2 outline-offset-2 outline-primary/60 hover:text-primary focus-visible:outline'
+            aria-label='Visit my GitHub profile'
+          >
+            <GitHubLogo className='h-9 w-9' aria-hidden='true' />
+          </Link>
+        </m.li>
+        <m.li
+          className='w-full sm:w-auto'
+          variants={fadeIn('left', '', 3.0, 0.5)}
+          initial='hidden'
+          animate='show'
+          whileHover={{ translateY: '-2px' }}
+          transition={{ duration: 0.2 }}
         >
-          Let&apos;s Talk
-        </Link>
-      </m.li>
-    </ul>
+          <Link
+            href='#contact'
+            className='flex h-9 w-fit items-center rounded-[3px] bg-primary px-4 font-semibold text-background outline-2 outline-offset-2 outline-primary/60 transition-[color,box-shadow] duration-200 hover:from-primary hover:to-accent hover:text-foreground hover:shadow-xl hover:shadow-primary hover:bg-gradient-30 focus-visible:outline'
+            aria-label='Navigate to the contact section'
+          >
+            Let&apos;s Talk
+          </Link>
+        </m.li>
+      </ul>
+    </nav>
   );
 }