Merge pull request storybookjs#33923 from storybookjs/sidnioulz/object-code-debt

Controls: Fix Object contrast issue and tidy up code

Author: Sidnioulz

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

@@ -1,21 +1,19 @@
-import type { ComponentProps, FC, FocusEvent, SyntheticEvent } from 'react';
+import type { FC, FocusEvent, SyntheticEvent } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, Form, ToggleButton } from 'storybook/internal/components';
 
 import { AddIcon, SubtractIcon } from '@storybook/icons';
 
 import { cloneDeep } from 'es-toolkit/object';
-import { type Theme, styled, useTheme } from 'storybook/theming';
+import { styled, useTheme } from 'storybook/theming';
 
 import { getControlId, getControlSetterButtonId } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectConfig, ObjectValue } from './types';
 
 const { window: globalWindow } = globalThis;
 
-type JsonTreeProps = ComponentProps<typeof JsonTree>;
-
 const Wrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
@@ -39,8 +37,14 @@ const Wrapper = styled.div(({ theme }) => ({
     alignItems: 'center',
   },
   '.rejt-name': {
+    color: theme.color.secondary,
     lineHeight: '22px',
   },
+  '.rejt-not-collapsed-list': {
+    listStyle: 'none',
+    margin: '0 0 0 1rem',
+    padding: 0,
+  },
   '.rejt-not-collapsed-delimiter': {
     lineHeight: '22px',
   },
@@ -57,6 +61,9 @@ const Wrapper = styled.div(({ theme }) => ({
     background: theme.base === 'light' ? theme.color.lighter : 'hsl(0 0 100 / 0.02)',
     borderColor: theme.appBorderColor,
   },
+  '.rejt-collapsed-value': {
+    color: theme.color.defaultText,
+  },
 }));
 
 const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) => ({
@@ -155,23 +162,6 @@ const selectValue = (event: SyntheticEvent<HTMLInputElement>) => {
 
 export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
 
-const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (theme) => () => ({
-  name: {
-    color: theme.color.secondary,
-  },
-  collapsed: {
-    color: theme.color.dark,
-  },
-  ul: {
-    listStyle: 'none',
-    margin: '0 0 0 1rem',
-    padding: 0,
-  },
-  li: {
-    outline: 0,
-  },
-});
-
 export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
@@ -266,7 +256,6 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
           data={data}
           rootName={name}
           onFullyUpdate={onChange}
-          getStyle={getCustomStyleFunction(theme)}
           cancelButtonElement={<ButtonInline type="button">Cancel</ButtonInline>}
           addButtonElement={
             <ButtonInline type="submit" primary>

code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx

@@ -99,7 +99,7 @@ export function JsonNodeAccordion({
         {name} :
       </Trigger>
       <Region
-        role="region"
+        role="group"
         id={ids.region}
         aria-labelledby={ids.trigger}
         className="rejt-accordion-region"