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 { cn } from '@/lib/utils';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
|
|
@ -576,6 +576,7 @@ export function Layout({ children, noPadding }: LayoutProps) {
|
||||||
</Button>
|
</Button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
<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">
|
<div className="flex flex-col gap-6 mt-6 pb-8">
|
||||||
{/* Wallet Card - Mobile Menu */}
|
{/* Wallet Card - Mobile Menu */}
|
||||||
{user && (
|
{user && (
|
||||||
|
|
|
||||||
|
|
@ -1807,6 +1807,7 @@ export default function MapPage() {
|
||||||
side="bottom"
|
side="bottom"
|
||||||
className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
|
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)} />}
|
{selectedSpot && <SpotBottomSheet spot={selectedSpot} onClose={() => setSelectedSpot(null)} />}
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
|
||||||
import { Layout } from '@/components/Layout';
|
import { Layout } from '@/components/Layout';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
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 { useCurrentUser } from '@/hooks/useCurrentUser';
|
||||||
import { useCashu } from '@/hooks/wallet/useCashu';
|
import { useCashu } from '@/hooks/wallet/useCashu';
|
||||||
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||||
|
|
@ -458,6 +458,7 @@ export default function OnboardingPage() {
|
||||||
{/* Relay Education Dialog */}
|
{/* Relay Education Dialog */}
|
||||||
<Dialog open={showRelayEducation} onOpenChange={setShowRelayEducation}>
|
<Dialog open={showRelayEducation} onOpenChange={setShowRelayEducation}>
|
||||||
<DialogContent className="w-[calc(100%-1rem)] sm:max-w-lg p-0 bg-transparent border-none">
|
<DialogContent className="w-[calc(100%-1rem)] sm:max-w-lg p-0 bg-transparent border-none">
|
||||||
|
<DialogTitle className="sr-only">Relay setup</DialogTitle>
|
||||||
<RelayEducation
|
<RelayEducation
|
||||||
onComplete={handleRelayEducationComplete}
|
onComplete={handleRelayEducationComplete}
|
||||||
onSkip={() => setShowRelayEducation(false)}
|
onSkip={() => setShowRelayEducation(false)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue