chore: add aria label attribute to links & buttons (#1472)

components/BackToTop/BackToTopButton.tsx

@@ -52,6 +52,8 @@ export const BackToTopButton = () => {
       <button
         className={buttonClasses}
         onClick={handleClick}
+        title="Back to top"
+        aria-label="Back to top button"
         data-tooltip-id="btn-tooltip"
         data-tooltip-content="Back to Top"
         data-tooltip-place="top"

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>

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>

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>
   )
 }

components/Searchbar/Searchbar.tsx

@@ -83,6 +83,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 duration-300 ease-in-out"
+            aria-label="submit query button"
           >
             <SearchIcon className="w-5 h-5" aria-hidden="true" />
           </button>

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

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

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>

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>
   )

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>

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" />