Add aria labels to links and buttons in footer

drewlyton · Aug 7, 2023 · f82355b · f82355b
1 parent c6f50ef
commit f82355b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -41,20 +41,31 @@ const Footer = () => {
             rel="noreferrer"
             href="https://twitter.com/itsjustdrewit"
             target="_blank"
+            aria-label="Follow me on LinkedIn"
           >
             <i className="bi bi-linkedin"></i>
           </a>
           <a
             rel="noreferrer"
             href="https://www.youtube.com/c/Curiository"
             target="_blank"
+            aria-label="Follow me on YouTube"
           >
             <i className="bi bi-youtube"></i>
           </a>
-          <a rel="noreferrer" href="https://github.com/aml3ed" target="_blank">
+          <a
+            rel="noreferrer"
+            href="https://github.com/aml3ed"
+            target="_blank"
+            aria-label="Find me on Github"
+          >
             <i className="bi bi-github"></i>
           </a>
-          <button onClick={copyEmail} className="hover:text-ind">
+          <button
+            onClick={copyEmail}
+            className="hover:text-ind"
+            aria-label="Email me"
+          >
             <i className="bi bi-envelope-fill"></i>
           </button>
         </div>

diff --git a/app/components/ThemeSwitch.tsx b/app/components/ThemeSwitch.tsx
@@ -7,6 +7,7 @@ const ThemeSwitch = () => {
     <label htmlFor="theme" className="flex items-center cursor-pointer">
       <div className="relative">
         <input
+          aria-label="Toggle dark/light mode"
           id="theme"
           type="checkbox"
           className="sr-only"