Fix for #24149 - Edit JSON button is now accessible at 320x256 viewport (WCAG 2.1 Reflow test)

[TheSeydiCharyyev]

Description

Fix for #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

  • Added an icon to the Edit button in the Object control for clearer affordance.
  • Button label now hides text on very small screens while keeping the icon visible, improving mobile usability.

• Style

  • Controls layout updated to allow wrapping and ensure better responsive behavior and accessibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Reworked the Object control's Edit JSON button: replaced absolute-positioned text with an inline icon-plus-text layout, enabled wrapping for children, and added responsive styling to hide the button text on very small screens while keeping the icon visible.

Changes

Cohort / File(s)	Summary
Object Control Button Styling code/addons/docs/src/blocks/controls/Object.tsx	Imported EditIcon; changed wrapper to flexWrap: 'wrap'; removed absolute positioning and z-index from the RawButton; added flexShrink: 0, gap: 4px; replaced plain "Edit JSON" text with an EditIcon + <span> and added responsive rule to hide the text on small screens (WCAG reflow).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

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.