From a7df985497c14c28e13c7ff9bf6aaa198e8a2ad2 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 21 Feb 2026 08:47:34 +0000 Subject: [PATCH] feat: enhance navigation and call overlay accessibility - Added `aria-label` to navigation links in `MobileNav` and `DashboardNav` to support screen readers. - Added `aria-label` and `title` attributes to all buttons in `CallOverlay` for better accessibility and user experience. - Ensures all icon-only buttons have accessible names. Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com> --- dev_server.log | 17 ++++++++++ src/components/dashboard-nav.tsx | 1 + src/components/dashboard/call-overlay.tsx | 38 +++++++++++++++++++---- src/components/mobile-nav.tsx | 1 + 4 files changed, 51 insertions(+), 6 deletions(-) create mode 100644 dev_server.log diff --git a/dev_server.log b/dev_server.log new file mode 100644 index 0000000..2fdb1b6 --- /dev/null +++ b/dev_server.log @@ -0,0 +1,17 @@ + +> prototype@0.1.0 dev +> next dev --turbo + +▲ Next.js 16.1.6 (Turbopack) +- Local: http://localhost:3000 +- Network: http://192.168.0.2:3000 +- Environments: .env.local + +✓ Starting... +⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy +✓ Ready in 1250ms +○ Compiling /login ... + GET /login 200 in 6.7s (compile: 6.1s, proxy.ts: 7ms, render: 603ms) + GET /features/test-nav 200 in 1919ms (compile: 1577ms, proxy.ts: 39ms, render: 303ms) + GET /features/test-nav 200 in 100ms (compile: 7ms, proxy.ts: 8ms, render: 85ms) +[?25h diff --git a/src/components/dashboard-nav.tsx b/src/components/dashboard-nav.tsx index 6c4c4b3..6783984 100644 --- a/src/components/dashboard-nav.tsx +++ b/src/components/dashboard-nav.tsx @@ -49,6 +49,7 @@ export function DashboardNav() { variant="ghost" size="sm" asChild + aria-label={item.label} className={cn( "relative transition-all duration-300", isActive diff --git a/src/components/dashboard/call-overlay.tsx b/src/components/dashboard/call-overlay.tsx index b70663e..5d7ac06 100644 --- a/src/components/dashboard/call-overlay.tsx +++ b/src/components/dashboard/call-overlay.tsx @@ -755,11 +755,25 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini {/* Right: Controls */}
- {type === "video" && ( - )} @@ -768,6 +782,7 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini size="icon" className="h-9 w-9 hover:bg-white/10 rounded-full" onClick={() => onMinimize && onMinimize(false)} + aria-label="Expand Call" title="Expand" > @@ -777,6 +792,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini size="icon" className="h-9 w-9 rounded-full bg-red-500 hover:bg-red-600 border border-red-400/20" onClick={handleEndCall} + aria-label="End Call" + title="End Call" > @@ -853,6 +870,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini if (onMinimize) onMinimize(true); else setInternalIsMinimized(true); }} + aria-label="Minimize Call" + title="Minimize" > @@ -868,6 +887,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini showStats ? "bg-white text-black hover:bg-white/90" : "bg-black/40 text-white hover:bg-white/10" )} onClick={() => setShowStats(!showStats)} + aria-label="Show Network Stats" + title="Network Stats" > @@ -997,7 +1018,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini : "bg-white/5 hover:bg-white/20" )} onClick={toggleMute} - title="Toggle Mute" + aria-label={isMuted ? "Unmute" : "Mute"} + title={isMuted ? "Unmute" : "Mute"} > {isMuted ? ( @@ -1018,7 +1040,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini : "bg-white/5 hover:bg-white/20" )} onClick={toggleVideo} - title="Toggle Camera" + aria-label={isVideoOff ? "Turn Camera On" : "Turn Camera Off"} + title={isVideoOff ? "Turn Camera On" : "Turn Camera Off"} > {isVideoOff ? ( @@ -1037,7 +1060,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini : "bg-white/5 hover:bg-white/20" )} onClick={toggleScreenShare} - title="Share Screen" + aria-label={isScreenSharing ? "Stop Screen Share" : "Share Screen"} + title={isScreenSharing ? "Stop Screen Share" : "Share Screen"} > {isScreenSharing ? ( @@ -1059,7 +1083,8 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini : "bg-white/5 hover:bg-white/20" )} onClick={toggleANC} - title="Active Noise Cancellation" + aria-label={isANCEnabled ? "Disable Noise Cancellation" : "Enable Noise Cancellation"} + title={isANCEnabled ? "Disable Noise Cancellation" : "Enable Noise Cancellation"} > @@ -1069,6 +1094,7 @@ export function CallOverlay({ friend, type, currentUser, isMinimized: propIsMini size="icon" className="h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 shrink-0 rounded-full bg-rose-500 text-white hover:bg-rose-600 shadow-[0_4px_20px_rgba(244,63,94,0.4)] hover:scale-105 transition-all" onClick={handleEndCall} + aria-label="End Call" title="End Call" > diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx index 3640418..adbd331 100644 --- a/src/components/mobile-nav.tsx +++ b/src/components/mobile-nav.tsx @@ -56,6 +56,7 @@ export function MobileNav() { {/* Active Background Pill */}