From 0b35d68b63c5d42ee82042a52c150275ed3776a2 Mon Sep 17 00:00:00 2001
From: Anmol-Baranwal <anmolbaranwal119@gmail.com>
Date: Thu, 3 Aug 2023 11:05:20 +0530
Subject: [PATCH] chore: add aria label attribute to links & buttons

---
 components/BackToTop/BackToTopButton.tsx     |  1 +
 components/Footer/Footer.tsx                 |  8 +++++++-
 components/Header/Header.tsx                 |  3 ++-
 components/NewIssue/NewIssue.tsx             | 15 ++++++++-------
 components/Searchbar/Searchbar.tsx           |  1 +
 components/SideNavbar/SideNavbarCategory.tsx |  1 +
 components/SideNavbar/SideNavbarElement.tsx  |  1 +
 components/SideNavbar/SideNavbarHeader.tsx   |  3 ++-
 components/ThemeToggler/themeToggler.tsx     | 11 +++++++++--
 pages/contributors.tsx                       |  2 ++
 pages/index.tsx                              |  5 ++++-
 11 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx
index ffe7861c0..f6b5b8b32 100644
--- a/components/BackToTop/BackToTopButton.tsx
+++ b/components/BackToTop/BackToTopButton.tsx
@@ -52,6 +52,7 @@ export const BackToTopButton = () => {
         className={buttonClasses}
         onClick={handleClick}
         title="Back to top"
+        aria-label="Back to top button"
       >
         <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index e31198c7d..5dfb28d91 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -19,11 +19,17 @@ export const Footer: FC = () => {
           href="https://linkfree.io/rupali-codes"
           target="_blank"
           rel="noopener noreferrer"
+          aria-label="GitHub Profile of Rupali Haldiya"
         >
           <span className={nameStyles}>Rupali Haldiya</span>
         </Link>{' '}
         and{' '}
-        <Link href="/contributors" rel="noopener noreferrer" target="_blank">
+        <Link
+          href="/contributors"
+          rel="noopener noreferrer"
+          target="_blank"
+          aria-label="List of Contributors in LinksHub"
+        >
           <span className={nameStyles}>Open Source Community</span>
         </Link>
       </p>
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index b95552991..0082cbc92 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -13,7 +13,7 @@ export const Header: FC = () => {
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
       <div className="bg-[rgba(255,255,255,0.3)] h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
-        <Link href="/">
+        <Link href="/" aria-label="LinksHub Logo">
           <Logo className="text-3xl" />
         </Link>
       </div>
@@ -25,6 +25,7 @@ export const Header: FC = () => {
           <button
             className="dark:text-text-primary lg:hidden"
             onClick={toggleNav}
+            aria-label="toggle button"
           >
             <AiOutlineMenu size={24} />
           </button>
diff --git a/components/NewIssue/NewIssue.tsx b/components/NewIssue/NewIssue.tsx
index 774b56c39..408a124fc 100644
--- a/components/NewIssue/NewIssue.tsx
+++ b/components/NewIssue/NewIssue.tsx
@@ -5,13 +5,14 @@ const NewIssue: FC = () => {
   return (
     <div className="pt-6 md:p-0 text-xl w-fit m-auto">
       <span>Be the first to add by creating a GitHub issue </span>
-        <Link 
-           className="dark:text-theme-primary text-theme-secondary underline"
-          href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
-          target="_blank"
-        >
-          here
-        </Link>
+      <Link
+        className="dark:text-theme-primary text-theme-secondary underline"
+        href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
+        target="_blank"
+        aria-label="Page to create new Issue"
+      >
+        here
+      </Link>
     </div>
   )
 }
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index 7ab87f302..d34eaaa1d 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -81,6 +81,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
           <button
             type="submit"
             className="ml-2 px-4 py-2.5 bg-theme-secondary text-light-primary rounded-md border border-dashed border-transparent hover:border-theme-primary hover:bg-transparent hover:text-theme-primary dark:hover:text-theme-primary transition-colors transition duration-300 ease-in-out"
+            aria-label="submit query button"
           >
             <SearchIcon className="w-5 h-5" />
           </button>
diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
index ebd56f621..84931ccb9 100644
--- a/components/SideNavbar/SideNavbarCategory.tsx
+++ b/components/SideNavbar/SideNavbarCategory.tsx
@@ -27,6 +27,7 @@ export const SideNavbarCategory: FC<{
       <button
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
+        aria-label="toggle category"
       >
         <h1 className="font-bold uppercase">{item.category}</h1>
         <FaAngleDown
diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
index ec97cf2f4..e48a83812 100644
--- a/components/SideNavbar/SideNavbarElement.tsx
+++ b/components/SideNavbar/SideNavbarElement.tsx
@@ -11,6 +11,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
   return (
     <Link
       href={url}
+      aria-label="Side Navbar Elements"
       onClick={closeNav}
       className={`${
         router.asPath === url
diff --git a/components/SideNavbar/SideNavbarHeader.tsx b/components/SideNavbar/SideNavbarHeader.tsx
index 539f62216..fc8640d9f 100644
--- a/components/SideNavbar/SideNavbarHeader.tsx
+++ b/components/SideNavbar/SideNavbarHeader.tsx
@@ -12,12 +12,13 @@ export const SideNavbarHeader: FC = () => {
   return (
     <header>
       <div className="flex items-center justify-between bg-gray-100 p-4 dark:bg-gray-900">
-        <Link href={'/'}>
+        <Link href={'/'} aria-label="Side Navbar Header Linking with Logo">
           <Logo className="text-3xl" />
         </Link>
         <button
           className="h-[24px] w-[24px] dark:text-gray-300 lg:hidden"
           onClick={toggleNav}
+          aria-label="Toggle sidebar navigation"
         >
           <AiOutlineClose size={24} id="hamburger" />
         </button>
diff --git a/components/ThemeToggler/themeToggler.tsx b/components/ThemeToggler/themeToggler.tsx
index ed98ddd40..850abee07 100644
--- a/components/ThemeToggler/themeToggler.tsx
+++ b/components/ThemeToggler/themeToggler.tsx
@@ -27,11 +27,18 @@ export function ThemeToggler() {
     <button
       onClick={handleThemeToggle}
       title={`Toggle dark mode (current state: ${resolvedTheme})`}
+      aria-label="Toggle dark mode"
     >
       {resolvedTheme === 'dark' ? (
-        <HiSun {...iconProps} className='text-light-primary hover:text-theme-primary transition duration-300 ease-in-out' />
+        <HiSun
+          {...iconProps}
+          className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
+        />
       ) : (
-        <HiMoon {...iconProps} className='text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out' />
+        <HiMoon
+          {...iconProps}
+          className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+        />
       )}
     </button>
   )
diff --git a/pages/contributors.tsx b/pages/contributors.tsx
index d615b1924..cd472bd88 100644
--- a/pages/contributors.tsx
+++ b/pages/contributors.tsx
@@ -136,12 +136,14 @@ const ContributorsPage: FC<{ contributors: Contributor[] }> = ({
               <Link
                 href={`https://github.com/${contributor.login}`}
                 {...linkProps}
+                aria-label={`GitHub Profile of ${contributor.login}`}
               >
                 GitHub
               </Link>
               <Link
                 href={`https://github.com/rupali-codes/LinksHub/commits?author=${contributor.login}`}
                 {...linkProps}
+                aria-label={`Commit History of ${contributor.login} in LinksHub`}
               >
                 Contributions
               </Link>
diff --git a/pages/index.tsx b/pages/index.tsx
index 96d145e47..aeab8cc19 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -22,7 +22,10 @@ export default function Home() {
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#202c46" />
-        <meta name="keywords" content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites" />
+        <meta
+          name="keywords"
+          content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites"
+        />
         <meta name="author" content="Rupali Haldiya" />
         <meta name="robots" content="index, follow" />
         <meta name="revisit-after" content="7 days" />