fix(a11y): convert click-only divs/spans to keyboard-accessible buttons

src/__tests__/IssueCard.test.tsx

@@ -111,13 +111,13 @@
   describe('Expansion', () => {
     it('shows expand button', () => {
       render(<IssueCard issue={mockErrorIssue} />);
-      expect(screen.getByRole('button', { name: '▶' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /▶/ })).toBeInTheDocument();
     });
 
     it('expands when header is clicked', () => {
       render(<IssueCard issue={mockErrorIssue} />);
 
-      const expandButton = screen.getByRole('button', { name: '▶' });
+      const expandButton = screen.getByRole('button', { name: /▶/ });
       fireEvent.click(expandButton);
 
       expect(screen.getByText('▼')).toBeInTheDocument();
@@ -138,7 +138,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('💡 Suggestion:')).toBeInTheDocument();
       expect(screen.getByText(/Add a unique key prop/)).toBeInTheDocument();
     });
   });
@@ -194,7 +194,7 @@
       const header = screen.getByText('Stale Closure Detected').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('🔍 Closure Timeline:')).toBeInTheDocument();
     });
 
     it('shows created and executed render numbers', () => {
@@ -253,7 +253,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('📚 Learn more')).toBeInTheDocument();
     });
 
     it('link opens in new tab', () => {
@@ -262,7 +262,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       const link = screen.getByText('📚 Learn more');
       expect(link.getAttribute('target')).toBe('_blank');
       expect(link.getAttribute('rel')).toBe('noopener noreferrer');
     });

src/panel/components/IssueCard.tsx

@@ -70,7 +70,19 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps
       className={`issue-card severity-${issue.severity}`}
       style={{ borderLeftColor: severity.color }}
     >
-      <div className="issue-header" onClick={() => setExpanded(!expanded)}>
+      <div
+        className="issue-header"
+        role="button"
+        tabIndex={0}
+        aria-expanded={expanded}
+        onClick={() => setExpanded(!expanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setExpanded(!expanded);
+          }
+        }}
+      >
         <span className={`issue-icon ${severity.iconClass}`} />
         <div className="issue-info">
           <div className="issue-title-row">
@@ -105,7 +117,7 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps
             )}
           </div>
         </div>
-        <button className="expand-button">{expanded ? '▼' : '▶'}</button>
+        <span className="expand-button">{expanded ? '▼' : '▶'}</span>
       </div>
 
       {expanded && (

src/panel/styles/panel.css

@@ -60,12 +60,14 @@ body {
 }
 
 /* Global focus ring (WCAG 2.4.7) */
-button:focus-visible {
+button:focus-visible,
+[role="button"]:focus-visible {
   outline: 2px solid var(--accent-blue);
   outline-offset: 2px;
 }
 
-button:focus:not(:focus-visible) {
+button:focus:not(:focus-visible),
+[role="button"]:focus:not(:focus-visible) {
   outline: none;
 }
 

src/panel/tabs/AIAnalysisTab.tsx

@@ -32,7 +32,16 @@ function AnalysisItemCard({ item }: { item: AIAnalysisItem }) {
     <div
       className="ai-item-card"
       style={{ borderLeftColor: style.color, backgroundColor: style.bg }}
+      role="button"
+      tabIndex={0}
+      aria-expanded={expanded}
       onClick={() => setExpanded(!expanded)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setExpanded(!expanded);
+        }
+      }}
     >
       <div className="ai-item-header">
         <span className={`ai-item-icon ${style.iconClass}`} />

src/panel/tabs/MemoryTab.tsx

@@ -294,7 +294,16 @@ function CrashLogSection({ crashes }: { crashes: CrashEntry[] }) {
           <div key={crash.id} className="crash-entry">
             <div 
               className="crash-header"
+              role="button"
+              tabIndex={0}
+              aria-expanded={expandedId === crash.id}
               onClick={() => setExpandedId(expandedId === crash.id ? null : crash.id)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setExpandedId(expandedId === crash.id ? null : crash.id);
+                }
+              }}
             >
               <span className={`crash-icon ${getCrashIconClass(crash.type)}`} />
               <span className="crash-time">

src/panel/tabs/TimelineTab.tsx

@@ -554,7 +554,20 @@ export function TimelineTab({ events, tabId, onClear }: TimelineTabProps) {
       </div>
 
       <div className="snapshot-panel">
-        <div className="snapshot-header" onClick={() => setSnapshotPanelOpen(!snapshotPanelOpen)}>
+        <div
+          className="snapshot-header"
+          role="button"
+          tabIndex={0}
+          aria-expanded={snapshotPanelOpen}
+          onClick={() => setSnapshotPanelOpen(!snapshotPanelOpen)}
+          onKeyDown={(e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setSnapshotPanelOpen(!snapshotPanelOpen);
+            }
+          }}
+        >
           <span className="snapshot-toggle">{snapshotPanelOpen ? '▼' : '▶'}</span>
           <span className="snapshot-title">Snapshots ({snapshots.length})</span>
           <button 
@@ -579,7 +592,17 @@ export function TimelineTab({ events, tabId, onClear }: TimelineTabProps) {
                   <div key={snapshot.id} className={`snapshot-item ${expandedSnapshotId === snapshot.id ? 'expanded' : ''}`}>
                     <div 
                       className="snapshot-item-header"
+                      role="button"
+                      tabIndex={0}
+                      aria-expanded={expandedSnapshotId === snapshot.id}
                       onClick={() => setExpandedSnapshotId(expandedSnapshotId === snapshot.id ? null : snapshot.id)}
+                      onKeyDown={(e) => {
+                        if (e.target !== e.currentTarget) return;
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          setExpandedSnapshotId(expandedSnapshotId === snapshot.id ? null : snapshot.id);
+                        }
+                      }}
                     >
                       <span className="snapshot-time">
                         {new Date(snapshot.createdAt).toLocaleTimeString()}