From f6142969459ee2946984bb7eafdfa1465e5ddec8 Mon Sep 17 00:00:00 2001
From: Chakshu-Bamotra <chakshubamotra123@gmail.com>
Date: Mon, 1 Jun 2026 10:56:46 +0530
Subject: [PATCH] fix: add keyboard navigation for wrapped slides

---
 src/components/WrappedExperience.tsx | 36 +++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/WrappedExperience.tsx b/src/components/WrappedExperience.tsx
index 63f5decd..d7aeadc3 100644
--- a/src/components/WrappedExperience.tsx
+++ b/src/components/WrappedExperience.tsx
@@ -101,7 +101,38 @@ export default function WrappedExperience() {
 
     return () => controller.abort();
   }, [selectedYear, reloadKey]);
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!slides.length) return;
+
+      switch (event.key) {
+        case "ArrowLeft":
+          setSlide((value) => Math.max(0, value - 1));
+          break;
+
+        case "ArrowRight":
+          setSlide((value) => Math.min(slides.length - 1, value + 1));
+          break;
+
+        case "Home":
+          setSlide(0);
+          break;
+
+        case "End":
+          setSlide(slides.length - 1);
+          break;
+
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
 
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [slides.length]);
   const slides = useMemo(() => {
     if (!stats) return [];
 
@@ -260,7 +291,10 @@ export default function WrappedExperience() {
         ) : stats && currentSlide ? (
           <>
             <section className="grid flex-1 items-center gap-6 py-8 lg:grid-cols-[minmax(0,1.35fr)_minmax(300px,0.65fr)]">
-              <div
+             <div
+                tabIndex={0}
+                role="region"
+                aria-label="Year in Code slides"
                 className={`relative min-h-[520px] overflow-hidden rounded-lg border border-white/10 bg-gradient-to-br ${
                   SLIDE_THEMES[slide % SLIDE_THEMES.length]
                 } p-6 shadow-2xl shadow-cyan-950/30 sm:p-10`}