Addon-Docs: Edit JSON button is now accessible at 320x256 viewport (WCAG 2.1 Reflow test)

[TheSeydiCharyyev]

Closes #24149

Edit JSON button is now accessible at 320x256 viewport (WCAG 2.1 Reflow test).

Changes Made

• Added EditIcon to the Edit JSON button
• Changed button layout from position:absolute to flex layout
• Added media query to hide text on screens < 400px, showing only icon

Related Issue

Fixes #24149

Checklist

• Code compiles without errors
• TypeScript check passes
• Lint passes

Summary by CodeRabbit

• New Features

  • Edit button now shows an icon alongside its label for clearer affordance.
  • Added small-viewport examples demonstrating control behavior on narrow screens.

• Style

  • Button label hides on very small screens while keeping the icon visible for better mobile usability.
  • Controls reflow vertically on narrow screens with adjusted spacing and alignment.

• Accessibility

  • Improved handling of hidden labels to better support assistive technologies.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Replaces the Object control's plain "Edit JSON" trigger with an icon-plus-text button, adds responsive container-query and media-rule styling to reflow/hide text on small viewports, centralizes and exports an srOnlyStyles constant in theming and reuses it, and adds two small-viewport Storybook stories.

Changes

Cohort / File(s)	Summary
Object control UI code/addons/docs/src/blocks/controls/Object.tsx	Imported EditIcon and srOnlyStyles; added container query and max-width rules on wrapper, updated RawButton to add gap and switch from absolute to static positioning at small widths, hide inner <span> via srOnlyStyles, and render EditIcon + <span> instead of plain text.
Small-viewport stories code/addons/docs/src/blocks/controls/Object.stories.tsx	Added two Storybook stories (ObjectSmallViewport, ArraySmallViewport) that render example object/array at a 320px chromatic viewport and export them.
Theming — global export & reuse code/core/src/theming/global.ts	Introduced exported srOnlyStyles constant and refactored global styles to reuse it for .sb-sr-only, .sb-hidden-until-focus:not(:focus).
Theming — re-exports code/core/src/theming/index.ts, code/core/src/manager/globals/exports.ts	Added srOnlyStyles to the public re-exports/exports list, exposing the new theming symbol in the globalized exports.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing Touches

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

code/addons/docs/src/blocks/controls/Object.tsx (1)

254-266: ariaLabel implementation looks good, but spacing between icon and text needs explicit definition.

The ariaLabel with the dynamic name property correctly follows the Button component convention (extends ButtonProps). However, the RawButton styling doesn't explicitly define a gap between the EditIcon and span elements. Add explicit gap spacing to ensure consistent alignment:

const RawButton = styled(ToggleButton)({
  flexShrink: 0,
+  gap: '4px',

  // Hide text on small screens, show only icon for accessibility (WCAG 2.1 Reflow)
  '@media (max-width: 400px)': {
    '& > span': {
      display: 'none',
    },
  },
});

The ariaLabel properly ensures accessibility when text is hidden on small screens, and the icon+text pattern is sound.

[storybook-app-bot]

Package Benchmarks

^{Commit: f45870f, ran on 20 February 2026 at 06:15:49 UTC}

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

@storybook/addon-vitest

	Before	After	Difference
Dependency count	2	2	0
Self size	402 KB	379 KB	🎉 -23 KB 🎉
Dependency size	338 KB	338 KB	0 B
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	49	49	0
Self size	20.41 MB	20.39 MB	🎉 -23 KB 🎉
Dependency size	16.52 MB	16.52 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/preact-vite

	Before	After	Difference
Dependency count	14	14	0
Self size	13 KB	13 KB	🎉 -81 B 🎉
Dependency size	1.46 MB	1.45 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	779 KB	775 KB	🎉 -4 KB 🎉
Dependency size	67.64 MB	67.57 MB	🎉 -69 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	32 KB	30 KB	🎉 -2 KB 🎉
Dependency size	66.17 MB	66.14 MB	🎉 -23 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1000 KB	🎉 -44 KB 🎉
Dependency size	36.94 MB	36.92 MB	🎉 -23 KB 🎉
Bundle Size Analyzer	node	node

@storybook/preact

	Before	After	Difference
Dependency count	2	2	0
Self size	23 KB	16 KB	🎉 -7 KB 🎉
Dependency size	32 KB	32 KB	0 B
Bundle Size Analyzer	Link	Link

[valentinpalkovic]

Hi @TheSeydiCharyyev

Thank you for opening the PR!

As you can see here, it seems like the Edit JSON button will be displayed before the JSON, looking like an unintentional change. Could you please take a look and make sure the layout hasn't been swapped?

[TheSeydiCharyyev]

Hi @valentinpalkovic, I've updated the implementation based on your feedback.

On large screens, I restored the original position: absolute layout, so the Edit JSON button is back in the top-right corner as before.

On small screens (320×256, WCAG 2.1 Reflow), the wrapper switches to flex-direction: column, the button becomes position: static with align-self: flex-end, and the text is hidden so only the icon is shown.

The layout stays unchanged on normal screens while remaining accessible on small viewports.

[valentinpalkovic]

Great! Thanks for addressing the feedback. Could you add another set of stories for /?path=/story/addons-docs-blocks-controls-object to set the viewport to a smaller screen, so that we have Chromatic coverage for those? (https://www.chromatic.com/docs/modes/viewports/)

I would like to get a design review from @MichaelArestad. Questions:

• WDYT about this adjustment in general?
• Should the edit icon also be shown by default for large screens?

[TheSeydiCharyyev]

Thanks! I will add the small viewport stories for Chromatic coverage.
About your questions:

1. I think column layout works good for small screens and keeps the original look on big screens.
2. I think "Edit JSON" text should stay visible on large screens because there is enough space.
   I will push the update soon.

[TheSeydiCharyyev]

I added small viewport stories (320px) for Chromatic coverage.

[Sidnioulz]

Thanks for tackling this ❤️

We need a few changes to preserve the screenreader experience and to make your change apply more broadly.

Please re-request a review once you've made the changes. Thanks!

[Sidnioulz]

Could you also add a container query?, and then add the below media query as a backup for users without container query support?

import { css } from 'storybook/theming'

const styles = css`
  @supports (container-type: inline-size) {
    container-type: inline-size;

    @container (max-width: 400px) {
      // your css here
    }
  }
`

This will help the change happen more often when needed.

[Sidnioulz]

We can't entirely hide the text, or screen readers will fail to properly announce the edit button.

We have a sb-sr-only class available in code/core/src/theming/global.ts. Could you try to export the CSSObject defined for that class and then to inject it to your style here?

e.g.

import { srOnlyStyles } from '../../../ ... ' // or maybe from 'storybook/theming';

'@media (max-width: 400px)': {
  // ...
  '& > span': srOnlyStyles,
}

@ndelangen would you object to us exporting our screenreader-only class in storybook/theming to simplify this kind of use case? It's definitely a piece of code we'll keep very long term, and one which we're unlikely to ever need to adjust.

[TheSeydiCharyyev]

Thanks for the review @Sidnioulz!

I have made the requested changes:

• Replaced "display: none" with screen-reader-only styles so the button text remains accessible to screen readers.
• Exported "srOnlyStyles" from storybook/theming (extracted from the existing ".sb-sr-only" class in "global.ts")
• Added a "@container" query as the primary responsive rule, with the "@media" query as a fallback for browsers without container query support.
• Added "container-type: inline-size" (inside "@supports") to the Wrapper component.