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>
This commit is contained in:
shakespeare.diy 2026-07-24 17:41:25 +07:00
parent 18f32a14bf
commit e76076c1d9
3 changed files with 5 additions and 2 deletions

View file

@ -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 && (

View file

@ -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>

View file

@ -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)}