diff --git a/src/__tests__/IssueCard.test.tsx b/src/__tests__/IssueCard.test.tsx index a77022a..7005414 100644 --- a/src/__tests__/IssueCard.test.tsx +++ b/src/__tests__/IssueCard.test.tsx @@ -111,13 +111,13 @@ describe('IssueCard', () => { describe('Expansion', () => { it('shows expand button', () => { render(); - expect(screen.getByRole('button', { name: '▶' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /▶/ })).toBeInTheDocument(); }); it('expands when header is clicked', () => { render(); - const expandButton = screen.getByRole('button', { name: '▶' }); + const expandButton = screen.getByRole('button', { name: /▶/ }); fireEvent.click(expandButton); expect(screen.getByText('▼')).toBeInTheDocument(); diff --git a/src/panel/components/IssueCard.tsx b/src/panel/components/IssueCard.tsx index 01b61e5..3b7af10 100644 --- a/src/panel/components/IssueCard.tsx +++ b/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 }} > -
setExpanded(!expanded)}> +
setExpanded(!expanded)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setExpanded(!expanded); + } + }} + >
@@ -105,7 +117,7 @@ export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps )}
- + {expanded ? '▼' : '▶'}
{expanded && ( diff --git a/src/panel/styles/panel.css b/src/panel/styles/panel.css index 9ad065b..30ec975 100644 --- a/src/panel/styles/panel.css +++ b/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; } diff --git a/src/panel/tabs/AIAnalysisTab.tsx b/src/panel/tabs/AIAnalysisTab.tsx index 3a47fb0..cb2704c 100644 --- a/src/panel/tabs/AIAnalysisTab.tsx +++ b/src/panel/tabs/AIAnalysisTab.tsx @@ -32,7 +32,16 @@ function AnalysisItemCard({ item }: { item: AIAnalysisItem }) {
setExpanded(!expanded)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setExpanded(!expanded); + } + }} >
diff --git a/src/panel/tabs/MemoryTab.tsx b/src/panel/tabs/MemoryTab.tsx index eddbee1..c54b524 100644 --- a/src/panel/tabs/MemoryTab.tsx +++ b/src/panel/tabs/MemoryTab.tsx @@ -294,7 +294,16 @@ function CrashLogSection({ crashes }: { crashes: CrashEntry[] }) {
setExpandedId(expandedId === crash.id ? null : crash.id)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setExpandedId(expandedId === crash.id ? null : crash.id); + } + }} > diff --git a/src/panel/tabs/TimelineTab.tsx b/src/panel/tabs/TimelineTab.tsx index b188917..111d073 100644 --- a/src/panel/tabs/TimelineTab.tsx +++ b/src/panel/tabs/TimelineTab.tsx @@ -554,7 +554,20 @@ export function TimelineTab({ events, tabId, onClear }: TimelineTabProps) {
-
setSnapshotPanelOpen(!snapshotPanelOpen)}> +
setSnapshotPanelOpen(!snapshotPanelOpen)} + onKeyDown={(e) => { + if (e.target !== e.currentTarget) return; + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + setSnapshotPanelOpen(!snapshotPanelOpen); + } + }} + > {snapshotPanelOpen ? '▼' : '▶'} Snapshots ({snapshots.length})