feat: Modernize Explore Graph Toolbar BED-9043

[justin-prime1]

Summary

• replace the retained Explore graph toolbar controls with recognizable icons
• add matching accessible names and hover/focus tooltips
• provide stable menu relationships, expanded state, and focus restoration
• preserve Reset Graph, Labels, Layout, JSON Export, and Search behavior
• allow consumers to supply optional, generic actions in the existing Export menu
• preserve JSON-only BHCE behavior when no additional actions are supplied

The generic Export-action interface enables the later BED-9132 BHE feature. This PR does not add PNG, SVG, or other image-export behavior to BHCE.

Jira: BED-9043

Accessibility

• decorative icons are excluded from the accessibility tree
• icon controls have concise accessible names
• tooltips work on hover and keyboard focus
• menu buttons expose stable ARIA relationships and state
• contributed actions expose understandable names and disabled state
• Escape and item selection close menus and restore trigger focus
• keyboard activation, light/dark presentation, visible focus, target sizing, and CSS-equivalent 200% zoom were validated

Actual browser-chrome 200% zoom, screen-reader output, and canvas/WebGL accessibility remain manual validation items. DOM testing does not establish canvas accessibility.

Validation

• focused GraphButton, GraphControls, and JSON utility tests: 36/36
• BHCE Explore GraphView: 14/14
• BHE consumer type check: passed
• BHE Explore GraphView: 7/11; four known stale visible-text Layout selectors remain for the separate BHE consumer/pointer PR
• shared UI and BHCE UI type, lint, and formatting checks
• just prepare-for-codereview
• isolated BHE Playwright in light and dark modes
• JSON-only Export menu confirmed in the current consumer
• no browser page or console errors
• Explore endpoint returned HTTP 200

Parity

BHE/BHCE disposition: matched. Both products remain JSON-only until a consumer supplies additional actions. Updating the BHE submodule pointer and its four stale consumer-test selectors remains intentionally deferred to the separate BHE PR.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: a03ef19d-984c-4231-9f21-704dcb2a2f9b

📥 Commits

Reviewing files that changed from the base of the PR and between 04c015a and f263a63.

📒 Files selected for processing (6)

• cmd/ui/src/views/Explore/GraphView.test.tsx
• packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx
• packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.test.tsx
• packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.tsx
• packages/javascript/bh-shared-ui/src/components/GraphControls/index.ts
• packages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• cmd/ui/src/views/Explore/GraphView.test.tsx
• packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx
• packages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsx

---

📝 Walkthrough

Walkthrough

Graph controls now use accessible icon buttons, MUI tooltips, stable menu identifiers, forwarded refs, and configurable export actions. Tests cover menu behavior, focus restoration, export actions, and layout selection states.

Changes

Accessible graph controls

Layer / File(s)	Summary
Menu and button accessibility contract packages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsx, packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx	GraphMenu uses stable control IDs, optional display content, tooltip wrapping, and persistent menu mounting. GraphButton forwards refs to the underlying MUI button.
Icon control and export integration packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.tsx, packages/javascript/bh-shared-ui/src/components/GraphControls/index.ts	Graph controls use icons, accessible names, MUI tooltips, stable menu IDs, and configurable export actions. GraphExportAction is publicly re-exported.
Accessible control and layout test coverage packages/javascript/bh-shared-ui/src/components/GraphControls/GraphControls.test.tsx, cmd/ui/src/views/Explore/GraphView.test.tsx	Tests use role/name queries and cover icon-only controls, tooltips, menu focus behavior, export actions, and layout selection states.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant GraphControls
  participant GraphMenu
  participant ExportAction
  User->>GraphControls: open export control
  GraphControls->>GraphMenu: render additional actions and JSON export
  User->>GraphMenu: select an action
  GraphMenu->>ExportAction: invoke onSelect

Loading

Possibly related PRs

• SpecterOps/BloodHound#2774: Updates related GraphControls accessibility behavior and tests.
• SpecterOps/BloodHound#3030: Refactors related button components and Graph UI control usage.

Suggested labels: enhancement, user interface, javascript

Suggested reviewers: thenando

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: modernizing the Explore Graph toolbar with icons, tooltips, and improved accessibility.
Description check	✅ Passed	The description includes a summary, motivation (Jira ticket reference), comprehensive testing documentation, types of changes, and accessibility details, but the provided checklist section is incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/explore-graph-toolbar

---

_{Comment @coderabbitai help to get the list of available commands.}

[catsiller]

work completed in #3132, closing PR