From 34f25ea1817d0ab21e07f0616097fe753009fd07 Mon Sep 17 00:00:00 2001
From: "pranikatyagi35@gmail.com" <bhavya-tyagi20>
Date: Wed, 20 May 2026 10:25:12 +0530
Subject: [PATCH] Fix:Accessibility Issues

---
 package-lock.json                       |  9 ++++++
 src/components/header/header.css        | 39 ++++++++++++++-----------
 src/components/navbar/NavbarIcon.tsx    |  7 +++--
 src/components/scroll/bottom-to-top.tsx |  1 +
 src/components/ui/button.tsx            |  5 ++--
 src/theme/Footer/Layout/index.tsx       | 10 ++++++-
 src/theme/Footer/Logo/index.tsx         |  1 +
 7 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 400d303b..36c8d71a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8095,6 +8095,15 @@
       "hasInstallScript": true,
       "license": "MIT"
     },
+    "node_modules/@tsparticles/basic/node_modules/@tsparticles/plugin-blend": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-blend/-/plugin-blend-4.0.4.tgz",
+      "integrity": "sha512-XY0AvvESoXQS6pVJD7kez8oORzfbI4hzlqCMTPwCsiWFP3f7uUnQyz+3R1KLC33jqZQhpzalFf9G0wTj2Egr3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@tsparticles/engine": "4.0.4"
+      }
+    },
     "node_modules/@tsparticles/basic/node_modules/@tsparticles/plugin-hex-color": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-4.0.4.tgz",
diff --git a/src/components/header/header.css b/src/components/header/header.css
index ed35b535..797aa974 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -44,17 +44,17 @@
   background: linear-gradient(
     90deg,
     #e44d26 0%,
-    /* orange */ #f16529 30%,
-    /* lighter orange */ #d16ba5 60%,
-    /* pink */ #6a5acd 100% /* purple */
+    #f16529 30%,
+    #d16ba5 60%,
+    #6a5acd 100%
   );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   transition: background 0.3s ease-in-out;
-  text-align: center; /* Center the heading text */
-  width: 100%; /* Ensure it takes full width for proper centering */
-  margin-top: 2rem; /* Push heading down for better spacing */
+  text-align: center;
+  width: 100%;
+  margin-top: 2rem;
 }
 
 [data-theme="dark"] .chh__header-content h1 {
@@ -65,17 +65,17 @@
   background: linear-gradient(
     135deg,
     #a1c4fd 0%,
-    /* soft sky blue (pops gently) */ #c2e9fb 25%,
-    /* pastel cyan */ #d4a5f9 60%,
-    /* muted lavender */ #fbc2eb 100% /* soft rose pink */
+    #c2e9fb 25%,
+    #d4a5f9 60%,
+    #fbc2eb 100%
   );
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   transition: background 0.3s ease-in-out;
-  text-align: center; /* Center the heading text */
-  width: 100%; /* Ensure it takes full width for proper centering */
-  margin-top: 2rem; /* Push heading down for better spacing */
+  text-align: center;
+  width: 100%;
+  margin-top: 2rem;
 }
 
 .chh__header-content p {
@@ -85,13 +85,12 @@
   text-align: justify;
   line-height: 30px;
   margin-top: 1.5rem;
-  color: #333; /* Light mode text */
+  color: #333;
   transition: color 0.3s ease-in-out;
 }
 
