From 309ce3c92e673622e813b2dccb34bab9af9a3376 Mon Sep 17 00:00:00 2001
From: InfinityPacer <160988576+InfinityPacer@users.noreply.github.com>
Date: Mon, 10 Aug 2026 06:53:56 +0800
Subject: [PATCH] fix(a11y): label dialog close buttons (#654)

---
 src/@core/components/DialogCloseBtn.vue       | 10 +++--
 .../__tests__/DialogCloseBtn.spec.ts          | 40 +++++++++++++++++++
 .../dialog/__tests__/SiteImportDialog.spec.ts |  4 +-
 3 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 src/@core/components/__tests__/DialogCloseBtn.spec.ts

diff --git a/src/@core/components/DialogCloseBtn.vue b/src/@core/components/DialogCloseBtn.vue
index 909ff6bb..2acda52c 100644
--- a/src/@core/components/DialogCloseBtn.vue
+++ b/src/@core/components/DialogCloseBtn.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-// 定义输入参数
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const props = defineProps({
-  // 是否显示
+  /** 覆盖关闭按钮默认的右上角定位 class。 */
   innerClass: String,
 })
-// 定义触发的自定义事件
 const emit = defineEmits(['click', 'update:modelValue'])
-// 按钮点击
+
 function onClick() {
   emit('update:modelValue', false)
   emit('click')
@@ -15,6 +16,7 @@ function onClick() {
 
 <template>
   <IconBtn
+    :aria-label="t('common.close')"
     :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3 z-10'"
     @click.stop="onClick"
   >
diff --git a/src/@core/components/__tests__/DialogCloseBtn.spec.ts b/src/@core/components/__tests__/DialogCloseBtn.spec.ts
new file mode 100644
index 00000000..e8ba2e58
--- /dev/null
+++ b/src/@core/components/__tests__/DialogCloseBtn.spec.ts
@@ -0,0 +1,40 @@
+import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
+import i18n from '@/plugins/i18n'
+import { screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { renderWithProviders } from '@tests/support/render'
+import { afterEach, describe, expect, it } from 'vitest'
+
+afterEach(() => {
+  i18n.global.locale.value = 'zh-CN'
+})
+
+describe('DialogCloseBtn', () => {
+  it('keeps its visual and event contracts while exposing a localized name', async () => {
+    const user = userEvent.setup()
+    const { container, emitted, rerender } = await renderWithProviders(DialogCloseBtn)
+    const button = screen.getByRole('button', { name: '关闭' })
+
+    expect(button).toHaveClass('absolute', 'right-3', 'top-3', 'z-10')
+    const icon = container.querySelector('svg.v-icon')
+    expect(icon).not.toBeNull()
+    expect(icon).toHaveAttribute('aria-hidden', 'true')
+    await waitFor(() =>
+      expect(icon?.querySelector('path')).toHaveAttribute(
+        'd',
+        'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z',
+      ),
+    )
+
+    i18n.global.locale.value = 'en-US'
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Close' })).toBe(button))
+
+    await user.click(button)
+    expect(emitted()['update:modelValue']).toEqual([[false]])
+    expect(emitted().click).toEqual([[]])
+
+    await rerender({ innerClass: 'dialog-close-custom' })
+    expect(button).toHaveClass('dialog-close-custom')
+    expect(button).not.toHaveClass('absolute', 'right-3', 'top-3', 'z-10')
+  })
+})
diff --git a/src/components/dialog/__tests__/SiteImportDialog.spec.ts b/src/components/dialog/__tests__/SiteImportDialog.spec.ts
index 525a4b25..c5fd0165 100644
--- a/src/components/dialog/__tests__/SiteImportDialog.spec.ts
+++ b/src/components/dialog/__tests__/SiteImportDialog.spec.ts
@@ -220,7 +220,9 @@ describe('SiteImportDialog', () => {
     await fireEvent.click(await screen.findByRole('button', { name: '开始导入' }))
     expect(await screen.findByText('导入过程中出现 1 个错误')).toBeInTheDocument()
 
-    await fireEvent.click(screen.getByRole('button', { name: '关闭' }))
+    const resultCloseButton = screen.getByText('关闭').closest('button')
+    expect(resultCloseButton).not.toBeNull()
+    await fireEvent.click(resultCloseButton!)
     expect(events.update).toHaveBeenCalledWith(false)
     expect(events.importSuccess).not.toHaveBeenCalled()
   })