Merge pull request #667 from AbelOsaretin/fix/wave10-seo-a11y-error-handling

fix: sitemap SEO contradiction, duplicate error UI, nested interactive elements, and menu keyboard navigation

Author: DeFiVC

src/app/rewards/page.tsx

@@ -29,9 +29,8 @@ export default function RewardsPage() {
     try {
       await claim(claimableId);
       addToast("Reward claimed successfully!", "success");
-    } catch (err) {
+    } catch {
       addToast("Failed to claim reward. Please try again.", "error");
-      throw err;
     }
   };
 

src/app/sitemap.ts

@@ -18,12 +18,6 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       changeFrequency: "daily",
       priority: 0.9,
     },
-    {
-      url: `${SITE_URL}/connect`,
-      lastModified: new Date(),
-      changeFrequency: "monthly",
-      priority: 0.5,
-    },
   ];
 
   let courseRoutes: MetadataRoute.Sitemap = [];

src/components/course/course-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { cn } from "@/lib/utils/cn";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
@@ -44,19 +44,36 @@ export const CourseCard = memo(function CourseCard({
   onContinue,
   className,
 }: CourseCardProps) {
+  const router = useRouter();
+
+  const handleNavigate = () => {
+    router.push(`/courses/${course.id}`);
+  };
+
+  const handleCardKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleNavigate();
+    }
+  };
+
   const handleEnroll = (e: React.MouseEvent) => {
-    e.preventDefault();
+    e.stopPropagation();
     onEnroll?.(course.id);
   };
 
   const handleContinue = (e: React.MouseEvent) => {
-    e.preventDefault();
+    e.stopPropagation();
     onContinue?.(course.id);
   };
 
   return (
-    <Link href={`/courses/${course.id}`}>
       <Card
+        role="link"
+        tabIndex={0}
+        aria-label={course.title}
+        onClick={handleNavigate}
+        onKeyDown={handleCardKeyDown}
         className={cn(
           "group cursor-pointer transition-all hover:shadow-lg hover:-translate-y-1",
           className,
@@ -107,9 +124,9 @@ export const CourseCard = memo(function CourseCard({
 
           <div
             className="absolute top-2 right-2"
-            onClick={(e) => e.preventDefault()}
+            onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") e.preventDefault();
+              if (e.key === "Enter" || e.key === " ") e.stopPropagation();
             }}
           >
             <DropdownMenu>
@@ -192,6 +209,5 @@ export const CourseCard = memo(function CourseCard({
           )}
         </CardFooter>
       </Card>
-    </Link>
   );
 });

src/components/wallet/connect-button.tsx

@@ -29,12 +29,48 @@ export function ConnectButton() {
   const [showMainnetConfirm, setShowMainnetConfirm] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const closeDropdown = useCallback(() => {
     setShowDropdown(false);
     triggerRef.current?.focus();
   }, []);
 
+  const getMenuItems = useCallback(() => {
+    if (!menuRef.current) return [];
+    return Array.from(
+      menuRef.current.querySelectorAll<HTMLElement>('[role="menuitem"]')
+    );
+  }, []);
+
+  const handleMenuKeyDown = (e: React.KeyboardEvent) => {
+    const items = getMenuItems();
+    if (items.length === 0) return;
+
+    const currentIndex = items.findIndex(
+      (item) => item === document.activeElement
+    );
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        items[(currentIndex + 1 + items.length) % items.length].focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        items[(currentIndex - 1 + items.length) % items.length].focus();
+        break;
+      case "Home":
+        e.preventDefault();
+        items[0].focus();
+        break;
+      case "End":
+        e.preventDefault();
+        items[items.length - 1].focus();
+        break;
+    }
+  };
+
   useEffect(() => {
     if (!showDropdown) return;
 
@@ -116,8 +152,10 @@ export function ConnectButton() {
 
         {showDropdown && (
           <div
+            ref={menuRef}
             className="absolute right-0 top-full mt-2 w-56 rounded-xl border border-gray-200 bg-white p-1.5 shadow-xl z-50 dark:border-gray-800 dark:bg-gray-900"
             role="menu"
+            onKeyDown={handleMenuKeyDown}
           >
             <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
               <div className="text-xs text-gray-400 font-medium">Connected Wallet</div>