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

📝 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

---

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: 1129728, ran on 2 March 2026 at 08:51:15 UTC}

No significant changes detected, all good. 👏

[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!

[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.

[valentinpalkovic]

Hi @TheSeydiCharyyev

Thank you so much for the iteration. Would you mind fixing the Eslint/Prettier errors?