From cec4b7ec5e16cca51efbb4e548ba1b826e470d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Sat, 3 Oct 2026 17:30:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=85=85=E7=82=B9=E5=BC=B9=E7=AA=97):=20?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E9=94=AE=E5=88=87=E6=8D=A2=E9=A1=B5=E7=AD=BE?=
 =?UTF-8?q?=E4=B8=8E=E6=A1=A3=E4=BD=8D=E5=90=8E=E7=A7=BB=E5=8A=A8=E7=84=A6?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PlatformRechargeTabNav 与 PlatformPointProductGrid 在方向键 / Home / End 改变选中项后，用 ref 把焦点移到新按钮，保持 roving tabindex 焦点与选中一致。
---
 .../PlatformProfileRechargeModal/index.tsx    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/PlatformProfileRechargeModal/index.tsx b/packages/shared/src/components/PlatformProfileRechargeModal/index.tsx
index 31273ef13..e8f9aff71 100644
--- a/packages/shared/src/components/PlatformProfileRechargeModal/index.tsx
+++ b/packages/shared/src/components/PlatformProfileRechargeModal/index.tsx
@@ -2,7 +2,14 @@ import './index.css';
 
 import QRCode from 'qrcode';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type {
   ProfileMembership,
@@ -495,6 +502,8 @@ function PlatformRechargeTabNav({
     { id: 'subscription', label: '会员订阅' },
     { id: 'recharge', label: '泥点充值' },
   ];
+  // 方向键移动选中项后把焦点一并移到新页签，保持 roving tabindex 的焦点与选中一致。
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
 
   return (
     <div
@@ -519,6 +528,7 @@ function PlatformRechargeTabNav({
         const nextTab = tabs[nextIndex];
         if (nextTab) {
           onChange(nextTab.id);
+          tabRefs.current[nextTab.id]?.focus();
         }
       }}
     >
@@ -527,6 +537,9 @@ function PlatformRechargeTabNav({
         return (
           <button
             key={tab.id}
+            ref={(node) => {
+              tabRefs.current[tab.id] = node;
+            }}
             type="button"
             role="tab"
             id={`platform-recharge-tab-${tab.id}`}
@@ -823,6 +836,8 @@ function PlatformPointProductGrid({
   submittingProductId: string | null;
   onSelect: (product: ProfileRechargeProduct) => void;
 }) {
+  // 方向键移动选中项后同步移动焦点，保持 roving tabindex 的焦点与选中一致。
+  const productRefs = useRef<Record<string, HTMLButtonElement | null>>({});
   return (
     <div
       role="radiogroup"
@@ -848,6 +863,7 @@ function PlatformPointProductGrid({
         const nextProduct = products[nextIndex];
         if (nextProduct) {
           onSelect(nextProduct);
+          productRefs.current[nextProduct.productId]?.focus();
         }
       }}
     >
@@ -857,6 +873,9 @@ function PlatformPointProductGrid({
         return (
           <button
             key={product.productId}
+            ref={(node) => {
+              productRefs.current[product.productId] = node;
+            }}
             type="button"
             role="radio"
             aria-checked={selected}