From 22e3760b7fd971d050855cf6b0381af61daf0072 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Sun, 5 Jan 2025 23:32:22 +0800
Subject: [PATCH] refactor: add DrawerDescription to ImageGenDrawer and
 ImageUploadDrawer for improved accessibility

---
 src/components/ImageGenDrawer.tsx    | 4 ++++
 src/components/ImageUploadDrawer.tsx | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageGenDrawer.tsx b/src/components/ImageGenDrawer.tsx
index 0677071..c03f2f5 100644
--- a/src/components/ImageGenDrawer.tsx
+++ b/src/components/ImageGenDrawer.tsx
@@ -5,6 +5,7 @@ import { Tr } from "@/translate";
 import {
   Drawer,
   DrawerContent,
+  DrawerDescription,
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
@@ -55,6 +56,9 @@ export function ImageGenDrawer({ disableFactor }: Props) {
               <span className="sr-only">Generate Image</span>
             </Button>
           </DrawerTrigger>
+          <DrawerDescription className="sr-only">
+            Generate images using the DALL-E model.
+          </DrawerDescription>
           <DrawerContent>
             <div className="mx-auto w-full max-w-lg">
               <DrawerHeader>
diff --git a/src/components/ImageUploadDrawer.tsx b/src/components/ImageUploadDrawer.tsx
index 494e29d..9c6ed7d 100644
--- a/src/components/ImageUploadDrawer.tsx
+++ b/src/components/ImageUploadDrawer.tsx
@@ -5,6 +5,7 @@ import { Tr } from "@/translate";
 import {
   Drawer,
   DrawerContent,
+  DrawerDescription,
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
@@ -29,7 +30,7 @@ export function ImageUploadDrawer({ setImages, images, disableFactor }: Props) {
   useState("b64_json");
   return (
     <Drawer open={showAddImage} onOpenChange={setShowAddImage}>
-      <DrawerTrigger>
+      <DrawerTrigger asChild>
         <Button
           variant="ghost"
           size="icon"
@@ -40,6 +41,9 @@ export function ImageUploadDrawer({ setImages, images, disableFactor }: Props) {
           <span className="sr-only">Add Image</span>
         </Button>
       </DrawerTrigger>
+      <DrawerDescription className="sr-only">
+        Add images to the chat.
+      </DrawerDescription>
       <DrawerContent>
         <div className="mx-auto w-full max-w-lg">
           <DrawerHeader>