fix(extension-manager): make popover trigger accessible

Author: gene9831

packages/components/src/extension-manager/components/ExtensionCardPopover.vue

@@ -125,9 +125,9 @@ const handleToggle = (event: ToggleEvent) => {
 
 <template>
   <component :is="renderAsChildTrigger()" v-if="asChild" />
-  <div v-else ref="triggerRef" class="tr-extension-card-popover__trigger" @click="toggle">
+  <button v-else ref="triggerRef" type="button" class="tr-extension-card-popover__trigger" @click="toggle">
     <slot name="trigger" :popover-id="popoverId" :open="open" />
-  </div>
+  </button>
   <div
     :id="popoverId"
     ref="popoverRef"
@@ -144,6 +144,12 @@ const handleToggle = (event: ToggleEvent) => {
 <style lang="less" scoped>
 .tr-extension-card-popover__trigger {
   display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
 }
 
 .tr-extension-card-popover__content {

packages/test/component/extension-manager/ExtensionCardPopover.fixture.vue

@@ -15,6 +15,17 @@ const CustomTrigger = defineComponent({
   <div>
     <button type="button" data-testid="outside-target">外部区域</button>
 
+    <section data-testid="default-trigger-section">
+      <ExtensionCardPopover>
+        <template #trigger>
+          <span>默认触发器</span>
+        </template>
+        <template #content>
+          <span>默认触发器内容</span>
+        </template>
+      </ExtensionCardPopover>
+    </section>
+
     <section data-testid="native-trigger-section">
       <ExtensionCardPopover as-child>
         <template #trigger="{ open }">

packages/test/component/extension-manager/ExtensionCardPopover.spec.ts

@@ -1,7 +1,18 @@
 import { expect, test } from '@playwright/experimental-ct-vue'
 import ExtensionCardPopoverFixture from './ExtensionCardPopover.fixture.vue'
 
-test.describe('ExtensionCardPopover asChild CT', () => {
+test.describe('ExtensionCardPopover CT', () => {
+  test('默认触发器可以通过键盘打开浮层', async ({ mount }) => {
+    const component = await mount(ExtensionCardPopoverFixture)
+    const trigger = component.getByRole('button', { name: '默认触发器' })
+
+    await trigger.focus()
+    await expect(trigger).toBeFocused()
+
+    await trigger.press('Enter')
+    await expect(component.getByText('默认触发器内容')).toBeVisible()
+  })
+
   test('原生元素作为唯一触发节点且能够打开浮层', async ({ mount }) => {
     const component = await mount(ExtensionCardPopoverFixture)
     const section = component.getByTestId('native-trigger-section')