diff --git a/components/search/SourceBadgeItem.tsx b/components/search/SourceBadgeItem.tsx index 4eb4bb7..9c9339d 100644 --- a/components/search/SourceBadgeItem.tsx +++ b/components/search/SourceBadgeItem.tsx @@ -41,6 +41,7 @@ export function SourceBadgeItem({ } }} tabIndex={0} + data-focusable aria-pressed={isSelected} aria-label={`${name} 视频源,${count} 个视频${isSelected ? ',已选中' : ''}`} className={` diff --git a/components/search/TypeBadgeItem.tsx b/components/search/TypeBadgeItem.tsx index 64877ae..7f0ed2b 100644 --- a/components/search/TypeBadgeItem.tsx +++ b/components/search/TypeBadgeItem.tsx @@ -39,6 +39,7 @@ export function TypeBadgeItem({ } }} tabIndex={0} + data-focusable aria-pressed={isSelected} aria-label={`${type} 类型,${count} 个视频${isSelected ? ',已选中' : ''}`} className={` diff --git a/components/search/VideoCard.tsx b/components/search/VideoCard.tsx index 4d79a20..3de0141 100644 --- a/components/search/VideoCard.tsx +++ b/components/search/VideoCard.tsx @@ -48,6 +48,7 @@ export const VideoCard = memo(({ role="listitem" aria-label={`${video.vod_name}${video.vod_remarks ? ` - ${video.vod_remarks}` : ''}`} prefetch={false} + data-focusable className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out block h-full" > (({ )} - {/* Fallback Icon */} -
- + {/* Fallback Icon - visible when image fails */} +
+ + {video.vod_name}
{/* Badge Container */} diff --git a/components/search/VideoGroupCard.tsx b/components/search/VideoGroupCard.tsx index 32b57ee..7110c24 100644 --- a/components/search/VideoGroupCard.tsx +++ b/components/search/VideoGroupCard.tsx @@ -89,6 +89,7 @@ export const VideoGroupCard = memo(({ role="listitem" aria-label={`${name} - ${videos.length} 个源${representative.vod_remarks ? ` - ${representative.vod_remarks}` : ''}`} prefetch={false} + data-focusable className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out block h-full" > (({
)} - {/* Fallback Icon */} -
- + {/* Fallback Icon - visible when image fails */} +
+ + {name}
{/* Badge Container */} diff --git a/lib/hooks/useSpatialNavigation.ts b/lib/hooks/useSpatialNavigation.ts index 5e90b77..5390d9f 100644 --- a/lib/hooks/useSpatialNavigation.ts +++ b/lib/hooks/useSpatialNavigation.ts @@ -80,16 +80,6 @@ export function useSpatialNavigation(enabled: boolean) { const handleKeyDown = useCallback((e: KeyboardEvent) => { if (!enabled) return; - // Skip if target is input/textarea - const target = e.target as HTMLElement; - if ( - target.tagName === 'INPUT' || - target.tagName === 'TEXTAREA' || - target.isContentEditable - ) { - return; - } - const directionMap: Record = { ArrowUp: 'up', ArrowDown: 'down', @@ -99,6 +89,24 @@ export function useSpatialNavigation(enabled: boolean) { const direction = directionMap[e.key]; + // For input/textarea: allow Left/Right for cursor movement, + // but let Up/Down navigate spatially so the user can escape the input on TV. + // Skip if the event was already handled (e.g., by search history dropdown). + const target = e.target as HTMLElement; + const isInput = target.tagName === 'INPUT' || + target.tagName === 'TEXTAREA' || + target.isContentEditable; + + if (isInput) { + if (!direction || direction === 'left' || direction === 'right') { + return; + } + // If a React handler already called preventDefault (e.g., dropdown navigation), skip + if (e.defaultPrevented) { + return; + } + } + if (direction) { // Check if the focused element is inside a [data-no-spatial] container const focused = document.activeElement as HTMLElement | null; diff --git a/package-lock.json b/package-lock.json index c955001..bc35eb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "kvideo", - "version": "4.3.4", + "version": "4.3.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "kvideo", - "version": "4.3.4", + "version": "4.3.5", "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/sortable": "^10.0.0", diff --git a/package.json b/package.json index 9a30347..42ebc44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kvideo", - "version": "4.3.4", + "version": "4.3.5", "private": true, "scripts": { "dev": "next dev",