Browse Source

add dialog titles and descriptions for screen readers

imwald
Silberengel 5 months ago
parent
commit
95c0a83324
  1. 6
      src/components/LoginDialog/index.tsx
  2. 6
      src/components/NpubQrCode/index.tsx
  3. 8
      src/components/PostEditor/index.tsx

6
src/components/LoginDialog/index.tsx

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Drawer, DrawerContent } from '@/components/ui/drawer'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import { Dispatch } from 'react'
@ -28,6 +28,10 @@ export default function LoginDialog({ @@ -28,6 +28,10 @@ export default function LoginDialog({
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="w-[520px] max-h-[90vh] py-8 overflow-auto">
<DialogHeader className="sr-only">
<DialogTitle>Account Manager</DialogTitle>
<DialogDescription>Manage your Nostr account and settings</DialogDescription>
</DialogHeader>
<AccountManager close={() => setOpen(false)} />
</DialogContent>
</Dialog>

6
src/components/NpubQrCode/index.tsx

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
import { QrCodeIcon } from 'lucide-react'
@ -50,6 +50,10 @@ export default function NpubQrCode({ pubkey }: { pubkey: string }) { @@ -50,6 +50,10 @@ export default function NpubQrCode({ pubkey }: { pubkey: string }) {
<Dialog>
<DialogTrigger>{trigger}</DialogTrigger>
<DialogContent className="w-80 p-0 m-0" onOpenAutoFocus={(e) => e.preventDefault()}>
<DialogHeader className="sr-only">
<DialogTitle>Profile QR Code</DialogTitle>
<DialogDescription>Share your Nostr profile with a QR code</DialogDescription>
</DialogHeader>
{content}
</DialogContent>
</Dialog>

8
src/components/PostEditor/index.tsx

@ -2,7 +2,8 @@ import { @@ -2,7 +2,8 @@ import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader
DialogHeader,
DialogTitle
} from '@/components/ui/dialog'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
@ -84,8 +85,9 @@ export default function PostEditor({ @@ -84,8 +85,9 @@ export default function PostEditor({
>
<ScrollArea className="px-4 h-full max-h-screen">
<div className="space-y-4 px-2 py-6">
<DialogHeader>
<DialogDescription className="hidden" />
<DialogHeader className="sr-only">
<DialogTitle>Post Editor</DialogTitle>
<DialogDescription>Create a new post or reply</DialogDescription>
</DialogHeader>
{content}
</div>

Loading…
Cancel
Save