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,7 +3,7 @@ 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 { styled, useTheme } from 'storybook/theming';
@@ -18,8 +18,10 @@ const Wrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   isolation: 'isolate',
+  gap: 8,
 
   '.rejt-tree': {
+    flex: 1,
     marginLeft: '1rem',
     fontSize: '13px',
     listStyleType: 'none',
@@ -125,10 +127,9 @@ const Input = styled.input(({ theme, placeholder }) => ({
 }));
 
 const RawButton = styled(ToggleButton)({
-  position: 'absolute',
-  zIndex: 2,
-  top: 2,
-  right: 2,
+  alignSelf: 'flex-start',
+  order: 2,
+  marginRight: -10,
 });
 
 const RawInput = styled(Form.Textarea)(({ theme }) => ({
@@ -188,7 +189,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const onForceVisible = useCallback(() => {
     onChange({});
     setForceVisible(true);
-  }, [setForceVisible]);
+  }, [onChange, setForceVisible]);
 
   const htmlElRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
@@ -240,13 +241,16 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
         <RawButton
           disabled={readonly}
           pressed={showRaw}
-          ariaLabel={`Edit the ${name} properties in JSON format`}
+          ariaLabel={`Edit ${name} as JSON`}
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
             setShowRaw((isRaw) => !isRaw);
           }}
+          variant="ghost"
+          padding="small"
+          size="small"
         >
-          Edit JSON
+          <EditIcon />
         </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';