diff --git a/UI_AUDIT_REPORT.md b/UI_AUDIT_REPORT.md
index 2d08c37..cae4f26 100644
--- a/UI_AUDIT_REPORT.md
+++ b/UI_AUDIT_REPORT.md
@@ -620,26 +620,47 @@ export const announceToScreenReader = (message: string) => {
   - [✅] 添加 `role="list"` 到网格容器
   - [✅] 添加 `role="listitem"` 到每个卡片
 
-#### 6. **添加键盘导航支持** (预计 4 小时)
-- [ ] **VideoGrid.tsx**
-  - [ ] 添加 `onKeyDown` 处理 Enter/Space 键
-  - [ ] 实现方向键导航（上下左右）
-  - [ ] 添加 `tabIndex={0}` 到每个卡片
+#### 6. **添加键盘导航支持** (预计 4 小时) ✅ **已完成**
+- [x] **VideoGrid.tsx**
+  - [x] 添加 `onKeyDown` 处理 Enter/Space 键
+  - [x] 实现方向键导航（上下左右）
+  - [x] 添加 `tabIndex={0}` 到每个卡片
+  - [x] 添加 `aria-label` 描述性标签
+  - [x] 添加视觉焦点指示器 (ring)
 
-- [ ] **TypeBadges.tsx**
-  - [ ] 添加 `onKeyDown` 处理 Enter/Space 键
-  - [ ] 实现方向键在徽章间切换
-  - [ ] 添加 `role="group"` 和 `aria-label="类型筛选"`
+- [x] **TypeBadges.tsx**
+  - [x] 添加 `onKeyDown` 处理 Enter/Space 键
+  - [x] 实现方向键在徽章间切换
+  - [x] 添加 `role="group"` 和 `aria-label="类型筛选"`
+  - [x] 添加 `aria-pressed` 状态
+  - [x] 添加视觉焦点指示器
+  - [x] 支持移动端滚动到视图
 
-- [ ] **SearchHistoryDropdown.tsx**
-  - [ ] 添加方向键上下选择
-  - [ ] 添加 Escape 键关闭下拉框
-  - [ ] 添加 Home/End 键跳转首尾
+- [x] **SearchHistoryDropdown.tsx**
+  - [x] 添加方向键上下选择
+  - [x] 添加 Escape 键关闭下拉框
+  - [x] 添加 Home/End 键跳转首尾
+  - [x] 添加 `aria-selected` 状态
+  - [x] 添加视觉焦点指示器
+  - [x] 支持 Enter/Space 键选择
 
-- [ ] **EpisodeList.tsx**
-  - [ ] 添加方向键上下切换集数
-  - [ ] 添加 `role="radiogroup"`
-  - [ ] 当前集数添加 `aria-current="true"`
+- [x] **EpisodeList.tsx**
+  - [x] 添加方向键上下切换集数
+  - [x] 添加 `role="radiogroup"`
+  - [x] 当前集数添加 `aria-current="true"`
+  - [x] 添加 `role="radio"` 到每个按钮
+  - [x] 添加 `aria-checked` 状态
+  - [x] 添加 `focus-visible` 样式
+  - [x] 支持自动滚动到焦点项
+
+**实现细节**:
+- ✅ 创建了 `useKeyboardNavigation` 自定义 Hook，统一管理键盘导航逻辑
+- ✅ 支持三种导航模式：`horizontal`（水平）、`vertical`（垂直）、`grid`（网格）
+- ✅ 网格导航自动检测列数，支持响应式布局
+- ✅ 所有交互元素均添加 `tabIndex={0}` 支持键盘聚焦
+- ✅ 使用 `focus-visible:ring-2` 提供清晰的视觉焦点反馈
+- ✅ 完整的 ARIA 属性支持，符合 WAI-ARIA 标准
+- ✅ 焦点项自动滚动到视图内，优化用户体验
 
 #### 7. **图片加载优化** (预计 2 小时)
 - [ ] 创建 `public/placeholder-poster.svg` 占位图
diff --git a/components/player/EpisodeList.tsx b/components/player/EpisodeList.tsx
index 1af7232..724c206 100644
--- a/components/player/EpisodeList.tsx
+++ b/components/player/EpisodeList.tsx
@@ -1,8 +1,10 @@
 'use client';
 
+import { useRef, useCallback } from 'react';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Icons } from '@/components/ui/Icon';
+import { useKeyboardNavigation } from '@/lib/hooks/useKeyboardNavigation';
 
 interface Episode {
   name?: string;
@@ -16,6 +18,30 @@ interface EpisodeListProps {
 }
 
 export function EpisodeList({ episodes, currentEpisode, onEpisodeClick }: EpisodeListProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Keyboard navigation
+  useKeyboardNavigation({
+    enabled: true,
+    containerRef: listRef,
+    currentIndex: currentEpisode,
+    itemCount: episodes?.length || 0,
+    orientation: 'vertical',
+    onNavigate: useCallback((index: number) => {
+      buttonRefs.current[index]?.focus();
+      buttonRefs.current[index]?.scrollIntoView({ 
+        behavior: 'smooth', 
+        block: 'nearest' 
+      });
+    }, []),
+    onSelect: useCallback((index: number) => {
+      if (episodes && episodes[index]) {
+        onEpisodeClick(episodes[index], index);
+      }
+    }, [episodes, onEpisodeClick]),
+  });
+
   return (
     <Card hover={false} className="lg:sticky lg:top-32">
       <h3 className="text-lg sm:text-xl font-bold text-[var(--text-color)] mb-4 flex items-center gap-2">
@@ -26,18 +52,36 @@ export function EpisodeList({ episodes, currentEpisode, onEpisodeClick }: Episod
         )}
       </h3>
 
-      <div className="max-h-[400px] sm:max-h-[600px] overflow-y-auto space-y-2 pr-2">
+      <div 
+        ref={listRef}
+        className="max-h-[400px] sm:max-h-[600px] overflow-y-auto space-y-2 pr-2"
+        role="radiogroup"
+        aria-label="剧集选择"
+      >
         {episodes && episodes.length > 0 ? (
           episodes.map((episode, index) => (
             <button
               key={index}
+              ref={(el) => { buttonRefs.current[index] = el; }}
               onClick={() => onEpisodeClick(episode, index)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onEpisodeClick(episode, index);
+                }
+              }}
+              tabIndex={0}
+              role="radio"
+              aria-checked={currentEpisode === index}
+              aria-current={currentEpisode === index ? 'true' : undefined}
+              aria-label={`${episode.name || `第 ${index + 1} 集`}${currentEpisode === index ? '，当前播放' : ''}`}
               className={`
                 w-full px-3 py-2 sm:px-4 sm:py-3 rounded-[var(--radius-2xl)] text-left transition-[var(--transition-fluid)]
                 ${currentEpisode === index
                   ? 'bg-[var(--accent-color)] text-white shadow-[0_4px_12px_color-mix(in_srgb,var(--accent-color)_50%,transparent)] brightness-110'
                   : 'bg-[var(--glass-bg)] hover:bg-[var(--glass-hover)] text-[var(--text-color)] border border-[var(--glass-border)]'
                 }
+                focus-visible:ring-2 focus-visible:ring-[var(--accent-color)] focus-visible:ring-offset-2
               `}
             >
               <div className="flex items-center justify-between">
diff --git a/components/search/SearchHistoryDropdown.tsx b/components/search/SearchHistoryDropdown.tsx
index 968980d..aad07c9 100644
--- a/components/search/SearchHistoryDropdown.tsx
+++ b/components/search/SearchHistoryDropdown.tsx
@@ -5,9 +5,10 @@
 
 'use client';
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { useSearchHistoryStore } from '@/lib/store/search-history-store';
 import { Icons } from '@/components/ui/Icon';
+import { useKeyboardNavigation } from '@/lib/hooks/useKeyboardNavigation';
 
 interface SearchHistoryDropdownProps {
   isVisible: boolean;
@@ -24,6 +25,29 @@ export function SearchHistoryDropdown({
 }: SearchHistoryDropdownProps) {
   const { searchHistory, removeSearchHistory, clearSearchHistory } = useSearchHistoryStore();
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const itemRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+
+  // Keyboard navigation
+  useKeyboardNavigation({
+    enabled: isVisible,
+    containerRef: dropdownRef,
+    currentIndex: focusedIndex,
+    itemCount: searchHistory.length,
+    orientation: 'vertical',
+    onNavigate: useCallback((index: number) => {
+      setFocusedIndex(index);
+      itemRefs.current[index]?.focus();
+    }, []),
+    onSelect: useCallback((index: number) => {
+      if (searchHistory[index]) {
+        onSelect(searchHistory[index].query);
+      }
+    }, [searchHistory, onSelect]),
+    onEscape: useCallback(() => {
+      onClose();
+    }, [onClose]),
+  });
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -34,6 +58,8 @@ export function SearchHistoryDropdown({
 
     if (isVisible) {
       document.addEventListener('mousedown', handleClickOutside);
+      // Reset focus when dropdown opens
+      setFocusedIndex(-1);
     }
 
     return () => {
@@ -84,25 +110,36 @@ export function SearchHistoryDropdown({
       </div>
 
       <div className="max-h-[300px] overflow-y-auto space-y-1">
-        {searchHistory.map((item) => (
+        {searchHistory.map((item, index) => (
           <div
             key={item.timestamp}
             role="option"
-            aria-selected="false"
-            className="group flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-2xl)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] transition-all cursor-pointer"
+            aria-selected={focusedIndex === index}
+            className={`group flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-2xl)] hover:bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] transition-all cursor-pointer ${
+              focusedIndex === index ? 'bg-[color-mix(in_srgb,var(--accent-color)_15%,transparent)] ring-2 ring-[var(--accent-color)] ring-inset' : ''
+            }`}
           >
             <Icons.Clock 
               size={16} 
               className="text-[var(--text-color-secondary)] flex-shrink-0" 
             />
             <a
+              ref={(el) => { itemRefs.current[index] = el; }}
               href={`/?q=${encodeURIComponent(item.query)}`}
               onClick={(e) => {
                 e.preventDefault();
                 handleItemClick(item.query, e as any);
               }}
               onAuxClick={(e) => handleItemClick(item.query, e as any)}
-              className="flex-1 text-sm text-[var(--text-color)] hover:text-[var(--accent-color)] transition-colors truncate"
+              onFocus={() => setFocusedIndex(index)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onSelect(item.query);
+                }
+              }}
+              tabIndex={0}
+              className="flex-1 text-sm text-[var(--text-color)] hover:text-[var(--accent-color)] transition-colors truncate focus:outline-none"
               title={item.query}
             >
               {item.query}
diff --git a/components/search/TypeBadgeItem.tsx b/components/search/TypeBadgeItem.tsx
index e2b8da0..aa216dc 100644
--- a/components/search/TypeBadgeItem.tsx
+++ b/components/search/TypeBadgeItem.tsx
@@ -8,12 +8,34 @@ interface TypeBadgeItemProps {
   count: number;
   isSelected: boolean;
   onToggle: () => void;
+  isFocused?: boolean;
+  onFocus?: () => void;
+  innerRef?: (el: HTMLButtonElement | null) => void;
 }
 
-export function TypeBadgeItem({ type, count, isSelected, onToggle }: TypeBadgeItemProps) {
+export function TypeBadgeItem({ 
+  type, 
+  count, 
+  isSelected, 
+  onToggle, 
+  isFocused = false,
+  onFocus,
+  innerRef,
+}: TypeBadgeItemProps) {
   return (
     <button
+      ref={innerRef}
       onClick={onToggle}
+      onFocus={onFocus}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onToggle();
+        }
+      }}
+      tabIndex={0}
+      aria-pressed={isSelected}
+      aria-label={`${type} 类型，${count} 个视频${isSelected ? '，已选中' : ''}`}
       className={`
         inline-flex items-center gap-1.5 px-3 py-1.5 
         border border-[var(--glass-border)]
@@ -25,6 +47,10 @@ export function TypeBadgeItem({ type, count, isSelected, onToggle }: TypeBadgeIt
           ? 'bg-[var(--accent-color)] text-white border-[var(--accent-color)]' 
           : 'bg-[var(--glass-bg)] text-[var(--text-color)] backdrop-blur-[10px]'
         }
+        ${isFocused 
+          ? 'ring-2 ring-[var(--accent-color)] ring-offset-2' 
+          : ''
+        }
       `}
       style={{ borderRadius: 'var(--radius-full)' }}
     >
diff --git a/components/search/TypeBadgeList.tsx b/components/search/TypeBadgeList.tsx
index d3121a3..185e4a6 100644
--- a/components/search/TypeBadgeList.tsx
+++ b/components/search/TypeBadgeList.tsx
@@ -6,9 +6,10 @@
 
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { Icons } from '@/components/ui/Icon';
 import { TypeBadgeItem } from './TypeBadgeItem';
+import { useKeyboardNavigation } from '@/lib/hooks/useKeyboardNavigation';
 
 interface TypeBadge {
   type: string;
@@ -23,21 +24,54 @@ interface TypeBadgeListProps {
 
 export function TypeBadgeList({ badges, selectedTypes, onToggleType }: TypeBadgeListProps) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const badgeRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Keyboard navigation
+  useKeyboardNavigation({
+    enabled: true,
+    containerRef: containerRef,
+    currentIndex: focusedIndex,
+    itemCount: badges.length,
+    orientation: 'horizontal',
+    onNavigate: useCallback((index: number) => {
+      setFocusedIndex(index);
+      badgeRefs.current[index]?.focus();
+      // Scroll into view for mobile
+      badgeRefs.current[index]?.scrollIntoView({ 
+        behavior: 'smooth', 
+        block: 'nearest',
+        inline: 'center',
+      });
+    }, []),
+    onSelect: useCallback((index: number) => {
+      onToggleType(badges[index].type);
+    }, [badges, onToggleType]),
+  });
 
   return (
     <>
       {/* Desktop: Expandable Grid */}
-      <div className="hidden md:flex md:flex-col md:flex-1">
+      <div 
+        ref={containerRef}
+        className="hidden md:flex md:flex-col md:flex-1"
+        role="group"
+        aria-label="类型筛选"
+      >
         <div className={`flex items-center gap-2 flex-wrap transition-all duration-300 ${
           !isExpanded ? 'max-h-[2.5rem] overflow-hidden' : ''
         }`}>
-          {badges.map((badge) => (
+          {badges.map((badge, index) => (
             <TypeBadgeItem
               key={badge.type}
               type={badge.type}
               count={badge.count}
               isSelected={selectedTypes.has(badge.type)}
               onToggle={() => onToggleType(badge.type)}
+              isFocused={focusedIndex === index}
+              onFocus={() => setFocusedIndex(index)}
+              innerRef={(el) => { badgeRefs.current[index] = el; }}
             />
           ))}
         </div>
@@ -58,15 +92,25 @@ export function TypeBadgeList({ badges, selectedTypes, onToggleType }: TypeBadge
       </div>
 
       {/* Mobile & Tablet: Horizontal Scroll */}
-      <div className="flex md:hidden flex-1 overflow-hidden">
-        <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
-          {badges.map((badge) => (
+      <div 
+        className="flex md:hidden flex-1 overflow-hidden"
+        role="group"
+        aria-label="类型筛选"
+      >
+        <div 
+          ref={containerRef}
+          className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory"
+        >
+          {badges.map((badge, index) => (
             <TypeBadgeItem
               key={badge.type}
               type={badge.type}
               count={badge.count}
               isSelected={selectedTypes.has(badge.type)}
               onToggle={() => onToggleType(badge.type)}
+              isFocused={focusedIndex === index}
+              onFocus={() => setFocusedIndex(index)}
+              innerRef={(el) => { badgeRefs.current[index] = el; }}
             />
           ))}
         </div>
diff --git a/components/search/VideoGrid.tsx b/components/search/VideoGrid.tsx
index 9b1137a..6a14700 100644
--- a/components/search/VideoGrid.tsx
+++ b/components/search/VideoGrid.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import Link from 'next/link';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Icons } from '@/components/ui/Icon';
+import { useKeyboardNavigation } from '@/lib/hooks/useKeyboardNavigation';
 
 interface Video {
   vod_id: string;
@@ -25,6 +26,38 @@ interface VideoGridProps {
 
 export function VideoGrid({ videos, className = '' }: VideoGridProps) {
   const [activeCardId, setActiveCardId] = useState<string | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const videoRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+  
+  // Calculate columns for grid navigation
+  const getColumns = () => {
+    if (typeof window === 'undefined') return 7;
+    const width = window.innerWidth;
+    if (width >= 1536) return 7; // 2xl
+    if (width >= 1280) return 6; // xl
+    if (width >= 1024) return 5; // lg
+    if (width >= 768) return 4; // md
+    if (width >= 640) return 3; // sm
+    return 2; // default
+  };
+
+  // Keyboard navigation
+  useKeyboardNavigation({
+    enabled: true,
+    containerRef: gridRef,
+    currentIndex: focusedIndex,
+    itemCount: videos.length,
+    orientation: 'grid',
+    columns: getColumns(),
+    onNavigate: useCallback((index: number) => {
+      setFocusedIndex(index);
+      videoRefs.current[index]?.focus();
+    }, []),
+    onSelect: useCallback((index: number) => {
+      videoRefs.current[index]?.click();
+    }, []),
+  });
   
   if (videos.length === 0) {
     return null;
@@ -50,6 +83,7 @@ export function VideoGrid({ videos, className = '' }: VideoGridProps) {
 
   return (
     <div 
+      ref={gridRef}
       className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 md:gap-4 lg:gap-6 ${className}`}
       role="list"
       aria-label="视频搜索结果"
@@ -63,16 +97,29 @@ export function VideoGrid({ videos, className = '' }: VideoGridProps) {
         
         const cardId = `${video.vod_id}-${index}`;
         const isActive = activeCardId === cardId;
+        const isFocused = focusedIndex === index;
         
         return (
           <Link 
             key={cardId}
             href={videoUrl}
+            ref={(el) => { videoRefs.current[index] = el; }}
             onClick={(e) => handleCardClick(e, cardId, videoUrl)}
+            onFocus={() => setFocusedIndex(index)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleCardClick(e as any, cardId, videoUrl);
+              }
+            }}
             role="listitem"
+            tabIndex={0}
+            aria-label={`${video.vod_name}${video.vod_remarks ? ` - ${video.vod_remarks}` : ''}`}
           >
             <Card
-              className={`p-0 overflow-hidden group cursor-pointer flex flex-col h-full ${video.isNew ? 'animate-scale-in' : ''}`}
+              className={`p-0 overflow-hidden group cursor-pointer flex flex-col h-full ${video.isNew ? 'animate-scale-in' : ''} ${
+                isFocused ? 'ring-2 ring-[var(--accent-color)] ring-offset-2' : ''
+              }`}
             >
               {/* Poster */}
               <div className="relative aspect-[2/3] bg-[color-mix(in_srgb,var(--glass-bg)_50%,transparent)] overflow-hidden" style={{ borderRadius: 'var(--radius-2xl)' }}>
diff --git a/lib/hooks/useKeyboardNavigation.ts b/lib/hooks/useKeyboardNavigation.ts
new file mode 100644
index 0000000..a99e010
--- /dev/null
+++ b/lib/hooks/useKeyboardNavigation.ts
@@ -0,0 +1,119 @@
+/**
+ * useKeyboardNavigation Hook
+ * Provides arrow key navigation for lists and grids
+ */
+
+import { useEffect, useCallback, RefObject } from 'react';
+
+interface UseKeyboardNavigationOptions {
+  enabled: boolean;
+  containerRef: RefObject<HTMLElement | null>;
+  onNavigate?: (index: number) => void;
+  onSelect?: (index: number) => void;
+  onEscape?: () => void;
+  currentIndex?: number;
+  itemCount: number;
+  orientation?: 'horizontal' | 'vertical' | 'grid';
+  columns?: number; // For grid layouts
+}
+
+export function useKeyboardNavigation({
+  enabled,
+  containerRef,
+  onNavigate,
+  onSelect,
+  onEscape,
+  currentIndex = -1,
+  itemCount,
+  orientation = 'vertical',
+  columns = 1,
+}: UseKeyboardNavigationOptions) {
+  
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!enabled || itemCount === 0) return;
+
+    let newIndex = currentIndex;
+    let handled = false;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        if (orientation === 'vertical' || orientation === 'grid') {
+          event.preventDefault();
+          newIndex = orientation === 'grid' 
+            ? Math.min(currentIndex + columns, itemCount - 1)
+            : Math.min(currentIndex + 1, itemCount - 1);
+          handled = true;
+        }
+        break;
+
+      case 'ArrowUp':
+        if (orientation === 'vertical' || orientation === 'grid') {
+          event.preventDefault();
+          newIndex = orientation === 'grid'
+            ? Math.max(currentIndex - columns, 0)
+            : Math.max(currentIndex - 1, 0);
+          handled = true;
+        }
+        break;
+
+      case 'ArrowRight':
+        if (orientation === 'horizontal' || orientation === 'grid') {
+          event.preventDefault();
+          newIndex = Math.min(currentIndex + 1, itemCount - 1);
+          handled = true;
+        }
+        break;
+
+      case 'ArrowLeft':
+        if (orientation === 'horizontal' || orientation === 'grid') {
+          event.preventDefault();
+          newIndex = Math.max(currentIndex - 1, 0);
+          handled = true;
+        }
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        newIndex = 0;
+        handled = true;
+        break;
+
+      case 'End':
+        event.preventDefault();
+        newIndex = itemCount - 1;
+        handled = true;
+        break;
+
+      case 'Enter':
+      case ' ':
+        if (currentIndex >= 0 && onSelect) {
+          event.preventDefault();
+          onSelect(currentIndex);
+          handled = true;
+        }
+        break;
+
+      case 'Escape':
+        if (onEscape) {
+          event.preventDefault();
+          onEscape();
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled && newIndex !== currentIndex && onNavigate) {
+      onNavigate(newIndex);
+    }
+  }, [enabled, itemCount, currentIndex, orientation, columns, onNavigate, onSelect, onEscape]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+
+    container.addEventListener('keydown', handleKeyDown);
+    return () => {
+      container.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [containerRef, enabled, handleKeyDown]);
+}