CODAP-587: migrate graph inspector palettes from Chakra UI to React Aria by kswenson · Pull Request #2438 · concord-consortium/codap

kswenson · 2026-03-03T05:33:35Z

Summary

Redesigns the inspector palette wrapper with Zeplin-based styling and React Aria Components
Migrates graph config, measure, and format palettes from Chakra UI to React Aria
Adds comprehensive unit tests for format, measure, config palettes and related components
Fixes accessibility issues found during migration (focus management, ARIA attributes, keyboard navigation)

Test plan

Verify graph inspector palette opens/closes correctly
Verify config palette checkboxes toggle graph options
Verify measure palette checkboxes and adornment controls work
Verify format palette point size, color, and background controls work
Verify keyboard navigation through all palette controls
Run unit tests: npm test -- inspector-panel display-config-palette graph-measure-palette display-item-format-control

🤖 Generated with Claude Code

Restyle InspectorPalette to match Zeplin designs: white background, light blue header, unified drop-shadow around palette and pointer arrow, rounded corners, and semantic HTML with accessibility attributes. Fix pre-existing bug where palette pointer and vertical positioning never worked because setButtonRef was passed to InspectorButton but never accepted as a prop. Capture the button element via click event instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ents Replace Chakra RadioGroup, Radio, Checkbox, Box, Flex, Stack, FormLabel, and Input with React Aria equivalents. Add custom radio/checkbox indicators styled via data-attribute selectors. Use TextField with Label for accessible bin width/alignment inputs with aria-label on RadioGroups. Also fix: "Bar for Each Point" now stays visible when bins are selected (matching Zeplin spec), use correct ConfigurationIcon in palette header, replace && conditional rendering with If component, indent bin options and fuse checkbox as sub-options per spec. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…nents Replace Chakra UI components with React Aria Components in the graph measure palette, disclosure groups, and all adornment Controls. Add role="group" with aria-labelledby/aria-label for WCAG checkbox grouping (CODAP-582). Style checkboxes and radios to match Zeplin spec with teal indicators. Add unit tests for GraphMeasurePalette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove unused `within` import, replace direct DOM access (.closest(), document.getElementById) with Testing Library queries (.not.toBeVisible(), .toHaveAccessibleName()). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Split DisplayItemFormatControl into separate components (PointSizeSlider, LegendColorControls, PlotBackgroundControls) - Fix slider rendering by removing custom className that replaced React Aria default class - Add slider track center line, color swatch checkerboard pattern, and down-pointing disclosure arrows that flip up when color picker is open - Fix swatch click toggle race condition by using button ref for outside click detection - Show Fill Color in all cases, reorder Legend Bins before Border Color - Rename labels: Stroke→Border Color, Color→Fill Color, capitalize and remove colons from all palette labels - Update palette font to Roboto 14px, width to 220px - Extract Fuse Dots checkbox outside showPointDisplayType conditional - Remove visible "Show..." label from measure palette - Use clsx for conditional class names in config palette Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add tests for the 5 format palette components migrated to React Aria: PointSizeSlider, PlotBackgroundControls, LegendColorControls, LegendBinsSelect, DisplayItemFormatControl, and PointColorSetting. Fix pre-existing measure palette test (aria-labelledby → aria-label). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Critical: add aria-label/expanded/haspopup to color swatch buttons, convert color palette grid divs to focusable buttons with aria-pressed. High: fix border contrast (Select→$charcoal, swatch→$charcoal-light-1), add aria-disabled to stroke/background disabled sections, replace duplicate slider aria-label with React Aria Label, give distinct labels to low/high legend color pickers. Medium: darken inspector panel border, add focus indicator to movable value buttons, add checkmark to selected ListBoxItem. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

codecov · 2026-03-03T05:37:33Z

Codecov Report

❌ Patch coverage is 63.36207% with 85 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.77%. Comparing base (9687fb4) to head (1388dae).
⚠️ Report is 20 commits behind head on main.

