From dde4373615b8ab7268008ea357f9ed1bafcc239e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=83=9C?= <2318857637@qq.com>
Date: Tue, 28 Jul 2026 11:52:46 +0800
Subject: [PATCH] fix(ui): use accessible close buttons

---
 packages/ui/src/components/Dialog.vue | 12 +++++++++---
 packages/ui/src/components/Drawer.vue | 10 +++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Dialog.vue b/packages/ui/src/components/Dialog.vue
index 7ceba7f7c..08610bbb8 100644
--- a/packages/ui/src/components/Dialog.vue
+++ b/packages/ui/src/components/Dialog.vue
@@ -77,9 +77,15 @@ onMounted(() => isMount.value = true)
                 {{ props.title }}
               </slot>
             </div>
-            <div v-if="closable" class="h6 w6 $ui-fcc cursor-pointer rounded-full transition-colors hover:bg-primary-100 dark:hover:bg-gray-700" @click="close">
-              <div class="i-carbon-close" />
-            </div>
+            <button
+              v-if="closable"
+              type="button"
+              aria-label="Close dialog"
+              class="h6 w6 $ui-fcc cursor-pointer rounded-full border-none bg-transparent p0 transition-colors hover:bg-primary-100 dark:hover:bg-gray-700"
+              @click="close"
+            >
+              <div class="i-carbon-close" aria-hidden="true" />
+            </button>
           </div>
           <div class="content transition-all transition-duration-300">
             <slot />
diff --git a/packages/ui/src/components/Drawer.vue b/packages/ui/src/components/Drawer.vue
index 40e235f0f..31d52f844 100644
--- a/packages/ui/src/components/Drawer.vue
+++ b/packages/ui/src/components/Drawer.vue
@@ -88,7 +88,15 @@ onMounted(() => isMount.value = true)
           class="drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"
           @click.stop
         >
-          <div v-if="closable" class="i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text" @click="show = false" />
+          <button
+            v-if="closable"
+            type="button"
+            aria-label="Close drawer"
+            class="absolute right-1.5 top-1.5 $ui-z-max cursor-pointer border-none bg-transparent p1 text-lg $ui-text"
+            @click="show = false"
+          >
+            <div class="i-carbon-close" aria-hidden="true" />
+          </button>
           <slot />
         </div>
       </Overlay>