focus trap

Author: StackOverflowIsBetterThanAnyAI

src/app/page.tsx

@@ -1,8 +1,13 @@
+'use client'
+
 import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
 import Navigation from '@/components/navigation/Navigation'
+import { useFocusTrap } from '@/hooks/useFocusTrap'
 
 export default function Home() {
+    useFocusTrap()
+
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">
             <Navigation />

src/hooks/useFocusTrap.ts

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export const useFocusTrap = () => {
+    useEffect(() => {
+        const focusTrap = (e: KeyboardEvent) => {
+            if (e.key !== 'Tab') {
+                return
+            }
+
+            const focusableElements = (
+                Array.from(
+                    document.querySelectorAll('a, button')
+                ) as HTMLButtonElement[]
+            ).filter((item) => !item.disabled)
+
+            const firstFocusableElement = focusableElements[0]
+            const lastFocusableElement = focusableElements.at(-1)
+
+            if (e.shiftKey) {
+                if (document.activeElement === firstFocusableElement) {
+                    e.preventDefault()
+                    lastFocusableElement?.focus()
+                }
+            } else {
+                if (document.activeElement === lastFocusableElement) {
+                    e.preventDefault()
+                    firstFocusableElement?.focus()
+                }
+            }
+        }
+
+        document.addEventListener('keydown', focusTrap)
+
+        return () => {
+            document.removeEventListener('keydown', focusTrap)
+        }
+    })
+}