From 4e7f9b908b3cd7912ee83ab6337f43e15ce8cf67 Mon Sep 17 00:00:00 2001
From: init-qy <59350883+init-qy@users.noreply.github.com>
Date: Sat, 22 Jul 2023 08:52:57 +0800
Subject: [PATCH] fix(components): [autocomplete] improve a11y (#12647)

* fix(components): [autocomplete] improve a11y

* fix(components): add a11y tests

* fix: lint
---
 .../__tests__/autocomplete.test.tsx            | 18 ++++++++++++++++++
 .../autocomplete/src/autocomplete.vue          |  1 +
 2 files changed, 19 insertions(+)

diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index a12fa66505..e2cb8f8259 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -440,4 +440,22 @@ describe('Autocomplete.vue', () => {
     await nextTick()
     expect(onBlur).toHaveBeenCalledTimes(1)
   })
+
+  describe('test a11y supports', () => {
+    test('test a11y attributes', async () => {
+      const wrapper = _mount()
+      await nextTick()
+
+      const container = wrapper.find('.el-autocomplete')
+      expect(container.attributes('role')).toBe('combobox')
+      expect(container.attributes('aria-haspopup')).toBe('listbox')
+      expect(container.attributes('aria-expanded')).toBe('false')
+
+      await wrapper.find('input').trigger('focus')
+      vi.runAllTimers()
+      await nextTick()
+
+      expect(container.attributes('aria-expanded')).toBe('true')
+    })
+  })
 })
diff --git a/packages/components/autocomplete/src/autocomplete.vue b/packages/components/autocomplete/src/autocomplete.vue
index 74735b8192..defb42ef47 100644
--- a/packages/components/autocomplete/src/autocomplete.vue
+++ b/packages/components/autocomplete/src/autocomplete.vue
@@ -13,6 +13,7 @@
     trigger="click"
     :transition="`${ns.namespace.value}-zoom-in-top`"
     persistent
+    role="listbox"
     @before-show="onSuggestionShow"
     @hide="onHide"
   >