A11y: Improve dist size from React Aria #32594

JReinhold · 2025-10-01T09:57:50Z

Telescopes on top of #32458

Reduce the bundle size of core, by fixing React Aria usage and internals. The current structure of the React Aria packages is not fully optimised for tree-shakeability, at least esbuild doesn't remove any dead code from it, which is too costly for us. This PR removes the dead code "manually" by using precise imports.

What I did

Changed all imports from react-aria, react-stately and react-types to specific packages under eg. @react-aria/overlays
Patched the react-aria-components package to:
1. changed package.json#exports to export component files directly instead of via the barrel file
2. modified imports within components to not import from react-aria or react-stately, but instead from sub-packages
Added eslint rules to ensure we don't regress on this.

This should all be temporary, as the upstream packages have a plan to do this natively: adobe/react-spectrum#8797

Checklist for Contributors

Testing

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

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

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 canary-release-pr.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Refactor
- Re-routed underlying UI component dependencies (Modal, Popover, Select, Tabs, Tooltip, overlays) to patched and modular packages. No visual or behavioral changes expected.
Chores
- Updated and streamlined dependencies; removed unused bundles and aligned packages with modular variants.
- Added lint rules to restrict direct imports from core libraries, ensuring consistent, safer entry points.

…. temporarily disable imports from `react-aria-components`

coderabbitai · 2025-10-01T09:57:57Z

Walkthrough

This PR standardizes ARIA-related imports and dependencies. It adds ESLint no-restricted-imports rules to block direct imports from react-aria, react-stately, and react-aria-components, guiding usage to scoped packages and patched-dist entrypoints. Dependencies are updated: root removes react-aria and react-stately; core adds scoped @react-aria/, @react-stately/, and @react-types/shared, and switches react-aria-components to a patch link. Component files update imports to use @react-aria/interactions, @react-aria/overlays, @react-aria/tabs, @react-stately/, @react-types/shared, and react-aria-components/patched-dist/ paths. No runtime logic or public API changes.

Possibly related PRs

UI: Make preview Toolbar and core Bar implement the toolbar role #32270: Refactors Toolbar, Tabs, Preview, and related components to use scoped @react-aria/@react-stately packages and patched-dist react-aria-components, matching the import realignments here.

Suggested labels

maintenance, core

Suggested reviewers

ndelangen
yannbf

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly captures the primary objective of the changeset, namely reducing the distribution size by switching React Aria imports to targeted sub-packages, and is short and clear without extraneous detail.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch a11y-improved-size

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

nx-cloud · 2025-10-01T10:05:08Z

View your CI Pipeline Execution ↗ for commit 4a7671c

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	46s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-01 10:36:59 UTC

coderabbitai

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c7d91dc and 4a7671c.

⛔ Files ignored due to path filters (2)

