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:
parent
18f32a14bf
commit
e76076c1d9
3 changed files with 5 additions and 2 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue