fix(a11y): extract theme and fix pnpm overides by harry-whorlow · Pull Request #392 · TanStack/devtools

harry-whorlow · 2026-03-16T08:21:36Z

updated a11y plugin to work with extracted theme, fixes the codesandbox dependency issues

Summary by CodeRabbit

New Features
- Devtools now supports configurable theming via an integrated theme provider.
Bug Fixes
- Fixed dependency override configuration for the devtools-a11y package.
Chores
- Added release metadata for a patch.
- Updated an example to reference an explicit package version.

changeset-bot · 2026-03-16T08:21:40Z

🦋 Changeset detected

Latest commit: 4fb96fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tanstack/devtools-a11y	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-03-16T08:21:56Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f9b90a90-9b4c-41de-94f0-9c7a00086e51

📥 Commits

Reviewing files that changed from the base of the PR and between 17c2625 and 4fb96fd.

📒 Files selected for processing (1)

.changeset/fuzzy-mice-hunt.md

📝 Walkthrough

Walkthrough

Extracts and applies a theme provider to the devtools-a11y UI, updates the example's package dependency to a fixed version, and adds a changeset plus a workspace override for @tanstack/devtools-a11y in the repo configuration.

Changes

Cohort / File(s)	Summary
Changeset `./.changeset/fuzzy-mice-hunt.md`	Added changeset documenting a patch release for `@tanstack/devtools-a11y` with message about extracting the theme provider and pnpm overrides.
Repository config `package.json`	Added workspace override entry for `@tanstack/devtools-a11y` to influence dependency resolution.
Example app `examples/react/a11y-devtools/package.json`	Replaced workspace dependency with explicit version `^0.1.1` for `@tanstack/devtools-a11y`.
Devtools UI `packages/devtools-a11y/src/core/components/index.tsx`	Refactored `Devtools` to accept a `theme` via new `DevtoolsProps` interface and wrapped the component tree with `ThemeContextProvider` (`TanStackDevtoolsTheme` type imported).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped in with a palette bright,
Wrapped the tools in themed delight.
Context snug as carrot snug,
Accessibility gives a hug. 🥕

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	Description is minimal but present; however, required template sections like detailed changes, checklist completion, and release impact are missing or incomplete.	Expand description to follow the provided template: detail the theme extraction changes, complete the checklist items, and confirm changeset generation.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title accurately summarizes the main changes: extracting theme provider and fixing pnpm overrides, matching the changeset and code modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch a11y-theme-and-overides

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

nx-cloud · 2026-03-16T08:22:54Z

View your CI Pipeline Execution ↗ for commit 4fb96fd

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:sherif,t...`	✅ Succeeded	8s	View ↗
`nx run-many --targets=build --exclude=examples/**`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-16 08:32:42 UTC

pkg-pr-new · 2026-03-16T08:23:13Z

More templates

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@392

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@392

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@392

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@392

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@392

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@392

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@392

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@392

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@392

@tanstack/react-devtools

npm i https://pkg.pr.new/@tanstack/react-devtools@392

@tanstack/solid-devtools

npm i https://pkg.pr.new/@tanstack/solid-devtools@392

@tanstack/vue-devtools

npm i https://pkg.pr.new/@tanstack/vue-devtools@392

commit: 4fb96fd

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In @.changeset/fuzzy-mice-hunt.md:
- Line 5: Update the changelog entry in .changeset/fuzzy-mice-hunt.md to correct
the typo: replace the word "overides" with the correct spelling "overrides" in
the sentence "Extract theme provider and fix pnpm overides" so the release notes
display the proper spelling.

In `@packages/devtools-a11y/src/core/components/index.tsx`:
- Around line 8-12: The Devtools component now requires a theme prop which is a
breaking change; make DevtoolsProps.theme optional and restore backward
compatibility by treating the prop as optional (theme?: TanStackDevtoolsTheme)
and applying an internal default when absent inside the Devtools function (e.g.,
use a defaultTheme or fallback value before using theme). Update references to
props.theme inside Devtools to use the fallback so existing consumers without
props continue to work.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a3232fa2-a801-4ef1-bb9f-27d784781dd3

📥 Commits

Reviewing files that changed from the base of the PR and between 6c7b961 and 17c2625.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

.changeset/fuzzy-mice-hunt.md
examples/react/a11y-devtools/package.json
package.json
packages/devtools-a11y/src/core/components/index.tsx

.changeset/fuzzy-mice-hunt.md

packages/devtools-a11y/src/core/components/index.tsx

harry-whorlow · 2026-03-16T08:26:16Z

fixes #326

fix(a11y): extract theme and fix pnpm overides

17c2625

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

.changeset/fuzzy-mice-hunt.md Outdated Show resolved Hide resolved

packages/devtools-a11y/src/core/components/index.tsx Show resolved Hide resolved

fix: spelling

4fb96fd

harry-whorlow merged commit b0993b6 into main Mar 16, 2026
6 checks passed

harry-whorlow deleted the a11y-theme-and-overides branch March 16, 2026 08:33

github-actions bot mentioned this pull request Mar 16, 2026

ci: Version Packages #393

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(a11y): extract theme and fix pnpm overides#392

fix(a11y): extract theme and fix pnpm overides#392
harry-whorlow merged 2 commits intomainfrom
a11y-theme-and-overides

harry-whorlow commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

nx-cloud bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

harry-whorlow commented Mar 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

harry-whorlow commented Mar 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

nx-cloud bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

harry-whorlow commented Mar 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

harry-whorlow commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

nx-cloud bot commented Mar 16, 2026 •

edited

Loading

pkg-pr-new bot commented Mar 16, 2026 •

edited

Loading