From e76076c1d9d45bf8bc0d4d8dc02592854818b0c8 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Fri, 24 Jul 2026 17:41:25 +0700
Subject: [PATCH] Fix missing DialogTitle/SheetTitle accessibility warnings

Add visually-hidden (sr-only) titles to the three rendered dialogs/sheets
that were missing them:
- OnboardingPage relay-setup dialog (RelayEducation)
- Layout mobile navigation sheet
- MapPage spot detail bottom sheet

These satisfy Radix's accessibility requirement (screen readers announce
the dialog purpose) without altering the visual design.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/Layout.tsx    | 3 ++-
 src/pages/MapPage.tsx        | 1 +
 src/pages/OnboardingPage.tsx | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 78c0421..90bd6f1 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -3,7 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -576,6 +576,7 @@ export function Layout({ children, noPadding }: LayoutProps) {
                 </Button>
               </SheetTrigger>
               <SheetContent side="right" className="w-80 overflow-y-auto">
+                <SheetTitle className="sr-only">Menu</SheetTitle>
                 <div className="flex flex-col gap-6 mt-6 pb-8">
                   {/* Wallet Card - Mobile Menu */}
                   {user && (
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 0978ca7..06db5e1 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -1807,6 +1807,7 @@ export default function MapPage() {
           side="bottom"
           className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
         >
+          <SheetTitle className="sr-only">{selectedSpot?.title ?? 'Spot details'}</SheetTitle>
           {selectedSpot && <SpotBottomSheet spot={selectedSpot} onClose={() => setSelectedSpot(null)} />}
         </SheetContent>
       </Sheet>
diff --git a/src/pages/OnboardingPage.tsx b/src/pages/OnboardingPage.tsx
index 9fb31a2..b6eef69 100644
--- a/src/pages/OnboardingPage.tsx
+++ b/src/pages/OnboardingPage.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useCashu } from '@/hooks/wallet/useCashu';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
@@ -458,6 +458,7 @@ export default function OnboardingPage() {
       {/* Relay Education Dialog */}
       <Dialog open={showRelayEducation} onOpenChange={setShowRelayEducation}>
         <DialogContent className="w-[calc(100%-1rem)] sm:max-w-lg p-0 bg-transparent border-none">
+          <DialogTitle className="sr-only">Relay setup</DialogTitle>
           <RelayEducation
             onComplete={handleRelayEducationComplete}
             onSkip={() => setShowRelayEducation(false)}