Files with missing lines	Patch %	Lines
.../adornments/count/count-adornment-registration.tsx	5.88%	16 Missing ⚠️
v3/src/components/inspector-panel.tsx	0.00%	16 Missing ⚠️
...s/data-display/inspector/legend-color-controls.tsx	82.75%	10 Missing ⚠️
...ph/adornments/lsrl/lsrl-adornment-registration.tsx	11.11%	8 Missing ⚠️
...sures/box-plot/box-plot-adornment-registration.tsx	14.28%	6 Missing ⚠️
v3/src/components/map/components/map-inspector.tsx	14.28%	6 Missing ⚠️
v3/src/components/common/color-picker-palette.tsx	0.00%	4 Missing ⚠️
...nents/data-display/inspector/point-size-slider.tsx	60.00%	4 Missing ⚠️
...rd-error/standard-error-adornment-registration.tsx	20.00%	4 Missing ⚠️
...graph/adornments/components/adornment-checkbox.tsx	25.00%	3 Missing ⚠️
... and 4 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2438      +/-   ##
==========================================
+ Coverage   69.31%   69.77%   +0.46%     
==========================================
  Files         760      763       +3     
  Lines       42275    42311      +36     
  Branches    10467    10474       +7     
==========================================
+ Hits        29301    29524     +223     
+ Misses      12949    12762     -187     
  Partials       25       25

Flag	Coverage Δ
cypress	`39.30% <4.89%> (-0.03%)`	⬇️
jest	`58.03% <61.20%> (+0.49%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

cypress · 2026-03-03T05:38:21Z

codap-v3 Run #10486

Run Properties: Failed #10486 • a40dd61a00: Merge pull request #2438 from concord-consortium/CODAP-587-inspector-palette-red...

Project	`codap-v3`
Branch Review	`main`
Run status	`Failed #10486`
Run duration	`06m 11s`
Commit	`a40dd61a00: Merge pull request #2438 from concord-consortium/CODAP-587-inspector-palette-red...`
Committer	`Kirk Swenson`
View all properties for this run ↗︎

Test results
Failures	`1`
Flaky	`0`
Pending	`73`
Skipped	`0`
Passing	`302`
View all changes introduced in this branch ↗︎

Tests for review

cypress/e2e/slider.spec.ts • 1 failed test • Regression Tests

View Output

Test		Artifacts
Slider UI > Slider play and pause functionality		`Test Replay` `Screenshots`

Copilot

Pull request overview

Migrates graph inspector palettes (config/measure/format) from Chakra UI to React Aria Components while redesigning the palette wrapper styling to match Zeplin specs, and adds unit tests for the migrated inspector components.

Changes:

Reworked InspectorPalette wrapper markup/positioning and updated inspector styling tokens + shared React Aria component styles.
Migrated graph measure/config/format inspector UI controls from Chakra to React Aria, including new modular sub-controls (legend colors/bins, background, point size).
Added unit tests for the new palettes/controls and updated i18n strings to match the new UI labels.

Reviewed changes