code/.yarn/patches/react-aria-components-npm-1.12.2-6c5dcdafab.patch is excluded by !**/.yarn/**
code/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (19)

code/.eslintrc.js (1 hunks)
code/core/package.json (2 hunks)
code/core/src/components/components/Modal/Modal.styled.tsx (1 hunks)
code/core/src/components/components/Modal/Modal.tsx (1 hunks)
code/core/src/components/components/Popover/WithPopover.tsx (1 hunks)
code/core/src/components/components/Select/Select.tsx (1 hunks)
code/core/src/components/components/Tabs/StatelessTab.tsx (1 hunks)
code/core/src/components/components/Tabs/StatelessTabList.tsx (1 hunks)
code/core/src/components/components/Tabs/StatelessTabPanel.tsx (1 hunks)
code/core/src/components/components/Tabs/StatelessTabsView.tsx (1 hunks)
code/core/src/components/components/Tabs/TabList.tsx (1 hunks)
code/core/src/components/components/Tabs/TabPanel.stories.tsx (1 hunks)
code/core/src/components/components/Tabs/TabPanel.tsx (1 hunks)
code/core/src/components/components/Tabs/TabsView.tsx (1 hunks)
code/core/src/components/components/shared/overlayHelpers.tsx (1 hunks)
code/core/src/components/components/tooltip/WithTooltip.tsx (1 hunks)
code/core/src/manager/components/preview/Preview.tsx (1 hunks)
code/core/src/manager/components/preview/Toolbar.tsx (1 hunks)
code/package.json (0 hunks)

💤 Files with no reviewable changes (1)

code/package.json

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

code/core/src/components/components/Tabs/StatelessTabsView.tsx
code/core/src/components/components/Tabs/StatelessTabList.tsx
code/core/src/manager/components/preview/Toolbar.tsx
code/core/src/components/components/tooltip/WithTooltip.tsx
code/core/src/components/components/Tabs/TabList.tsx
code/core/src/components/components/Tabs/TabPanel.stories.tsx
code/core/src/components/components/Tabs/StatelessTab.tsx
code/core/src/components/components/shared/overlayHelpers.tsx
code/core/src/components/components/Tabs/StatelessTabPanel.tsx
code/core/src/components/components/Tabs/TabPanel.tsx
code/core/src/components/components/Popover/WithPopover.tsx
code/core/src/components/components/Modal/Modal.tsx
code/core/src/manager/components/preview/Preview.tsx
code/core/src/components/components/Modal/Modal.styled.tsx
code/core/src/components/components/Select/Select.tsx
code/core/src/components/components/Tabs/TabsView.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

code/core/src/components/components/Tabs/StatelessTabsView.tsx
code/core/src/components/components/Tabs/StatelessTabList.tsx
code/core/src/manager/components/preview/Toolbar.tsx
code/core/src/components/components/tooltip/WithTooltip.tsx
code/core/src/components/components/Tabs/TabList.tsx
code/core/src/components/components/Tabs/TabPanel.stories.tsx
code/core/src/components/components/Tabs/StatelessTab.tsx
code/core/src/components/components/shared/overlayHelpers.tsx
code/core/src/components/components/Tabs/StatelessTabPanel.tsx
code/core/src/components/components/Tabs/TabPanel.tsx
code/core/src/components/components/Popover/WithPopover.tsx
code/core/src/components/components/Modal/Modal.tsx
code/core/src/manager/components/preview/Preview.tsx
code/core/src/components/components/Modal/Modal.styled.tsx
code/core/src/components/components/Select/Select.tsx
code/core/src/components/components/Tabs/TabsView.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: normal
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (17)

code/.eslintrc.js (1)

41-58: ESLint rules align well with the PR objectives.

The three no-restricted-imports rules correctly enforce the migration strategy: blocking top-level react-aria and react-stately imports while directing developers to scoped packages, and steering react-aria-components usage to patched-dist entrypoints for better tree-shaking.

code/core/src/components/components/tooltip/WithTooltip.tsx (1)

7-11: Import migration looks correct.

The changes properly split the imports:

Focusable moved to @react-aria/interactions (correct scoped package)

Tooltip components moved to react-aria-components/patched-dist/Tooltip (aligns with ESLint rules and PR objectives)

Component behavior and type safety are preserved.

code/core/src/components/components/Tabs/StatelessTabsView.tsx (1)

7-7: Tabs import correctly migrated to patched-dist.

The import path change to react-aria-components/patched-dist/Tabs aligns with the PR's tree-shaking optimization strategy and ESLint rules.

code/core/src/components/components/shared/overlayHelpers.tsx (1)

5-5: Portal provider import correctly migrated to scoped package.

The change from react-aria to @react-aria/overlays for UNSAFE_PortalProvider is correct and aligns with the PR's migration to scoped packages.

code/core/src/components/components/Tabs/StatelessTabList.tsx (1)

8-8: TabList import correctly migrated to patched-dist.

The import path change to react-aria-components/patched-dist/Tabs is consistent with the other Tabs component migrations in this PR and aligns with the tree-shaking optimization goals.

code/core/src/components/components/Tabs/TabPanel.stories.tsx (1)

4-4: LGTM! Import path correctly updated to scoped package.

The TabListState type import has been correctly migrated from the umbrella react-stately package to the specific @react-stately/tabs package, reducing bundle size as intended by this PR.

code/core/src/manager/components/preview/Preview.tsx (1)

11-11: LGTM! Type import correctly migrated to scoped package.

The TabListState type import has been properly updated to use @react-stately/tabs, consistent with the bundle size optimization strategy.

code/core/src/components/components/Tabs/StatelessTab.tsx (1)

4-4: LGTM! Component import correctly uses patched distribution path.

The Tab component import has been updated to use the react-aria-components/patched-dist/Tabs path, avoiding the barrel file and reducing bundle size as intended.

code/core/src/components/components/Tabs/StatelessTabPanel.tsx (1)

6-6: LGTM! TabPanel import correctly migrated to patched distribution.

The TabPanel component import now uses the react-aria-components/patched-dist/Tabs path, consistent with the bundle size optimization strategy and avoiding barrel file imports.

code/core/src/manager/components/preview/Toolbar.tsx (1)

8-8: LGTM! Type import properly updated to scoped package.

The TabListState type import has been correctly migrated to @react-stately/tabs, aligning with the PR's bundle size optimization objectives.

code/core/src/components/components/Modal/Modal.tsx (1)

5-7: LGTM! Import migration looks correct.

The imports have been successfully migrated from top-level packages to scoped packages and patched-dist entrypoints, consistent with the PR's bundle-size optimization goal.

code/core/src/components/components/Select/Select.tsx (1)

9-12: LGTM! Scoped package imports correctly applied.

The overlay and interaction utilities have been successfully migrated to their respective scoped packages, maintaining the same API surface.

code/core/src/components/components/Modal/Modal.styled.tsx (1)

9-10: LGTM! Patched-dist imports correctly applied.

The Heading and Text components have been successfully migrated to patched-dist entrypoints, avoiding the barrel file import as intended.

code/core/src/components/components/Tabs/TabPanel.tsx (1)

6-8: LGTM! Scoped package imports correctly applied.

The tab-related imports have been successfully migrated to their respective scoped packages, maintaining type safety and runtime behavior.

code/core/src/components/components/Tabs/TabsView.tsx (1)

6-8: LGTM! Scoped package imports correctly applied.

The tabs state and collection imports have been successfully migrated to their respective scoped packages, maintaining the same functionality.

code/core/package.json (1)

232-239: LGTM: Scoped package additions align with bundle-size optimization.

The added scoped packages (@react-aria/interactions, @react-aria/overlays, @react-aria/tabs, @react-stately/overlays, @react-stately/tabs, @react-types/shared) use appropriate version ranges and match the latest stable releases. This granular approach should improve tree-shaking and reduce bundle size.

code/core/src/components/components/Tabs/TabList.tsx (1)

8-10: Verify migrated imports from scoped packages
Ensure @react-aria/tabs, @react-stately/tabs, and @react-types/shared are declared in package.json and actually export useTab, useTabList, TabListState, and Node before merging.

code/.eslintrc.js

code/core/package.json

code/core/src/components/components/Popover/WithPopover.tsx

storybook-app-bot · 2025-10-01T10:19:53Z

Package Benchmarks

^{Commit: 4a7671c, ran on 1 October 2025 at 10:19:49 UTC}

The following packages have significant changes to their size or dependencies:

`storybook`

	Before	After	Difference
Dependency count	44	44	0
Self size	34.77 MB	31.46 MB	🎉 -3.31 MB 🎉
Dependency size	17.33 MB	17.33 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	188	188	0
Self size	905 KB	905 KB	🎉 -84 B 🎉
Dependency size	84.42 MB	81.11 MB	🎉 -3.31 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	170	170	0
Self size	35 KB	35 KB	0 B
Dependency size	80.85 MB	77.54 MB	🎉 -3.31 MB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	45	45	0
Self size	1.55 MB	1.55 MB	0 B
Dependency size	52.10 MB	48.79 MB	🎉 -3.31 MB 🎉
Bundle Size Analyzer	node	node

Sidnioulz

Brilliant work! -3.31MB on the bundle size!

JReinhold added 2 commits October 1, 2025 10:16

import from specific @react-aria/X packages instead of react-aria…

50ddbf0

…. temporarily disable imports from `react-aria-components`

patch react-aria-components to improve it's treeshakeability

8fd064a

cleanup

aef475f

JReinhold assigned JReinhold and Sidnioulz Oct 1, 2025

JReinhold requested review from Sidnioulz and ndelangen October 1, 2025 10:04

JReinhold added the ci:normal label Oct 1, 2025

Merge branch 'a11y-consolidation' into a11y-improved-size

4a7671c

JReinhold marked this pull request as ready for review October 1, 2025 10:04

coderabbitai bot reviewed Oct 1, 2025

View reviewed changes

code/.eslintrc.js Show resolved Hide resolved

code/core/package.json Show resolved Hide resolved

code/core/src/components/components/Popover/WithPopover.tsx Show resolved Hide resolved

Sidnioulz approved these changes Oct 1, 2025

View reviewed changes

Sidnioulz mentioned this pull request Oct 1, 2025

chore: Dependency management RFC adobe/react-spectrum#8797

Merged

JReinhold merged commit d27eca2 into a11y-consolidation Oct 1, 2025
47 of 53 checks passed

JReinhold deleted the a11y-improved-size branch October 1, 2025 11:24

coderabbitai bot mentioned this pull request Oct 1, 2025

Core: Significantly improve Storybook's own accessibility #32458

Merged

25 tasks

dosubot bot mentioned this pull request Oct 10, 2025

[Bug]: SB9 - TypeError: Cannot set property blur of #<HTMLElement> which has only a getter #32696

Open

coderabbitai bot mentioned this pull request Nov 3, 2025

Core: Onboarding guide #32874

Merged

8 tasks

coderabbitai bot mentioned this pull request Dec 10, 2025

Core: Fix onboarding visual bugs, survey telemetry and modal dismissal #33326

Open

8 tasks

coderabbitai bot mentioned this pull request Dec 22, 2025

ESLint: Migrate to use 'import-x' plugin #33105

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

A11y: Improve dist size from React Aria #32594

A11y: Improve dist size from React Aria #32594

Uh oh!

JReinhold commented Oct 1, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

storybook-app-bot bot commented Oct 1, 2025

Uh oh!

Sidnioulz left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

A11y: Improve dist size from React Aria #32594

A11y: Improve dist size from React Aria #32594

Uh oh!

Conversation

JReinhold commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

nx-cloud bot commented Oct 1, 2025 • 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!

Uh oh!

storybook-app-bot bot commented Oct 1, 2025

Package Benchmarks

storybook

@storybook/cli

@storybook/codemod

create-storybook

Uh oh!

Sidnioulz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JReinhold commented Oct 1, 2025 •

edited

Loading

coderabbitai bot commented Oct 1, 2025 •

edited

Loading

nx-cloud bot commented Oct 1, 2025 •

edited

Loading

`storybook`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`