Skip to content

feat: frontend accessibility, ARIA, keyboard nav, empty/loading states#86

Open
tirth8205 wants to merge 23 commits intomainfrom
feat/accessibility-fixes
Open

feat: frontend accessibility, ARIA, keyboard nav, empty/loading states#86
tirth8205 wants to merge 23 commits intomainfrom
feat/accessibility-fixes

Conversation

@tirth8205
Copy link
Copy Markdown
Owner

@tirth8205 tirth8205 commented Mar 31, 2026 •
edited
Loading

Summary

  • Accessibility (WCAG 2.1 AA): Distinct node shapes per kind (d3.symbol — circle, square, triangle, diamond, cross) for colorblind users. ARIA roles on all interactive elements (dialog, tooltip, listbox, button). Focus-visible outlines. Skip navigation link.
  • Keyboard navigation: / to focus search, ? for help overlay, Escape to close panels, Enter/Space on edge toggles, arrow keys between connected nodes.
  • ARIA semantics: aria-pressed on toggle buttons, aria-live="polite" on tooltip and node count, role="listbox" + role="option" on search results, aria-modal on dialogs.
  • Contrast fixes: .dp-close raised to #b0b8c4, placeholder to #6e7681, tooltip labels to #9eaab6 — all meeting WCAG AA 4.5:1.
  • Edge types: All 7 edge types (CALLS, IMPORTS_FROM, INHERITS, IMPLEMENTS, TESTED_BY, DEPENDS_ON, CONTAINS) rendered in standalone HTML with spec-correct dash patterns and legend entries.
  • Empty/loading states: Loading spinner during force simulation, empty state message when graph has zero nodes — both surfaces.
  • VS Code extension: Edge pill keyboard support, aria-pressed toggle, depth slider disabled when no node selected, empty state, tooltip uses CSS variables.
  • Help overlay: Keyboard shortcut reference accessible via ? key or button.

Test plan

  • 512 tests pass (13 visualization tests including 4 new ARIA/state assertions)
  • ruff check clean
  • tsc --noEmit clean
  • Manual: Tab through standalone HTML interactive elements — verify focus ring visible
  • Manual: Toggle edge types via keyboard in both surfaces
  • Manual: Open/close detail panel with Escape, verify focus returns
  • Manual: Generate HTML with 0-node graph — verify empty state

🤖 Generated with Claude Code

tirth8205 and others added 22 commits March 31, 2026 13:11
@tirth8205 @claude
docs: add accessibility audit fixes design spec
8c014d8 
Covers all 23 WCAG 2.1 AA issues across standalone HTML visualization
and VS Code webview: distinct node shapes, contrast fixes, keyboard
navigation, ARIA roles, edge differentiation, and minor polish.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
design: unify VS Code extension colors to GitHub Dark palette
c472a87 
Replace Catppuccin Mocha colors (File=#cba6f7, Class=#f9e2af, Function=#a6e3a1)
with GitHub Dark palette (File=#58a6ff, Class=#f0883e, Function=#3fb950) across
NODE_COLOR, EDGE_COLOR, NODE_RADIUS, edge filter pills, tooltip CSS, and selection
highlight color (#f5e0dc → #e6edf3).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
fix(a11y): improve text contrast ratios to meet WCAG 2.1 AA 4.5:1 min…
e94380b 
…imum

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat: add IMPLEMENTS, TESTED_BY, DEPENDS_ON edge types to standalone …
9a698da 
…HTML

Brings standalone HTML visualization to feature parity with the VS Code extension
by adding 3 missing edge types: EDGE_COLOR entries, EDGE_CFG configurations,
SVG arrow markers, and legend items for IMPLEMENTS, TESTED_BY, and DEPENDS_ON.
Adds a regression test verifying all 7 edge types appear in generated HTML.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): use distinct d3.symbol shapes per node kind for colorblin…
ec5c57d 
…d users

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): add keyboard navigation for graph nodes (tab, arrows, ent…
df801e5 
…er, escape)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): add ARIA roles to tooltip, detail panel, legend, search r…
1e12981 
…esults, communities button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat: complete node shapes + VS Code graph.ts changes for Tasks 1-3
e661b21 
Includes VS Code webview path rendering (SVGCircleElement -> SVGPathElement),
unified color palette in graph.ts, and symbolCross test assertion.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): edge differentiation, skip nav, focus styles, keyboard he…
6bebe18 
…lp overlay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat: add help overlay with interaction guide to standalone HTML visu…
229dcfb 
…alization

Expands the existing keyboard-shortcut overlay to include a full
interaction guide (click a file, shift-click, drag, scroll, etc.) and a
dismiss hint, so new users can discover the graph's interactions at a
glance. Adds a corresponding test.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): use distinct d3.symbol shapes per node kind in VS Code we…
b7b5270 
…bview

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat: add ARIA attributes, empty state HTML, and depth slider tooltip…
f35b46d 
… to VS Code webview

- Edge pills: role=button, tabindex, aria-pressed, aria-label, title
- Search input: aria-label
- Depth slider: title explaining behavior
- Empty state div in graph-area
- Tooltip: role=tooltip, aria-live=polite
- Node count: aria-live=polite
- Edge pill inactive opacity 0.45 -> 0.55

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): add keyboard navigation for graph nodes in VS Code webview
bcaad47 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
feat: add empty state to webview, make depth slider contextual
68cc623 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
feat(a11y): add ARIA roles, contrast fixes, search label, edge pill k…
c5a9bc6 
…eyboard support in VS Code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
design: move edge filters to popover, fix toolbar density on narrow p…
54e511b 
…anels

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
test: add assertions for skip-link, aria-live, and KIND_SHAPE in visu…
ff1e2c6 
…alization tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
chore: remove spec doc from git tracking (already in gitignore)
8600187 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 @claude
design: move detail panel to left side so it doesn't occlude controls
5a4ec55 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
design: increase CONTAINS edge opacity from 0.08 to 0.14 for visibility
e7654d7 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
design: style detail panel close button to match controls
6207a78 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@tirth8205 @claude
fix(vscode): align depth slider disabled opacity CSS/JS, remove inlin…
1e70388 
…e style override

The CSS rule used 0.35 while JS set 0.4 inline. Align CSS to 0.4 (matching spec)
and remove the JS inline opacity overrides since the CSS :disabled selector handles it.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@tirth8205 tirth8205 changed the title feat: WCAG 2.1 AA accessibility fixes for all frontend surfaces feat: frontend accessibility, ARIA, keyboard nav, empty/loading states Mar 31, 2026
@tirth8205 @claude
chore: gitignore audit/design working documents
0f2ae99 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tirth8205