Copilot reviewed 37 out of 38 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
v3/src/utilities/translation/lang/en-US.json5	Updates inspector palette labels/strings (e.g., color/background/border wording) and adds a color swatch grid label.
v3/src/components/vars.scss	Adds Zeplin-based inspector palette design tokens.
v3/src/components/slider/slider-inspector.tsx	Updates inspector button handling for palette anchoring (event-based ref capture).
v3/src/components/map/components/map-inspector.tsx	Updates inspector button handling for palette anchoring (event-based ref capture).
v3/src/components/inspector-panel.tsx	Refactors palette wrapper structure (dialog semantics, pointer positioning, header id) and updates button API usage.
v3/src/components/inspector-panel.scss	Replaces Chakra-driven palette styling with Zeplin + shared React Aria component styles.
v3/src/components/graph/components/inspector-panel/point-format-palette.tsx	Switches format palette icon asset.
v3/src/components/graph/components/inspector-panel/graph-measure-palette.tsx	Migrates measure palette UI to React Aria checkboxes and adds palette-specific SCSS.
v3/src/components/graph/components/inspector-panel/graph-measure-palette.test.tsx	Adds unit tests for measure palette rendering/behavior/accessibility.
v3/src/components/graph/components/inspector-panel/graph-measure-palette.scss	Adds layout styling for the measure palette container.
v3/src/components/graph/components/inspector-panel/graph-measure-group.tsx	Migrates disclosure group UI from Chakra to React Aria `Disclosure`.
v3/src/components/graph/components/inspector-panel/graph-measure-group.scss	Adds React Aria disclosure styles and shared adornment control styling.
v3/src/components/graph/components/inspector-panel/display-config-palette.tsx	Migrates config palette (radio + bin inputs + fuse checkbox + breakdown radios) to React Aria.
v3/src/components/graph/components/inspector-panel/display-config-palette.test.tsx	Adds unit tests for config palette behavior (bin commits, checkbox toggles, breakdown radios).
v3/src/components/graph/components/inspector-panel/display-config-palette.scss	Adds palette-specific styling/overrides for config palette layout and inputs.
v3/src/components/graph/components/graph-inspector.tsx	Updates inspector button handling for palette anchoring (event-based ref capture).
v3/src/components/graph/adornments/univariate-measures/standard-error/standard-error-adornment-registration.tsx	Replaces Chakra layout wrapper with styled div classes for standard error controls.
v3/src/components/graph/adornments/univariate-measures/box-plot/box-plot-adornment-registration.tsx	Migrates box plot adornment checkboxes to React Aria.
v3/src/components/graph/adornments/movable-value/movable-value-adornment-registration.tsx	Replaces Chakra buttons/layout with native buttons + shared SCSS classes.
v3/src/components/graph/adornments/lsrl/lsrl-adornment-registration.tsx	Migrates LSRL adornment checkboxes to React Aria.
v3/src/components/graph/adornments/count/count-adornment-registration.tsx	Migrates count/percent controls to React Aria checkboxes/radios.
v3/src/components/graph/adornments/components/adornment-checkbox.tsx	Migrates shared adornment checkbox to React Aria checkbox.
v3/src/components/data-display/inspector/point-size-slider.tsx	Introduces React Aria slider for point size control with undo/redo integration.
v3/src/components/data-display/inspector/point-size-slider.test.tsx	Adds unit tests for the point size slider.
v3/src/components/data-display/inspector/point-color-setting.tsx	Improves swatch button ARIA, open state styling, and moves swatch color to CSS variable.
v3/src/components/data-display/inspector/point-color-setting.test.tsx	Adds unit tests for the point color setting behavior/ARIA.
v3/src/components/data-display/inspector/plot-background-controls.tsx	Adds background color + transparency controls using React Aria checkbox + shared swatch UI.
v3/src/components/data-display/inspector/plot-background-controls.test.tsx	Adds unit tests for plot background controls.
v3/src/components/data-display/inspector/legend-color-controls.tsx	Adds legend color controls (categorical/numeric) and a React Aria select for legend binning type.
v3/src/components/data-display/inspector/legend-color-controls.test.tsx	Adds unit tests for legend color controls and legend bin select.
v3/src/components/data-display/inspector/inspector-panel.scss	Removes old inspector-panel styles (moved/replaced by new palette styles).
v3/src/components/data-display/inspector/display-item-format-control.tsx	Refactors format controls into composable subcomponents and migrates UI elements to React Aria.
v3/src/components/data-display/inspector/display-item-format-control.test.tsx	Adds unit tests for refactored format control composition and behaviors.
v3/src/components/data-display/inspector/display-item-format-control.scss	Adds swatch, slider-row, legend bins, and disabled-state styling for the format controls.
v3/src/components/common/color-picker-palette.tsx	Improves swatch grid accessibility by switching swatches to buttons with ARIA semantics.
v3/src/components/common/color-picker-palette.scss	Adds base button-reset styles for swatch buttons.
v3/package.json	Adds `react-aria-components` dependency.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

v3/src/components/common/color-picker-palette.tsx

v3/package.json

v3/src/components/graph/components/inspector-panel/display-config-palette.tsx

v3/src/components/inspector-panel.tsx

