add accessibility titles

src/components/AboutInfoDialog/index.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerTrigger } from '@/components/ui/drawer'
 import { CODY_PUBKEY, SILBERENGEL_PUBKEY } from '@/constants'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useState, useEffect } from 'react'
@@ -87,6 +87,10 @@ export default function AboutInfoDialog({ children }: { children: React.ReactNod
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{children}</DrawerTrigger>
         <DrawerContent>
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>About</DrawerTitle>
+            <DrawerDescription>Information about the application</DrawerDescription>
+          </DrawerHeader>
           <div className="p-4 space-y-4">{content}</div>
         </DrawerContent>
       </Drawer>

src/components/ClientSelect/index.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay, DrawerTrigger } from '@/components/ui/drawer'
 import { Separator } from '@/components/ui/separator'
 import { ExtendedKind } from '@/constants'
 import { getReplaceableEventIdentifier, getNoteBech32Id } from '@/lib/event'
@@ -176,7 +176,12 @@ export default function ClientSelect({
               setOpen(false)
             }}
           />
-          <DrawerContent hideOverlay>{content}</DrawerContent>
+          <DrawerContent hideOverlay>
+            <DrawerHeader className="sr-only">
+              <DrawerTitle>Client Selection</DrawerTitle>
+            </DrawerHeader>
+            {content}
+          </DrawerContent>
         </Drawer>
       </div>
     )

src/components/EmojiPickerDialog/index.tsx

@@ -1,4 +1,4 @@
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,6 +24,9 @@ export default function EmojiPickerDialog({
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{children}</DrawerTrigger>
         <DrawerContent>
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Emoji Picker</DrawerTitle>
+          </DrawerHeader>
           <EmojiPicker
             onEmojiClick={(emoji, e) => {
               e.stopPropagation()

src/components/KindFilter/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Drawer, DrawerContent, DrawerHeader, DrawerTrigger } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
 import { Label } from '@/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { ExtendedKind, SUPPORTED_KINDS } from '@/constants'
@@ -179,7 +179,9 @@ export default function KindFilter({
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerTrigger asChild></DrawerTrigger>
           <DrawerContent className="px-4">
-            <DrawerHeader />
+            <DrawerHeader className="sr-only">
+              <DrawerTitle>Filter</DrawerTitle>
+            </DrawerHeader>
             {content}
           </DrawerContent>
         </Drawer>

src/components/LoginDialog/index.tsx

@@ -1,5 +1,5 @@
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Drawer, DrawerContent } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@/components/ui/drawer'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Dispatch } from 'react'
 import AccountManager from '../AccountManager'
@@ -17,6 +17,10 @@ export default function LoginDialog({
     return (
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerContent className="max-h-[90vh]">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Account Manager</DrawerTitle>
+            <DrawerDescription>Manage your Nostr account and settings</DrawerDescription>
+          </DrawerHeader>
           <div className="flex flex-col p-4 gap-4 overflow-auto">
             <AccountManager close={() => setOpen(false)} />
           </div>

src/components/NoteOptions/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay } from '@/components/ui/drawer'
 import { ArrowLeft } from 'lucide-react'
 import { MenuAction, SubMenuAction } from './useMenuActions'
 
@@ -32,6 +32,9 @@ export function MobileMenu({
       <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
         <DrawerOverlay onClick={closeDrawer} />
         <DrawerContent hideOverlay className="max-h-[80vh]">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Options</DrawerTitle>
+          </DrawerHeader>
           <div className="overflow-y-auto overscroll-contain py-2" style={{ touchAction: 'pan-y' }}>
             {!showSubMenu ? (
               menuActions.map((action, index) => {

src/components/NoteStats/LikeButton.tsx

@@ -1,4 +1,4 @@
-import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay } from '@/components/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -164,6 +164,9 @@ export default function LikeButton({ event, hideCount = false }: { event: Event;
         <Drawer open={isEmojiReactionsOpen} onOpenChange={setIsEmojiReactionsOpen}>
           <DrawerOverlay onClick={() => setIsEmojiReactionsOpen(false)} />
           <DrawerContent hideOverlay>
+            <DrawerHeader className="sr-only">
+              <DrawerTitle>React</DrawerTitle>
+            </DrawerHeader>
             {(isDiscussion || isReplyToDiscussion) ? (
               <DiscussionEmojis
                 onEmojiClick={(emoji) => {

src/components/NoteStats/RepostButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay } from '@/components/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -101,6 +101,9 @@ export default function RepostButton({ event, hideCount = false }: { event: Even
         <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
           <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
           <DrawerContent hideOverlay>
+            <DrawerHeader className="sr-only">
+              <DrawerTitle>Repost</DrawerTitle>
+            </DrawerHeader>
             <div className="py-2">
               <Button
                 onClick={(e) => {

src/components/NoteStats/SeenOnButton.tsx

@@ -1,6 +1,6 @@
 import { useSecondaryPage } from '@/PageManager'
 import { Button } from '@/components/ui/button'
-import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay } from '@/components/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -54,6 +54,9 @@ export default function SeenOnButton({ event }: { event: Event }) {
         <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
           <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
           <DrawerContent hideOverlay>
+            <DrawerHeader className="sr-only">
+              <DrawerTitle>Seen on</DrawerTitle>
+            </DrawerHeader>
             <div className="py-2">
               {relays.map((relay) => (
                 <Button

src/components/PostEditor/index.tsx

@@ -10,7 +10,8 @@ import {
   Sheet,
   SheetContent,
   SheetDescription,
-  SheetHeader
+  SheetHeader,
+  SheetTitle
 } from '@/components/ui/sheet'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import postEditor from '@/services/post-editor.service'
@@ -60,8 +61,9 @@ export default function PostEditor({
         >
           <ScrollArea className="px-4 h-full max-h-screen" scrollBarClassName="opacity-100">
             <div className="space-y-4 px-2 py-6">
-              <SheetHeader>
-                <SheetDescription className="hidden" />
+              <SheetHeader className="sr-only">
+                <SheetTitle>Post Editor</SheetTitle>
+                <SheetDescription>Create a new post or reply</SheetDescription>
               </SheetHeader>
               {content}
             </div>