fix: a11y issues (#68)

* fix: add aria-label to mode toggle btn

* fix: make links underlined at all times

* fix: button/img alt text

* fix: link styling

Author: jcserv

src/components/CertificatesBar.tsx

@@ -12,25 +12,25 @@ export const CertificatesBar: React.FC = () => {
           href="https://www.credly.com/badges/517ae2cf-990f-4e3f-acf7-c7dc692c67a0/public_url"
           tooltip="AWS Certified Developer (DVA-C01)"
         >
-          <FaAws className="w-6 h-6 hover:text-[#ff9900]" />
+          <FaAws aria-label="AWS Certified Developer (DVA-C01) certificate" className="w-6 h-6 hover:text-[#ff9900]" />
         </IconButton>
         <IconButton
           href="https://www.credly.com/badges/e6715f11-b3a5-4793-ad15-569250ac42f6/public_url"
           tooltip="Datadog Fundamentals"
         >
-          <SiDatadog className="w-6 h-6 hover:text-[#632ca6]" />
+          <SiDatadog aria-label="Datadog Fundamentals certificate" className="w-6 h-6 hover:text-[#632ca6]" />
         </IconButton>
         <IconButton
           href="https://www.credly.com/badges/646b9426-2046-459d-a0cf-f2c3fd8c6fa1/public_url"
           tooltip="PagerDuty Incident Responder"
         >
-          <SiPagerduty className="w-6 h-6 hover:text-[#048a24]" />
+          <SiPagerduty aria-label="PagerDuty Incident Responder certificate" className="w-6 h-6 hover:text-[#048a24]" />
         </IconButton>
         <IconButton
           href="https://credentials.getdbt.com/0eda8bc8-abda-43ca-80ae-10ffb87fcfd2"
           tooltip="dbt Fundamentals"
         >
-          <SiDbt className="w-6 h-6 hover:text-[#ff6849]" />
+          <SiDbt aria-label="dbt Fundamentals Certificate" className="w-6 h-6 hover:text-[#ff6849]" />
         </IconButton>
       </TooltipProvider>
     </div>

src/components/ContinueIndicator.tsx

@@ -14,6 +14,7 @@ export const ContinueIndicator: React.FC<ContinueIndicatorProps> = ({
   <div className={className}>
     <Button variant="ghost" onClick={() => scrollToSection(nextSection)}>
       <ChevronDown
+        aria-label="Continue to next section"
         className="w-8 h-8 animate-bounce hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]"
         onClick={() => scrollToSection("about")}
       />

src/components/Link.tsx

@@ -17,7 +17,7 @@ export const Link = ({ href, children, className }: LinkProps) => (
     target="_blank"
     href={href}
     className={cn(
-      "hover:text-[#1ca7d0] dark:hover:text-[#90cdf4] hover:underline",
+      "hover:text-[#1ca7d0] dark:hover:text-[#90cdf4] underline",
       className,
     )}
     rel="noreferrer"
@@ -30,7 +30,7 @@ export const StyledLink = ({ href, children, className }: LinkProps) => (
   <a
     target="_blank"
     href={href}
-    className={cn("text-[#1ca7d0] hover:underline", className)}
+    className={cn("text-[#1ca7d0] underline", className)}
     rel="noreferrer"
   >
     {children}

src/components/SocialsBar.tsx

@@ -12,21 +12,21 @@ const socials: Social[] = [
   {
     label: "Github",
     icon: (
-      <Github className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
+      <Github aria-label="Github Profile" className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
     ),
     url: "https://github.com/jcserv",
   },
   {
     label: "LinkedIn",
     icon: (
-      <Linkedin className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
+      <Linkedin aria-label="LinkedIn Profile" className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
     ),
     url: "https://linkedin.com/in/jarrod-servilla",
   },
   {
     label: "Resume",
     icon: (
-      <File className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
+      <File aria-label="Jarrod Servilla's Resume" className="w-6 h-6 hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />
     ),
     url: "/resume.pdf",
   },

src/components/mode-toggle.tsx

@@ -11,7 +11,7 @@ export function ModeToggle() {
   };
 
   return (
-    <Button variant="ghost" onClick={toggleDarkMode} className="p-2 w-8 h-8">
+    <Button variant="ghost" aria-label={`Set theme to ${theme === "dark" ? 'light mode' : 'dark mode'}` } onClick={toggleDarkMode} className="p-2 w-8 h-8">
       {theme === "dark" ? (
         <Moon className="w-4 h-4" />
       ) : (

src/sections/Projects/Projects.tsx

@@ -18,24 +18,27 @@ const linkIcons: Map<LinkType, JSX.Element> = new Map([
     "github",
     <Github
       key="github"
+      aria-label="Github Repository"
       className="hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]"
     />,
   ],
   [
     "youtube",
     <Youtube
       key="youtube"
+      aria-label="YouTube Demo"
       className="hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]"
     />,
   ],
   [
     "devpost",
     <SiDevpost
       key="devpost"
+      aria-label="Devpost Project Page"
       className="hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]"
     />,
   ],
-  ["link", <Link key="link" />],
+  ["link", <Link key="link" aria-label="Link to Project" className="hover:text-[#1ca7d0] dark:hover:text-[#90cdf4]" />],
 ]);
 
 type ProjectLink = {