…utton Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update graph.spec.ts and graph-legend.spec.ts to work with React Aria components: - Slider: Changed from input[role="slider"] to input[type="range"] with force:true for hidden element - Color pickers: Check --swatch-color CSS variable instead of background-color - Checkboxes: Find and check underlying input[type="checkbox"] elements - Legend bins select: Use button click + role=option instead of HTML select - Point size slider: Check data-disabled instead of aria-disabled attribute All graph.spec.ts tests now passing (20/20).

emcelroy

Looks good 👍 It's a little alarming to see how much styling has to be taken over from Chakra, but it still seems reasonable.

I left some comments and suggestions for a few inconsistencies. I think the most important one is, if I understand correctly, all the checkboxes should use isSelected instead of defaultSelected. That way they'll stay in sync with the model if something else (a plugin for example) changes the state associated with the checkbox.

v3/src/components/data-display/inspector/display-item-format-control.scss

v3/src/components/common/color-picker-palette.tsx

v3/src/components/graph/adornments/count/count-adornment-registration.tsx

v3/src/components/graph/adornments/lsrl/lsrl-adornment-registration.tsx

...components/graph/adornments/univariate-measures/box-plot/box-plot-adornment-registration.tsx

v3/src/components/graph/components/inspector-panel/display-config-palette.tsx

v3/src/components/graph/components/inspector-panel/graph-measure-palette.tsx

- Use controlled value instead of defaultValue on RadioGroups so they stay in sync with model state - Add inputValue empty check to nonStandardColorSelected to prevent rendering a swatch with empty aria-label - Add standard scrollbar-width/scrollbar-color CSS after webkit fallbacks - Migrate standard-error NumberInput from Chakra to React Aria NumberField Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ances Address emcelroy's code review feedback on PR #2438: change defaultSelected to isSelected so checkboxes stay in sync with external state changes (plugins, undo/redo). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson and others added 7 commits February 27, 2026 17:32

CODAP-587: fix lint errors in measure palette tests

2150239

Remove unused `within` import, replace direct DOM access (.closest(), document.getElementById) with Testing Library queries (.not.toBeVisible(), .toHaveAccessibleName()). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kswenson added the v3 CODAP v3 label Mar 3, 2026

kswenson requested a review from Copilot March 3, 2026 05:34

Copilot started reviewing on behalf of kswenson March 3, 2026 05:35 View session

github-actions bot temporarily deployed to development March 3, 2026 05:37 Inactive

Copilot AI reviewed Mar 3, 2026

View reviewed changes

CODAP-587: add missing onClick handler to non-standard color swatch b…

25e14fa

…utton Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

github-actions bot temporarily deployed to development March 3, 2026 05:50 Inactive

github-actions bot temporarily deployed to development March 3, 2026 08:00 Inactive

kswenson marked this pull request as ready for review March 3, 2026 08:00

kswenson requested a review from emcelroy March 3, 2026 08:01

kswenson force-pushed the CODAP-587-inspector-palette-redesign branch from b1eed0f to 0e9539e Compare March 3, 2026 15:54

github-actions bot temporarily deployed to development March 3, 2026 15:58 Inactive

emcelroy approved these changes Mar 3, 2026

View reviewed changes

github-actions bot temporarily deployed to development March 4, 2026 00:12 Inactive

kswenson merged commit a40dd61 into main Mar 4, 2026
11 of 12 checks passed

kswenson deleted the CODAP-587-inspector-palette-redesign branch March 4, 2026 01:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CODAP-587: migrate graph inspector palettes from Chakra UI to React Aria#2438

CODAP-587: migrate graph inspector palettes from Chakra UI to React Aria#2438
kswenson merged 10 commits intomainfrom
CODAP-587-inspector-palette-redesign

kswenson commented Mar 3, 2026

Uh oh!

codecov bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

cypress bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

emcelroy left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kswenson commented Mar 3, 2026

Summary

Test plan

Uh oh!

codecov bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

cypress bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

codap-v3 Run #10486

Tests for review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

emcelroy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Mar 3, 2026 •

edited

Loading

cypress bot commented Mar 3, 2026 •

edited

Loading