feat: update ExtensionCard and ExtensionCardActions to use role="switch" for better accessibility

Author: gene9831

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

@@ -131,7 +131,15 @@ const handleNameKeydown = (event: KeyboardEvent) => {
       />
     </div>
 
-    <div v-if="normalizedProgress !== undefined" class="tr-extension-card__progress">
+    <div
+      v-if="normalizedProgress !== undefined"
+      class="tr-extension-card__progress"
+      role="progressbar"
+      :aria-label="name"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :aria-valuenow="normalizedProgress === 'indeterminate' ? undefined : normalizedProgress"
+    >
       <span
         class="tr-extension-card__progress-bar"
         :class="{ 'is-indeterminate': normalizedProgress === 'indeterminate' }"

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

@@ -25,10 +25,15 @@ const emit = defineEmits<{
 const handleSwitch = (action: Extract<ExtensionCardRenderableAction, { type: 'switch' }>, event: Event) => {
   if (action.disabled) return
 
+  const input = event.currentTarget as HTMLInputElement
+  const checked = input.checked
+
+  input.checked = Boolean(action.checked)
+
   emit('action', {
     id: action.id,
     type: action.type,
-    checked: (event.target as HTMLInputElement).checked,
+    checked,
   })
 }
 
@@ -57,6 +62,7 @@ const handleCustom = (action: Extract<ExtensionCardRenderableAction, { type: 'cu
       >
         <input
           type="checkbox"
+          role="switch"
           :checked="action.checked"
           :disabled="action.disabled"
           :aria-label="action.label"
@@ -140,14 +146,14 @@ const handleCustom = (action: Extract<ExtensionCardRenderableAction, { type: 'cu
 }
 
 .tr-extension-card-primary-actions__switch input:checked + .tr-extension-card-primary-actions__switch-track::after {
-  transform: translateX(16px);
+  transform: translateX(18px);
 }
 
 .tr-extension-card-primary-actions__switch-track {
   position: relative;
   display: block;
-  width: 36px;
-  height: 20px;
+  width: 40px;
+  height: 22px;
   border-radius: 999px;
   background: var(--tr-extension-card-switch-bg-color);
   transition: background 0.2s ease;
@@ -157,8 +163,8 @@ const handleCustom = (action: Extract<ExtensionCardRenderableAction, { type: 'cu
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
@@ -172,14 +178,13 @@ const handleCustom = (action: Extract<ExtensionCardRenderableAction, { type: 'cu
   justify-content: center;
   gap: 6px;
   min-width: 64px;
-  padding: 4px 8px;
+  padding: 4px 12px;
   border: 0;
   border-radius: 999px;
   background: var(--tr-extension-card-bg-color-hover);
   color: var(--tr-text-primary);
   cursor: pointer;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 14px;
   transition: background-color 0.2s ease;
 }
 

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

@@ -29,7 +29,7 @@ test.describe('standalone ExtensionCard', () => {
     const overflowRegion = card.locator('.tr-extension-card__more-action')
     const overflowMenu = overflowRegion.locator('.tr-extension-card__more-menu')
 
-    await expect(primaryRegion.getByRole('checkbox', { name: '启用扩展' })).toBeVisible()
+    await expect(primaryRegion.getByRole('switch', { name: '启用扩展' })).toBeVisible()
     await expect(primaryRegion.getByRole('button', { name: '禁用操作' })).toBeDisabled()
     await expect(primaryRegion.getByRole('button', { name: '隐藏操作' })).toHaveCount(0)
     await expect(primaryRegion.getByRole('button', { name: '安装' })).toHaveCount(0)
@@ -38,14 +38,14 @@ test.describe('standalone ExtensionCard', () => {
     await expect(overflowMenu).toBeHidden()
 
     await overflowRegion.getByRole('button', { name: '扩展操作' }).click()
-    await expect(primaryRegion.getByRole('checkbox', { name: '启用扩展' })).toBeVisible()
+    await expect(primaryRegion.getByRole('switch', { name: '启用扩展' })).toBeVisible()
     await expect(primaryRegion.getByRole('button', { name: '禁用操作' })).toBeDisabled()
     await expect(primaryRegion.getByRole('button', { name: '安装' })).toHaveCount(0)
     await expect(primaryRegion.getByRole('button', { name: '检查' })).toHaveCount(0)
     await expect(overflowMenu).toBeVisible()
     await expect(overflowMenu.getByRole('button', { name: '安装' })).toBeVisible()
     await expect(overflowMenu.getByRole('button', { name: '检查' })).toBeVisible()
-    await expect(overflowMenu.getByRole('checkbox', { name: '启用扩展' })).toHaveCount(0)
+    await expect(overflowMenu.getByRole('switch', { name: '启用扩展' })).toHaveCount(0)
     await expect(overflowMenu.getByRole('button', { name: '禁用操作' })).toHaveCount(0)
     await expect(overflowMenu.getByRole('button', { name: '隐藏操作' })).toHaveCount(0)
   })

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

@@ -13,6 +13,7 @@ const actions = ref<ExtensionCardAction[]>([
   { id: 'delete-extension', type: 'button', label: '删除' },
 ])
 const lastEvent = ref<ExtensionCardActionEvent>()
+const commitSwitchChanges = ref(true)
 
 const eventChecked = computed(() => {
   return typeof lastEvent.value?.checked === 'boolean' ? String(lastEvent.value.checked) : ''
@@ -22,7 +23,7 @@ const eventPayload = computed(() => JSON.stringify(lastEvent.value?.payload ?? n
 
 const handleAction = (event: ExtensionCardActionEvent) => {
   lastEvent.value = event
-  if (event.type !== 'switch' || typeof event.checked !== 'boolean') return
+  if (event.type !== 'switch' || typeof event.checked !== 'boolean' || !commitSwitchChanges.value) return
 
   actions.value = actions.value.map((action) =>
     action.id === event.id && action.type === 'switch' ? { ...action, checked: event.checked } : action,
@@ -32,6 +33,10 @@ const handleAction = (event: ExtensionCardActionEvent) => {
 
 <template>
   <div>
+    <button data-testid="ignore-switch-updates" type="button" @click="commitSwitchChanges = false">
+      Ignore switch updates
+    </button>
+
     <ExtensionCard
       data-testid="action-event-card"
       name="Action event card"

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

@@ -2,16 +2,33 @@ import { expect, test } from '@playwright/experimental-ct-vue'
 import ExtensionCardActionEventFixture from './ExtensionCardActionEvent.fixture.vue'
 
 test.describe('standalone ExtensionCard action events', () => {
-  test('emits a controlled switch event with the resulting checked value', async ({ mount }) => {
+  test('emits the next checked value for a controlled switch', async ({ mount }) => {
     const component = await mount(ExtensionCardActionEventFixture)
-    const toggle = component.getByRole('checkbox', { name: '扩展开关' })
+    const toggle = component.getByRole('switch', { name: '扩展开关' })
 
     await expect(toggle).toBeChecked()
     await component.locator('.tr-extension-card-primary-actions__switch-track').click()
     await expect(toggle).not.toBeChecked()
     await expect(component.getByTestId('event-id')).toHaveText('toggle-extension')
     await expect(component.getByTestId('event-type')).toHaveText('switch')
     await expect(component.getByTestId('event-checked')).toHaveText('false')
+
+    await component.locator('.tr-extension-card-primary-actions__switch-track').click()
+    await expect(toggle).toBeChecked()
+    await expect(component.getByTestId('event-checked')).toHaveText('true')
+  })
+
+  test('keeps the native checked state controlled by props when switch updates are not committed', async ({
+    mount,
+  }) => {
+    const component = await mount(ExtensionCardActionEventFixture)
+    const toggle = component.getByRole('switch', { name: '扩展开关' })
+
+    await component.getByTestId('ignore-switch-updates').click()
+    await component.locator('.tr-extension-card-primary-actions__switch-track').click()
+
+    await expect(component.getByTestId('event-checked')).toHaveText('false')
+    await expect(toggle).toBeChecked()
   })
 
   test('emits a button action with its presentation type', async ({ mount }) => {

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

@@ -16,7 +16,7 @@ test.describe('standalone ExtensionCardGrid', () => {
     await expect(alphaCard).toHaveCount(1)
     await expect(alphaCard.getByText('Alpha extension', { exact: true })).toBeVisible()
     await expect(alphaCard.getByText('Alpha description', { exact: true })).toBeVisible()
-    await expect(alphaCard.getByRole('checkbox', { name: 'Enable Alpha' })).toBeVisible()
+    await expect(alphaCard.getByRole('switch', { name: 'Enable Alpha' })).toBeVisible()
     await expect(alphaCard.getByRole('button', { name: 'Install Alpha' })).toBeVisible()
     await expect(alphaCard.getByRole('button', { name: 'Inspect Alpha' })).toBeVisible()
   })
@@ -136,12 +136,11 @@ test.describe('standalone ExtensionCardGrid', () => {
     const component = await mount(ExtensionCardGridFixture)
     const card = component.getByTestId('default-grid').locator(':scope > li[data-card-id="alpha"] > *')
 
-    await card.getByRole('checkbox', { name: 'Enable Alpha' }).uncheck({ force: true })
     await card.getByRole('button', { name: 'Install Alpha' }).click()
     await card.getByRole('button', { name: 'Inspect Alpha' }).click()
 
     await expect(component.getByTestId('action-events')).toHaveText(
-      'alpha:toggle-alpha:switch:false|alpha:install-alpha:button:|alpha:inspect-alpha:custom:',
+      'alpha:install-alpha:button:|alpha:inspect-alpha:custom:',
     )
 
     await card.getByRole('button', { name: 'Alpha extension' }).click()