From c7629606180ade7fa8832b3ed5876e92be27a16a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 6 Oct 2026 19:23:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E7=BA=A2=E4=B9=A6=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E7=9B=AE=E6=A0=87=E6=9D=A1=E6=94=B9=E5=9B=9E=E4=B8=80=E7=BB=84?=
 =?UTF-8?q?=E6=99=AE=E9=80=9A=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TargetTabs 去掉没有配套 tabpanel 的 tablist/tab 角色，容器改 role=group
- 选中态改用 aria-current 表达，Tab/Enter 操作不变
---
 .../project-development/export/components/TargetTabs.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/project-development/export/components/TargetTabs.tsx b/apps/ai-game-creator-shell/src/view/project-development/export/components/TargetTabs.tsx
index e2e88df34..0881d7ef8 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/export/components/TargetTabs.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/export/components/TargetTabs.tsx
@@ -6,6 +6,10 @@ import { TargetIcon } from './TargetIcon';
  *
  * 形态是经典下划线 tab（不是按钮胶囊）：小字号、等宽三列、选中项用主色 + 底部指示条，
  * 视觉重量压在 header 里不抢标题。等宽靠三列 grid，不随标题长短伸缩。
+ *
+ * 无障碍上按「一组单选按钮」而不是 ARIA tab 模式：本组件没有配套的 `tabpanel` /
+ * `aria-controls` / 方向键处理，硬套 `role="tab"` 只会让读屏播报一个找不到面板的 tab。
+ * 这里保留 `role="group"` + `aria-current` 表达「这组里当前选中的是哪个」，Tab/Enter 本来就能用。
  */
 export function TargetTabs({
   activeTarget,
@@ -17,7 +21,7 @@ export function TargetTabs({
   return (
     <div
       className="mx-auto grid w-full max-w-md grid-cols-3"
-      role="tablist"
+      role="group"
       aria-label="导出目标"
     >
       {TARGET_ORDER.map((target) => {
@@ -26,8 +30,7 @@ export function TargetTabs({
           <button
             key={target}
             type="button"
-            role="tab"
-            aria-selected={active}
+            aria-current={active ? 'true' : undefined}
             className={`relative flex min-w-0 items-center justify-center gap-1.5 px-2 pb-2 pt-1 text-xs font-medium transition-colors after:absolute after:inset-x-3 after:bottom-0 after:h-[2px] after:rounded-full after:transition-colors after:content-[''] ${
               active
                 ? 'text-[#c7653d] after:bg-[#c7653d]'