Fix:Accessibility Issues

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;
   }
-}
+}

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

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

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

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

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>