An HTML <button> is not valid SVG content — it doesn't focus reliably across browsers and exposed no accessible name (WCAG 4.1.2). At the root focus it was also a silent no-op.
Fix
Move the click handler onto the <circle> directly (valid SVG, preserves the mouse zoom-out).
Only show the pointer/hover affordance when there is a parent focus to zoom out to.
Keyboard navigation is unchanged: the Breadcrumb above the chart and the ExplorerPanel beside it already provide real <button> controls for the same focus changes, and the chart is exposed to assistive tech as a single labelled role="img". A code comment documents this so the redundancy is intentional and discoverable.
Test
Adds explore-svg-markup.test.tsx asserting the chart renders as a labelled role="img" with no nested HTML <button>.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1906
**Author:** [@farhan523](https://github.com/farhan523)
**Created:** 6/26/2026
**Status:** ❌ Closed
**Base:** `dev` ← **Head:** `fix/staffml-explore-svg-invalid-button`
---
### 📝 Commits (1)
- [`602dc80`](https://github.com/harvard-edge/cs249r_book/commit/602dc80f2553300503220dfd3d48fe5e5c9ed246) fix(staffml): remove invalid HTML button nested inside the explore SVG
### 📊 Changes
**2 files changed** (+45 additions, -6 deletions)
<details>
<summary>View changed files</summary>
➕ `interviews/staffml/src/__tests__/explore-svg-markup.test.tsx` (+26 -0)
📝 `interviews/staffml/src/app/explore/page.tsx` (+19 -6)
</details>
### 📄 Description
## Problem
The radial explorer's center "zoom out" affordance was an HTML `<button>` wrapping an SVG `<circle>`:
```jsx
<button type="button" onClick={...} className="cursor-pointer">
<circle cx={CX} cy={CY} r="92" ... />
</button>
```
An HTML `<button>` is **not valid SVG content** — it doesn't focus reliably across browsers and exposed no accessible name (WCAG 4.1.2). At the root focus it was also a silent no-op.
## Fix
- Move the click handler onto the `<circle>` directly (valid SVG, preserves the mouse zoom-out).
- Only show the pointer/hover affordance when there is a parent focus to zoom out to.
Keyboard navigation is unchanged: the **Breadcrumb** above the chart and the **ExplorerPanel** beside it already provide real `<button>` controls for the same focus changes, and the chart is exposed to assistive tech as a single labelled `role="img"`. A code comment documents this so the redundancy is intentional and discoverable.
## Test
Adds `explore-svg-markup.test.tsx` asserting the chart renders as a labelled `role="img"` with no nested HTML `<button>`.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1906
Author: @farhan523
Created: 6/26/2026
Status: ❌ Closed
Base:
dev← Head:fix/staffml-explore-svg-invalid-button📝 Commits (1)
602dc80fix(staffml): remove invalid HTML button nested inside the explore SVG📊 Changes
2 files changed (+45 additions, -6 deletions)
View changed files
➕
interviews/staffml/src/__tests__/explore-svg-markup.test.tsx(+26 -0)📝
interviews/staffml/src/app/explore/page.tsx(+19 -6)📄 Description
Problem
The radial explorer's center "zoom out" affordance was an HTML
<button>wrapping an SVG<circle>:An HTML
<button>is not valid SVG content — it doesn't focus reliably across browsers and exposed no accessible name (WCAG 4.1.2). At the root focus it was also a silent no-op.Fix
<circle>directly (valid SVG, preserves the mouse zoom-out).Keyboard navigation is unchanged: the Breadcrumb above the chart and the ExplorerPanel beside it already provide real
<button>controls for the same focus changes, and the chart is exposed to assistive tech as a single labelledrole="img". A code comment documents this so the redundancy is intentional and discoverable.Test
Adds
explore-svg-markup.test.tsxasserting the chart renders as a labelledrole="img"with no nested HTML<button>.🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.