From edc3707032f17757f90c8a1177a49b3f33a6a983 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Wed, 1 Apr 2026 20:03:09 +0800
Subject: [PATCH] fix(incident): a11y AI proposal button, move spin keyframe to
 globals, fix deps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/globals.css                      |  5 +++++
 .../web/src/components/incident/incident-card.tsx | 15 +++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 0ce70099d..822cd1150 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -279,3 +279,8 @@
     display: none;
   }
 }
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/apps/web/src/components/incident/incident-card.tsx b/apps/web/src/components/incident/incident-card.tsx
index 950173176..6ceea1562 100644
--- a/apps/web/src/components/incident/incident-card.tsx
+++ b/apps/web/src/components/incident/incident-card.tsx
@@ -140,8 +140,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
       setButtonState('error')
       setErrorMessage(error instanceof Error ? error.message : String(error))
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken])
+  }, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken, t])
 
   // ── handleReject（移植自 DualStateIncidentCard Phase 6.5）────────────────
   const handleReject = useCallback(async () => {
@@ -173,8 +172,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
       setButtonState('error')
       setErrorMessage(error instanceof Error ? error.message : String(error))
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken])
+  }, [currentProposalId, decision, incident.incident_id, isDecisionReady, buttonState, onApprovalChange, csrfToken, t])
 
   // ── 授權按鈕渲染 ───────────────────────────────────────────────────────────
   const renderApproveButtons = () => {
@@ -318,7 +316,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
       {/* AI 提案行（可展開）*/}
       {decisionAction && (
         <>
-          <div
+          <button
             onClick={() => setAiExpanded(v => !v)}
             style={{
               margin: '0 10px 6px',
@@ -333,12 +331,15 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
               gap: 5,
               fontSize: 9,
               color: '#87867f',
+              width: '100%',
+              textAlign: 'left' as const,
+              fontFamily: 'inherit',
             }}
           >
             <span style={{ color: '#d97757' }}>▶</span>
             <span>AI 提案: {decisionAction.slice(0, 50)}{decisionAction.length > 50 ? '...' : ''}</span>
             <span style={{ marginLeft: 'auto' }}>{aiExpanded ? '▲' : '▼'}</span>
-          </div>
+          </button>
           {aiExpanded && (
             <div style={{
               margin: '0 10px 6px',
@@ -373,8 +374,6 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
         </div>
       )}
 
-      {/* spin keyframe */}
-      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
     </div>
   )
 }