Fixed accessibility issues

jrparente · Mar 5, 2024 · 51cdbc4 · 51cdbc4
1 parent b566662
commit 51cdbc4
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 12 deletions.
diff --git a/src/components/AboutSection/AboutSection.tsx b/src/components/AboutSection/AboutSection.tsx
@@ -27,7 +27,7 @@ function AboutSection() {
                 target="_blank"
                 rel="noopener noreferrer"
                 className="link inline-flex items-center gap-1"
-                area-label="Check out my professional experience in my LinkedIn profile"
+                aria-label="Check out my professional experience in my LinkedIn profile"
               >
                 <span>over 10 years of professional experience</span>
                 <ExternalLink className="w-3 h-3" />
@@ -49,7 +49,7 @@ function AboutSection() {
                 target="_blank"
                 rel="noopener noreferrer"
                 className="link inline-flex items-center gap-1"
-                area-label="View my certificates in my LinkedIn profile"
+                aria-label="View my certificates in my LinkedIn profile"
               >
                 <span>certificates</span>
                 <ExternalLink className="w-3 h-3" />

diff --git a/src/components/CaseStudyPage/CaseStudyPage.tsx b/src/components/CaseStudyPage/CaseStudyPage.tsx
@@ -137,7 +137,7 @@ function CaseStudyPage({ project }: CaseStudyPageProps) {
               href={project.links.live}
               target="_blank"
               rel="noopener noreferrer"
-              area-label="Live Website"
+              aria-label="Live Website"
             >
               <Button variant="secondary" aria-label="Live Website">
                 <div className="flex gap-2 items-center">

diff --git a/src/components/ContactSection/ContactSection.tsx b/src/components/ContactSection/ContactSection.tsx
@@ -14,7 +14,7 @@ function ContactSection() {
               <a
                 href="mailto:jrparente@gmail.com"
                 className="link inline-flex items-center gap-1"
-                area-label="Email Me"
+                aria-label="Email Me"
               >
                 jrparente@gmail.com
                 <MailPlus className="w-4 h-4" />
@@ -29,7 +29,7 @@ function ContactSection() {
                     href="https://www.linkedin.com/in/joanaparente/"
                     target="_blank"
                     className="link inline-flex items-center gap-1"
-                    area-label="Reach out to me on LinkedIn"
+                    aria-label="Reach out to me on LinkedIn"
                   >
                     LinkedIn
                     <Linkedin className="w-4 h-4" fill="currentColor" />
@@ -40,7 +40,7 @@ function ContactSection() {
                     href="https://github.com/jrparente/"
                     target="_blank"
                     className="link inline-flex items-center gap-1"
-                    area-label="Check out my GitHub profile"
+                    aria-label="Check out my GitHub profile"
                   >
                     GitHub
                     <Github className="w-4 h-4" fill="currentColor" />

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -15,7 +15,7 @@ function Footer() {
               target="_blank"
               rel="noopener noreferrer"
               className="border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800  rounded p-1 inline-flex items-center leading-4 dark:text-neutral-100 no-underline hover:text-primary-500"
-              area-label="Check out the code on GitHub"
+              aria-label="Check out the code on GitHub"
             >
               <GithubIcon className="inline-flex mr-1 w-4 h-4" />
               GitHub
@@ -27,7 +27,7 @@ function Footer() {
                 href={route.href}
                 key={index}
                 className="hover:text-primary-500 text-white"
-                area-label={route.label}
+                aria-label={route.label}
               >
                 <route.icon className="w-5 h-5" />
                 <span className="sr-only">{route.label}</span>

diff --git a/src/components/MobileSidebar/MobileSidebar.tsx b/src/components/MobileSidebar/MobileSidebar.tsx
@@ -43,7 +43,7 @@ function MobileSidebar({
           isOpen ? "translate-x-0" : "translate-x-full"
         }`}
       >
-        <button onClick={closeSidebar} className="p-4">
+        <button onClick={closeSidebar} className="p-4" aria-label="Close">
           <X />
         </button>
         <ul className="font-medium flex flex-col p-4">
@@ -52,6 +52,7 @@ function MobileSidebar({
               href="/"
               onClick={handleLinkClick}
               className="block font-mono py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100"
+              aria-label="Go to the homepage"
             >
               Home
             </a>
@@ -62,6 +63,7 @@ function MobileSidebar({
                 href={route.href}
                 onClick={handleLinkClick}
                 className="block font-mono py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100"
+                aria-label={route.label}
               >
                 {route.label}
               </a>

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -35,7 +35,7 @@ function Navbar() {
     >
       <MobileSidebar isOpen={isOpen} closeSidebar={closeSidebar} />
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-4 px-5 xs:px-10 sm:px-12 md:px-24 ">
-        <a href="/#" className="flex items-center" area-label="Homepage">
+        <a href="/#" className="flex items-center" aria-label="Homepage">
           <span className="hidden sm:inline-block self-center text-lg whitespace-nowrap uppercase">
             Joana
             <span className="hidden sm:inline-block font-bold">Parente</span>
@@ -49,7 +49,7 @@ function Navbar() {
             href="#contact"
             aria-label="Go to the contact section of my website"
           >
-            <Button area-label="Contact Me">Let's Talk</Button>
+            <Button aria-label="Contact Me">Let's Talk</Button>
           </a>
           <button
             onClick={toggleSidebar}
@@ -58,6 +58,7 @@ function Navbar() {
             className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 "
             aria-controls="navbar-default"
             aria-expanded="false"
+            aria-label="Open main menu"
           >
             <span className="sr-only">Open main menu</span>
             <Menu />
@@ -70,7 +71,7 @@ function Navbar() {
                 <a
                   href={route.href}
                   className="block font-mono py-2 pl-3 pr-4 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 "
-                  area-label={route.label}
+                  aria-label={route.label}
                 >
                   {route.label}
                 </a>