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

[hoainho]

🌟 Before claiming this issue

Two quick steps before you open a PR:

1. ⭐ Star the repository — low-friction signal that you'll follow through
2. 💬 Comment I'll take this (or similar) below — prevents two contributors racing on the same issue

Full policy: CONTRIBUTING.md → How to claim. If a claim is older than 7 days with no PR, you can reclaim it politely.

---

What

Five locations use non-interactive <div> or <span> elements as click targets, breaking keyboard accessibility:

File	Line	Element	Purpose
src/panel/components/IssueCard.tsx	97	<div className="issue-header">	Expand/collapse issue
src/panel/tabs/AIAnalysisTab.tsx	35	<div className="ai-item-card">	Expand/collapse analysis card
src/panel/tabs/TimelineTab.tsx	557	<div className="snapshot-header">	Toggle snapshot panel
src/panel/tabs/TimelineTab.tsx	582	<div className="snapshot-item-header">	Expand snapshot item
src/panel/tabs/MemoryTab.tsx	297	<div className="crash-header">	Expand crash log entry

None have tabIndex, role="button", aria-expanded, or keyboard handlers. Keyboard users cannot expand any of these cards.

Why it matters

Same as Issue [WAI-ARIA Tabs] — keyboard-only and screen-reader users blocked.

How to fix

Same pattern at all 5 sites. Choose the approach you prefer:

Option A (preferred): convert to <button>

<button
  type="button"
  className="issue-header"
  onClick={() => setExpanded(!expanded)}
  aria-expanded={expanded}
>

You may need a small CSS adjustment to remove default button styling:

.issue-header { background: none; border: none; width: 100%; text-align: left; padding: 0; cursor: pointer; }

Option B (if div nesting is required for layout): add ARIA + keyboard

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

Scope your PR

You can tackle this one file at a time if you prefer smaller PRs. Each location is independent. Choose one of:

1. All 5 in a single PR (faster review)
2. One PR per file (smaller chunks, easier first contribution)

Verify

1. Tab through the panel — each expand toggle should be reachable.
2. Press Enter or Space — it should expand/collapse.
3. axe DevTools should not flag these elements anymore.

Acceptance criteria

• All 5 sites converted (<button> or <div role="button"> + keyboard)
• aria-expanded reflects state
• Tab/Enter/Space all work
• Existing tests still pass (run npm run test:run)
• No visual regression — screenshot before/after if styling needed adjustment

---

Scope: M (~30 lines across 4 files) | Effort: ~1.5h | Risk: Lane Tiny | WCAG: 2.1.1, 4.1.2