From 72afd202ceed47e14bea485654c43c1462903645 Mon Sep 17 00:00:00 2001
From: SenorBlub <thomasverhappen@Gmail.com>
Date: Thu, 11 Dec 2025 11:26:27 +0100
Subject: [PATCH] Fix tab navigation trap Add arrow key navigation to carousel

---
 .../design-pattern-carousel/index.tsx         | 129 ++++++++++--------
 1 file changed, 74 insertions(+), 55 deletions(-)

diff --git a/src/components/design-pattern-carousel/index.tsx b/src/components/design-pattern-carousel/index.tsx
index 4e4865d..44388f9 100644
--- a/src/components/design-pattern-carousel/index.tsx
+++ b/src/components/design-pattern-carousel/index.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { A11y, Autoplay, Navigation } from "swiper/modules";
+import { A11y, Autoplay, Navigation, Keyboard } from "swiper/modules";
+import type { Swiper as SwiperType } from "swiper";
 
 import "swiper/css";
 import "swiper/css/navigation";
@@ -9,64 +10,82 @@ import Link from "@docusaurus/Link";
 import { designPatterns } from "../../data/design-patterns";
 
 const DesignPatternCarousel: React.FC = () => {
+  const swiperRef = useRef<SwiperType | null>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      swiperRef.current?.slideNext();
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      swiperRef.current?.slidePrev();
+    }
+  };
+
   return (
-    <Swiper
-      modules={[Navigation, Autoplay, A11y]}
-      spaceBetween={20}
-      slidesPerView={"auto"}
-      loop={true}
-      autoplay={{
-        delay: 0,
-        disableOnInteraction: false,
-        pauseOnMouseEnter: true,
-      }}
-      speed={3000}
-      freeMode={true}
-      navigation
-      grabCursor
-      style={
-        {
-          padding: "5rem 0",
-          "--swiper-navigation-color": "var(--ifm-color-primary)",
-        } as React.CSSProperties
-      }
+    <div
+      onKeyDown={handleKeyDown}
+      role="region"
       aria-label="Design Patterns Carousel"
     >
-      {designPatterns.map(({ name, description, path }, idx) => (
-        <SwiperSlide
-          key={idx}
-          style={{
-            width: "220px",
-            boxShadow: "var(--ifm-shadow-md)",
-            borderRadius: "8px",
-            backgroundColor: "var(--ifm-card-background)",
-            padding: "1rem",
-            boxSizing: "border-box",
-            cursor: "pointer",
-            userSelect: "none",
-          }}
-        >
-          <Link
-            to={"/docs/" + path}
-            style={{ textDecoration: "none", color: "inherit" }}
-            tabIndex={0}
-            aria-label={`${name}: ${description}`}
+      <Swiper
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+        }}
+        modules={[Navigation, A11y, Keyboard]}
+        spaceBetween={20}
+        slidesPerView={"auto"}
+        loop={false}
+        keyboard={{
+          enabled: true,
+          onlyInViewport: false,
+        }}
+        speed={500}
+        navigation
+        grabCursor
+        style={
+          {
+            padding: "5rem 0",
+            "--swiper-navigation-color": "var(--ifm-color-primary)",
+          } as React.CSSProperties
+        }
+        aria-label="Design Patterns Carousel"
+      >
+        {designPatterns.map(({ name, description, path }, idx) => (
+          <SwiperSlide
+            key={idx}
+            style={{
+              width: "220px",
+              boxShadow: "var(--ifm-shadow-md)",
+              borderRadius: "8px",
+              backgroundColor: "var(--ifm-card-background)",
+              padding: "1rem",
+              boxSizing: "border-box",
+              cursor: "pointer",
+              userSelect: "none",
+            }}
           >
-            <h3 style={{ margin: "0 0 8px 0" }}>{name}</h3>
-            <p
-              style={{
-                margin: 0,
-                color: "var(--ifm-color-gray-600)",
-                fontSize: "0.9rem",
-              }}
+            <Link
+              to={"/docs/" + path}
+              style={{ textDecoration: "none", color: "inherit" }}
+              aria-label={`${name}: ${description}`}
             >
-              {description}
-            </p>
-          </Link>
-        </SwiperSlide>
-      ))}
-    </Swiper>
+              <h3 style={{ margin: "0 0 8px 0" }}>{name}</h3>
+              <p
+                style={{
+                  margin: 0,
+                  color: "var(--ifm-color-gray-600)",
+                  fontSize: "0.9rem",
+                }}
+              >
+                {description}
+              </p>
+            </Link>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
   );
 };
 
-export default DesignPatternCarousel;
+export default DesignPatternCarousel