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})