Controls: Fix Object contrast issue and tidy up code

[Sidnioulz]

What I did

Caught an a11y issue in a contributor's UI Tests that had nothing to do with them, so opening a PR to fix it.

I've used the opportunity to remove a redundant styling API for Object control internals.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories

Manual testing

1. Visit http://localhost:6006/?path=/story/addons-docs-blocks-controls-object--object&globals=sb_theme:side-by-side
2. Notice absence of contrast a11y violations

Documentation

ø

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Accessibility

  • Improved semantic accessibility in the tree control by adjusting ARIA roles for better screen-reader behavior.

• Refactor

  • Styling simplified: styling is now driven by built-in CSS classes instead of a customizable per-node style function, streamlining visual consistency and integration.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 967875e

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	❌ Failed	12m 6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-02-27 13:54:55 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 17dd819 and 967875e.

📒 Files selected for processing (4)

• code/addons/docs/src/blocks/controls/Object.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx

💤 Files with no reviewable changes (1)

• code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx

---

📝 Walkthrough

Walkthrough

This PR removes the getStyle-based dynamic styling system from JSON tree components, replacing it with CSS class–based styling and removing Theme/getStyle types and helpers. It also changes one ARIA role from "region" to "group" and includes minor manifest/package metadata edits.

Changes

Cohort / File(s)	Summary
Styling refactor — JSON tree components code/addons/docs/src/blocks/controls/Object.tsx, code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx, code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx	Removed getStyle prop from JsonTreeProps and node prop interfaces; removed getCustomStyleFunction, Theme type import/usage, and default getStyle implementation. Replaced dynamic inline style usage with static CSS class names (e.g., .rejt-not-collapsed-list, .rejt-collapsed-value) and removed style propagation to child nodes.
Accessibility update code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx	Changed ARIA role on Region element from "region" to "group" (no other behavior changes).
Metadata manifest_file, package.json	Minor manifest/package changes (small line additions/removals).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/addons/docs/src/blocks/controls/Object.tsx`:
- Line 9: Remove the now-unused useTheme import and its call: delete "useTheme"
from the import statement (styled, useTheme) and remove the "const theme =
useTheme()" declaration inside the Object component (left over after removing
getCustomStyleFunction) so no dead reference remains.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ca086e8 and 17dd819.

📒 Files selected for processing (4)

• code/addons/docs/src/blocks/controls/Object.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
• code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx

💤 Files with no reviewable changes (1)

• code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

useTheme import is now unused — dead code from removed getCustomStyleFunction.

const theme = useTheme() is declared on Line 166 but theme is never referenced anywhere in the component body after the getCustomStyleFunction removal. Both the import and the variable declaration should be removed.

🧹 Proposed fix

-import { styled, useTheme } from 'storybook/theming';
+import { styled } from 'storybook/theming';

 export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
-  const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/addons/docs/src/blocks/controls/Object.tsx` at line 9, Remove the
now-unused useTheme import and its call: delete "useTheme" from the import
statement (styled, useTheme) and remove the "const theme = useTheme()"
declaration inside the Object component (left over after removing
getCustomStyleFunction) so no dead reference remains.

[yannbf]

As long as Chromatic doesn't detect regressions (which I hope we have stories for) LGTM