From bed9d5a62d443d7a71349ff6eb82c45b8da13b1d Mon Sep 17 00:00:00 2001
From: Tai Kong <294386838+aroberts957@users.noreply.github.com>
Date: Mon, 31 Aug 2026 02:25:05 +0800
Subject: [PATCH] a11y: add arrow key navigation to Tabs

---
 frontend/src/components/ui/tabs.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 7e3f98b0..028e4600 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -38,6 +38,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
+    role="tablist"
     className={cn(
       'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       className
@@ -56,12 +57,28 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
     const { value: selectedValue, onValueChange } = useTabsContext()
     const isSelected = value === selectedValue
 
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault()
+        const tabList = e.currentTarget.closest('[role="tablist"]') || e.currentTarget.parentElement
+        const tabs = Array.from(tabList?.querySelectorAll('[role="tab"]') || [])
+        const currentIndex = tabs.indexOf(e.currentTarget)
+        const nextIndex = e.key === 'ArrowLeft'
+          ? (currentIndex - 1 + tabs.length) % tabs.length
+          : (currentIndex + 1) % tabs.length
+        const nextTab = tabs[nextIndex] as HTMLButtonElement
+        nextTab?.focus()
+        nextTab?.click()
+      }
+    }
+
     return (
       <button
         ref={ref}
         type="button"
         role="tab"
         aria-selected={isSelected}
+        onKeyDown={handleKeyDown}
         onClick={() => onValueChange(value)}
         className={cn(
           'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -84,7 +101,7 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
   ({ className, value, ...props }, ref) => {
     const { value: selectedValue } = useTabsContext()
-    
+
     if (value !== selectedValue) {
       return null
     }