-/* Override paragraph color in dark mode */
 [data-theme="dark"] .chh__header-content p {
-  color: #ccc; /* Softer white for dark mode */
+  color: #ccc;
 }
 
 html.theme-dark .chh__header-content p {
@@ -128,6 +127,12 @@ html.theme-dark .chh__header-content p {
   justify-content: center;
 }
 
+/* ✅ ADDED ONLY ACCESSIBILITY FIX */
+.chh__header-content__input--button:focus-visible {
+  outline: 2px solid #4c9ffe;
+  outline-offset: 3px;
+}
+
 .chh__header-content__input--button::after {
   content: "";
   position: absolute;
@@ -151,7 +156,7 @@ html.theme-dark .chh__header-content p {
 }
 
 .chh__header-content__input--button:hover {
-  transform: scale(1.03); /* very subtle lift */
+  transform: scale(1.03);
   text-decoration: none;
 }
 
@@ -336,4 +341,4 @@ html.theme-dark .chh__header-content p {
   .navbar__title {
     display: none;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/navbar/NavbarIcon.tsx b/src/components/navbar/NavbarIcon.tsx
index c336653b..5c617c55 100644
--- a/src/components/navbar/NavbarIcon.tsx
+++ b/src/components/navbar/NavbarIcon.tsx
@@ -35,8 +35,9 @@ export default function NavbarIcon(props: NavbarIconProps) {
   // Handle dashboard usage
   if (isDashboardProps(props)) {
     const { icon, text, active, onClick } = props;
+
     return (
-      <div
+      <button
         className={`navbar-icon-item ${active ? "active" : ""}`}
         onClick={onClick}
         role="button"
@@ -49,7 +50,7 @@ export default function NavbarIcon(props: NavbarIconProps) {
       >
         <span className="navbar-icon">{icon}</span>
         <span className="navbar-text">{text}</span>
-      </div>
+      </button>
     );
   }
 
@@ -66,4 +67,4 @@ export default function NavbarIcon(props: NavbarIconProps) {
       <IconComponent size={18} style={{ verticalAlign: "middle" }} />
     </span>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/scroll/bottom-to-top.tsx b/src/components/scroll/bottom-to-top.tsx
index 1c77295e..d594e4cf 100644
--- a/src/components/scroll/bottom-to-top.tsx
+++ b/src/components/scroll/bottom-to-top.tsx
@@ -31,6 +31,7 @@ export default function ScrollBottomToTop() {
     <div className="scroll-to-top">
       {isVisible && (
         <button
+         aria-label="Scroll to top"
           onClick={scrollToTop}
           className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
           style={{ backgroundColor: "var(--ifm-color-primary)" }}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 774b3521..30064a9d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -44,7 +44,8 @@ function Button({
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-  }) {
+  } &
+  React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const Comp = asChild ? Slot : "button";
 
   return (
@@ -56,4 +57,4 @@ function Button({
   );
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants };
\ No newline at end of file
diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx
index 9cefe68b..13b98d9e 100644
--- a/src/theme/Footer/Layout/index.tsx
+++ b/src/theme/Footer/Layout/index.tsx
@@ -121,7 +121,7 @@ export default function FooterLayout(): ReactNode {
                 <div className="logo-container">
                   <img
                     src="/img/logo.png"
-                    alt="recodehive"
+                    alt="RecodeHive Logo"
                     className="footer-logo-img"
                   />
                 </div>
@@ -410,6 +410,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://github.com/recodehive"
                   className="social-link github"
                   aria-label="GitHub"
+                   target="_blank"
+                 rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5807 20.2772 21.0497 21.7437 19.0074C23.2101 16.965 23.9993 14.5143 24 12C24 5.37 18.63 0 12 0Z" />
@@ -420,6 +422,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://x.com/sanjay_kv_"
                   className="social-link twitter"
                   aria-label="Twitter"
+                   target="_blank"
+                    rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
@@ -430,6 +434,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://www.instagram.com/nomad_brains/"
                   className="social-link instagram"
                   aria-label="Instagram"
+                  target="_blank"
+                    rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
@@ -440,6 +446,8 @@ export default function FooterLayout(): ReactNode {
                   to="https://www.linkedin.com/in/sanjay-k-v/"
                   className="social-link linkedin"
                   aria-label="LinkedIn"
+                  target="_blank"
+                    rel="noopener noreferrer"
                 >
                   <svg viewBox="0 0 24 24" fill="currentColor">
                     <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx
index 2aa257a7..e2eda977 100644
--- a/src/theme/Footer/Logo/index.tsx
+++ b/src/theme/Footer/Logo/index.tsx
@@ -31,6 +31,7 @@ export default function FooterLogo({ logo }: Props): ReactNode {
       href={logo.href}
       className={styles.footerLogoLink}
       target={logo.target}
+      aria-label={logo.alt}
     >
       <LogoImage logo={logo} />
     </Link>