diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index ea8a801a..b8a7bcf0 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -192,18 +192,34 @@ function Carousel() { ) const touchStartRef = useRef(0) + const regionRef = useRef(null) const go = useCallback((delta: number) => { setCurrent((prev) => Math.max(0, Math.min(features.length - 1, prev + delta)), ) + regionRef.current?.focus() }, []) return (
{/* Phone track with overlay arrows */}
{ + if (e.key === 'ArrowLeft') { + e.preventDefault() + go(-1) + } else if (e.key === 'ArrowRight') { + e.preventDefault() + go(1) + } + }} onTouchStart={(e) => { touchStartRef.current = e.touches[0]!.clientX }} @@ -222,6 +238,9 @@ function Carousel() { return ( setHovered(i) : undefined} - onMouseLeave={offset !== 0 ? () => setHovered(null) : undefined} - onClick={offset !== 0 ? () => go(offset) : undefined} + {...(Math.abs(offset) === 1 + ? { + role: 'button', + tabIndex: 0, + 'aria-label': `Go to ${feature.title}`, + onMouseEnter: () => setHovered(i), + onMouseLeave: () => setHovered(null), + onClick: () => go(offset), + onKeyDown: (e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + go(offset) + } + }, + } + : undefined)} > {/* Description */} -
+ + {features[current]?.title}: {features[current]?.description} + +
{' '} emotes -

- A fast, open-source Twitch client for iOS and Android with native - 7TV, BTTV, and FFZ support. +

+ Frosty is a fast, open-source Twitch client for iOS and Android + with native 7TV, BTTV, and FFZ support.

diff --git a/web/src/components/Providers.tsx b/web/src/components/Providers.tsx index 03073df8..8f9612c6 100644 --- a/web/src/components/Providers.tsx +++ b/web/src/components/Providers.tsx @@ -1,6 +1,7 @@ 'use client' import { Toaster } from '@/components/ui/sonner' +import { MotionConfig } from 'motion/react' import { ThemeProvider } from 'next-themes' import { useEffect } from 'react' @@ -18,9 +19,11 @@ export function Providers({ children }: ProvidersProps) { }, []) return ( - - {children} - - + + + {children} + + + ) }