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

code/addons/docs/src/blocks/controls/Object.stories.tsx

@@ -112,3 +112,31 @@ export const ReadonlyAndUndefined: Story = {
     argType: { table: { readonly: true } },
   },
 };
+
+export const ObjectSmallViewport: Story = {
+  args: {
+    value: {
+      name: 'Michael',
+      someDate: new Date('2022-10-30T12:31:11'),
+      nested: { someBool: true, someNumber: 22 },
+    },
+  },
+  parameters: {
+    chromatic: { viewports: [320] },
+  },
+};
+
+export const ArraySmallViewport: Story = {
+  args: {
+    value: [
+      'someString',
+      22,
+      true,
+      new Date('2022-10-30T12:31:11'),
+      { someBool: true, someNumber: 22 },
+    ],
+  },
+  parameters: {
+    chromatic: { viewports: [320] },
+  },
+};

code/addons/docs/src/blocks/controls/Object.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button, Form, ToggleButton } from 'storybook/internal/components';
 
-import { AddIcon, SubtractIcon } from '@storybook/icons';
+import { AddIcon, EditIcon, SubtractIcon } from '@storybook/icons';
 
 import { cloneDeep } from 'es-toolkit/object';
-import { type Theme, styled, useTheme } from 'storybook/theming';
+import { type Theme, styled, useTheme, srOnlyStyles } from 'storybook/theming';
 
 import { getControlId, getControlSetterButtonId } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
@@ -21,6 +21,15 @@ const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
   isolation: 'isolate',
 
+  // Enable container queries for child responsive styles
+  '@supports (container-type: inline-size)': {
+    containerType: 'inline-size',
+  },
+
+  '@media (max-width: 400px)': {
+    flexDirection: 'column' as const,
+  },
+
   '.rejt-tree': {
     marginLeft: '1rem',
     fontSize: '13px',
@@ -122,6 +131,21 @@ const RawButton = styled(ToggleButton)({
   zIndex: 2,
   top: 2,
   right: 2,
+  gap: '4px',
+
+  // Container query: respond to component width (WCAG 2.1 Reflow)
+  '@container (max-width: 400px)': {
+    position: 'static',
+    alignSelf: 'flex-end',
+    '& > span': srOnlyStyles,
+  },
+
+  // Fallback for browsers without container query support
+  '@media (max-width: 400px)': {
+    position: 'static',
+    alignSelf: 'flex-end',
+    '& > span': srOnlyStyles,
+  },
 });
 
 const RawInput = styled(Form.Textarea)(({ theme }) => ({
@@ -256,7 +280,8 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
             setShowRaw((isRaw) => !isRaw);
           }}
         >
-          Edit JSON
+          <EditIcon />
+          <span>Edit JSON</span>
         </RawButton>
       )}
       {!showRaw ? (

code/core/src/manager/globals/exports.ts

@@ -380,6 +380,7 @@ export default {
     'jsx',
     'keyframes',
     'lighten',
+    'srOnlyStyles',
     'styled',
     'themes',
     'tokens',

code/core/src/theming/global.ts

@@ -9,6 +9,19 @@ interface Return {
   };
 }
 
+export const srOnlyStyles = {
+  position: 'absolute' as const,
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap' as const,
+  clip: 'rect(0, 0, 0, 0)',
+  clipPath: 'inset(50%)',
+  border: 0,
+};
+
 export const createReset = memoize(1)(
   ({ typography }: { typography: Typography }): Return => ({
     body: {
@@ -112,18 +125,7 @@ export const createGlobal = memoize(1)(({
       borderTop: `1px solid ${color.border}`,
     },
 
-    '.sb-sr-only, .sb-hidden-until-focus:not(:focus)': {
-      position: 'absolute',
-      width: 1,
-      height: 1,
-      padding: 0,
-      margin: -1,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      clip: 'rect(0, 0, 0, 0)',
-      clipPath: 'inset(50%)',
-      border: 0,
-    },
+    '.sb-sr-only, .sb-hidden-until-focus:not(:focus)': srOnlyStyles,
 
     '.sb-hidden-until-focus': {
       opacity: 0,

code/core/src/theming/index.ts

@@ -33,7 +33,7 @@ export * from './types';
 export { default as createCache } from '@emotion/cache';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
-export { createGlobal, createReset } from './global';
+export { createGlobal, createReset, srOnlyStyles } from './global';
 export * from './create';
 export * from './convert';
 export * from './ensure';