diff --git a/code/addons/docs/src/blocks/controls/Object.tsx b/code/addons/docs/src/blocks/controls/Object.tsx
index 26194fa048d7..27f82b34815c 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -27,22 +27,12 @@ const Wrapper = styled.div(({ theme }) => ({
   '.rejt-tree': {
     marginLeft: '1rem',
     fontSize: '13px',
+    listStyleType: 'none',
   },
-  '.rejt-value-node, .rejt-object-node > .rejt-collapsed, .rejt-array-node > .rejt-collapsed, .rejt-object-node > .rejt-not-collapsed, .rejt-array-node > .rejt-not-collapsed':
-    {
-      '& > svg': {
-        opacity: 0,
-        transition: 'opacity 0.2s',
-      },
+  '.rejt-value-node:hover': {
+    '& > button': {
+      opacity: 1,
     },
-  '.rejt-value-node:hover, .rejt-object-node:hover > .rejt-collapsed, .rejt-array-node:hover > .rejt-collapsed, .rejt-object-node:hover > .rejt-not-collapsed, .rejt-array-node:hover > .rejt-not-collapsed':
-    {
-      '& > svg': {
-        opacity: 1,
-      },
-    },
-  '.rejt-edit-form button': {
-    display: 'none',
   },
   '.rejt-add-form': {
     marginLeft: 10,
@@ -57,62 +47,6 @@ const Wrapper = styled.div(({ theme }) => ({
   '.rejt-not-collapsed-delimiter': {
     lineHeight: '22px',
   },
-  '.rejt-plus-menu': {
-    marginLeft: 5,
-  },
-  '.rejt-object-node > span > *, .rejt-array-node > span > *': {
-    position: 'relative',
-    zIndex: 2,
-  },
-  '.rejt-object-node, .rejt-array-node': {
-    position: 'relative',
-  },
-  '.rejt-object-node > span:first-of-type::after, .rejt-array-node > span:first-of-type::after, .rejt-collapsed::before, .rejt-not-collapsed::before':
-    {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      display: 'block',
-      width: '100%',
-      marginLeft: '-1rem',
-      padding: '0 4px 0 1rem',
-      height: 22,
-    },
-  '.rejt-collapsed::before, .rejt-not-collapsed::before': {
-    zIndex: 1,
-    background: 'transparent',
-    borderRadius: 4,
-    transition: 'background 0.2s',
-    pointerEvents: 'none',
-    opacity: 0.1,
-  },
-  '.rejt-object-node:hover, .rejt-array-node:hover': {
-    '& > .rejt-collapsed::before, & > .rejt-not-collapsed::before': {
-      background: theme.color.secondary,
-    },
-  },
-  '.rejt-collapsed::after, .rejt-not-collapsed::after': {
-    content: '""',
-    position: 'absolute',
-    display: 'inline-block',
-    pointerEvents: 'none',
-    width: 0,
-    height: 0,
-  },
-  '.rejt-collapsed::after': {
-    left: -8,
-    top: 8,
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    borderLeft: '3px solid rgba(153,153,153,0.6)',
-  },
-  '.rejt-not-collapsed::after': {
-    left: -10,
-    top: 10,
-    borderTop: '3px solid rgba(153,153,153,0.6)',
-    borderLeft: '3px solid transparent',
-    borderRight: '3px solid transparent',
-  },
   '.rejt-value': {
     display: 'inline-block',
     border: '1px solid transparent',
@@ -137,36 +71,37 @@ const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) =
   color: primary ? theme.color.lightest : theme.color.dark,
   fontWeight: primary ? 'bold' : 'normal',
   cursor: 'pointer',
-  order: primary ? 'initial' : 9,
 }));
 
-const ActionAddIcon = styled(AddIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
-  display: 'inline-block',
+const ActionButton = styled.button(({ theme }) => ({
+  background: 'none',
+  border: 0,
+  display: 'inline-flex',
   verticalAlign: 'middle',
-  width: 15,
-  height: 15,
   padding: 3,
   marginLeft: 5,
-  cursor: disabled ? 'not-allowed' : 'pointer',
   color: theme.textMutedColor,
-  '&:hover': disabled ? {} : { color: theme.color.ancillary },
-  'svg + &': {
-    marginLeft: 0,
+  opacity: 0,
+  transition: 'opacity 0.2s',
+  cursor: 'pointer',
+  position: 'relative',
+  svg: {
+    width: 9,
+    height: 9,
   },
-}));
-
-const ActionSubstractIcon = styled(SubtractIcon)<{ disabled?: boolean }>(({ theme, disabled }) => ({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  width: 15,
-  height: 15,
-  padding: 3,
-  marginLeft: 5,
-  cursor: disabled ? 'not-allowed' : 'pointer',
-  color: theme.textMutedColor,
-  '&:hover': disabled ? {} : { color: theme.color.negative },
-  'svg + &': {
-    marginLeft: 0,
+  ':disabled': {
+    cursor: 'not-allowed',
+  },
+  ':hover, :focus-visible': {
+    opacity: 1,
+  },
+  '&:hover:not(:disabled), &:focus-visible:not(:disabled)': {
+    '&.rejt-plus-menu': {
+      color: theme.color.ancillary,
+    },
+    '&.rejt-minus-menu': {
+      color: theme.color.negative,
+    },
   },
 }));
 
@@ -220,7 +155,13 @@ const RawInput = styled(Form.Textarea)(({ theme }) => ({
   },
 }));
 
-const ENTER_EVENT = { bubbles: true, cancelable: true, key: 'Enter', code: 'Enter', keyCode: 13 };
+const ENTER_EVENT = {
+  bubbles: true,
+  cancelable: true,
+  key: 'Enter',
+  code: 'Enter',
+  keyCode: 13,
+};
 const dispatchEnterKey = (event: SyntheticEvent<HTMLInputElement>) => {
   event.currentTarget.dispatchEvent(new globalWindow.KeyboardEvent('keydown', ENTER_EVENT));
 };
@@ -311,9 +252,12 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
     <Wrapper aria-readonly={readonly}>
       {isObjectOrArray && (
         <RawButton
+          role="switch"
+          aria-checked={showRaw}
+          aria-label={`Edit the ${name} properties in text format`}
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
-            setShowRaw((v) => !v);
+            setShowRaw((isRaw) => !isRaw);
           }}
         >
           {showRaw ? <EyeCloseIcon /> : <EyeIcon />}
@@ -329,14 +273,21 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
           onFullyUpdate={onChange}
           getStyle={getCustomStyleFunction(theme)}
           cancelButtonElement={<ButtonInline type="button">Cancel</ButtonInline>}
-          editButtonElement={<ButtonInline type="submit">Save</ButtonInline>}
           addButtonElement={
             <ButtonInline type="submit" primary>
               Save
             </ButtonInline>
           }
-          plusMenuElement={<ActionAddIcon />}
-          minusMenuElement={<ActionSubstractIcon />}
+          plusMenuElement={
+            <ActionButton type="button">
+              <AddIcon />
+            </ActionButton>
+          }
+          minusMenuElement={
+            <ActionButton type="button">
+              <SubtractIcon />
+            </ActionButton>
+          }
           inputElement={(_: any, __: any, ___: any, key: string) =>
             key ? <Input onFocus={selectValue} onBlur={dispatchEnterKey} /> : <Input />
           }
diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
new file mode 100644
index 000000000000..75da2a484b41
--- /dev/null
+++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodeAccordion.tsx
@@ -0,0 +1,111 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import React from 'react';
+
+import { styled } from 'storybook/theming';
+
+const Container = styled.div(({ theme }) => ({
+  position: 'relative',
+  ':hover': {
+    '& > .rejt-accordion-button::after': {
+      background: theme.color.secondary,
+    },
+    '& > .rejt-accordion-region > :is(.rejt-plus-menu, .rejt-minus-menu)': {
+      opacity: 1,
+    },
+  },
+}));
+
+const Trigger = styled.button(({ theme }) => ({
+  padding: 0,
+  background: 'transparent',
+  border: 'none',
+  marginRight: '3px',
+  lineHeight: '22px',
+  color: theme.color.secondary,
+  '::after': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    display: 'block',
+    width: '100%',
+    marginLeft: '-1rem',
+    height: '22px',
+    background: 'transparent',
+    borderRadius: 4,
+    transition: 'background 0.2s',
+    opacity: 0.1,
+    paddingRight: '20px',
+  },
+  '::before': {
+    content: '""',
+    position: 'absolute',
+  },
+  '&[aria-expanded="true"]::before': {
+    left: -10,
+    top: 10,
+    borderTop: '3px solid rgba(153,153,153,0.6)',
+    borderLeft: '3px solid transparent',
+    borderRight: '3px solid transparent',
+  },
+  '&[aria-expanded="false"]::before': {
+    left: -8,
+    top: 8,
+    borderTop: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderLeft: '3px solid rgba(153,153,153,0.6)',
+  },
+}));
+
+const Region = styled.div({
+  display: 'inline',
+});
+
+type AccordionProps = {
+  name: string;
+  keyPath: string[];
+  collapsed: boolean;
+  deep: number;
+} & ComponentPropsWithoutRef<'button'>;
+
+export function JsonNodeAccordion({
+  children,
+  name,
+  collapsed,
+  keyPath,
+  deep,
+  ...props
+}: AccordionProps) {
+  const parentPropertyName = keyPath.at(-1) ?? 'root';
+
+  const accordionKey = `${parentPropertyName}-${name}-${deep}`;
+
+  const ids = {
+    trigger: `${accordionKey}-trigger`,
+    region: `${accordionKey}-region`,
+  };
+
+  const containerTag = keyPath.length > 0 ? 'li' : 'div';
+
+  return (
+    <Container as={containerTag}>
+      <Trigger
+        type="button"
+        aria-expanded={!collapsed}
+        id={ids.trigger}
+        aria-controls={ids.region}
+        className="rejt-accordion-button"
+        {...props}
+      >
+        {name} :
+      </Trigger>
+      <Region
+        role="region"
+        id={ids.region}
+        aria-labelledby={ids.trigger}
+        className="rejt-accordion-region"
+      >
+        {children}
+      </Region>
+    </Container>
+  );
+}
diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
index 58efa33928d5..9933b5c3edb3 100644
--- a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
+++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx
@@ -2,6 +2,7 @@
 import type { ReactElement } from 'react';
 import React, { Component, cloneElement } from 'react';
 
+import { JsonNodeAccordion } from './JsonNodeAccordion';
 import * as dataTypes from './types/dataTypes';
 import * as deltaTypes from './types/deltaTypes';
 import * as inputUsageTypes from './types/inputUsageTypes';
@@ -37,12 +38,6 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
     if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') {
       inputRefValue.focus();
     }
-
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
   }
 
   onKeydown(event: KeyboardEvent) {
@@ -51,10 +46,15 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
     }
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
+
       this.onSubmit();
+
+      return;
     }
+
     if (event.code === 'Escape' || event.key === 'Escape') {
       event.preventDefault();
+
       this.props.handleCancel();
     }
   }
@@ -111,6 +111,7 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
     const inputElementValueLayout = cloneElement(inputElementValue, {
       placeholder: 'Value',
       ref: this.refInputValue,
+      onKeyDown: this.onKeydown,
     });
     let inputElementKeyLayout = null;
 
@@ -119,6 +120,7 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
       inputElementKeyLayout = cloneElement(inputElementKey, {
         placeholder: 'Key',
         ref: this.refInputKey,
+        onKeyDown: this.onKeydown,
       });
     }
 
@@ -126,8 +128,8 @@ export class JsonAddValue extends Component<JsonAddValueProps, JsonAddValueState
       <span className="rejt-add-value-node">
         {inputElementKeyLayout}
         {inputElementValueLayout}
-        {cancelButtonElementLayout}
         {addButtonElementLayout}
+        {cancelButtonElementLayout}
       </span>
     );
   }
@@ -155,8 +157,8 @@ JsonAddValue.defaultProps = {
 interface JsonArrayState {
   data: JsonArrayProps['data'];
   name: JsonArrayProps['name'];
-  keyPath: string[];
-  deep: JsonArrayProps['deep'];
+  keyPath: Exclude<JsonArrayProps['keyPath'], undefined>;
+  deep: Exclude<JsonArrayProps['deep'], undefined>;
   nextDeep: JsonArrayProps['deep'];
   collapsed: any;
   addFormVisible: boolean;
@@ -168,7 +170,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
     this.state = {
       data: props.data,
       name: props.name,
-      keyPath,
+      keyPath: keyPath ?? [],
       deep: props.deep ?? 0,
       nextDeep: (props.deep ?? 0) + 1,
       collapsed: props.isCollapsed(keyPath, props.deep ?? 0, props.data),
@@ -330,15 +332,16 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
+        'aria-label': `remove the array '${name}'`,
       });
 
     return (
-      <span className="rejt-collapsed">
-        <span className="rejt-collapsed-text" style={collapsed} onClick={this.handleCollapseMode}>
+      <>
+        <span style={collapsed}>
           [...] {data.length} {data.length === 1 ? 'item' : 'items'}
         </span>
         {!isReadOnly && removeItemButton}
-      </span>
+      </>
     );
   }
 
@@ -353,7 +356,6 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
       dataType,
       addButtonElement,
       cancelButtonElement,
-      editButtonElement,
       inputElementGenerator,
       textareaElementGenerator,
       minusMenuElement,
@@ -374,6 +376,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: this.handleAddMode,
         className: 'rejt-plus-menu',
         style: plus,
+        'aria-label': `add a new item to the '${name}' array`,
       });
     const removeItemButton =
       minusMenuElement &&
@@ -381,13 +384,14 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
+        'aria-label': `remove the array '${name}'`,
       });
 
     const onlyValue = true;
     const startObject = '[';
     const endObject = ']';
     return (
-      <span className="rejt-not-collapsed">
+      <>
         <span className="rejt-not-collapsed-delimiter" style={delimiter}>
           {startObject}
         </span>
@@ -409,7 +413,6 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
               getStyle={getStyle}
               addButtonElement={addButtonElement}
               cancelButtonElement={cancelButtonElement}
-              editButtonElement={editButtonElement}
               inputElementGenerator={inputElementGenerator}
               textareaElementGenerator={textareaElementGenerator}
               minusMenuElement={minusMenuElement}
@@ -441,25 +444,24 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
           {endObject}
         </span>
         {!isReadOnly && removeItemButton}
-      </span>
+      </>
     );
   }
 
   render() {
-    const { name, collapsed, data, keyPath, deep } = this.state;
-    const { dataType, getStyle } = this.props;
+    const { name, collapsed, keyPath, deep } = this.state;
     const value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
-    const style = getStyle(name, data, keyPath, deep, dataType);
 
     return (
-      <div className="rejt-array-node">
-        <span onClick={this.handleCollapseMode}>
-          <span className="rejt-name" style={style.name}>
-            {name} :{' '}
-          </span>
-        </span>
+      <JsonNodeAccordion
+        name={name}
+        collapsed={collapsed}
+        deep={deep}
+        keyPath={keyPath}
+        onClick={this.handleCollapseMode}
+      >
         {value}
-      </div>
+      </JsonNodeAccordion>
     );
   }
 }
@@ -478,7 +480,6 @@ interface JsonArrayProps {
   getStyle: (...args: any) => any;
   addButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
-  editButtonElement?: ReactElement;
   inputElementGenerator: (...args: any) => any;
   textareaElementGenerator: (...args: any) => any;
   minusMenuElement?: ReactElement;
@@ -501,8 +502,8 @@ JsonArray.defaultProps = {
 interface JsonFunctionValueState {
   value: JsonFunctionValueProps['value'];
   name: JsonFunctionValueProps['name'];
-  keyPath: string[];
-  deep: JsonFunctionValueProps['deep'];
+  keyPath: Exclude<JsonFunctionValueProps['keyPath'], undefined>;
+  deep: Exclude<JsonFunctionValueProps['deep'], undefined>;
   editEnabled: boolean;
   inputRef: any;
 }
@@ -514,8 +515,8 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
     this.state = {
       value: props.value,
       name: props.name,
-      keyPath,
-      deep: props.deep,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
       editEnabled: false,
       inputRef: null,
     };
@@ -542,24 +543,21 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
     }
   }
 
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
-  }
-
   onKeydown(event: KeyboardEvent) {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) {
       return;
     }
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
+
       this.handleEdit();
+
+      return;
     }
+
     if (event.code === 'Escape' || event.key === 'Escape') {
       event.preventDefault();
+
       this.handleCancelEdit();
     }
   }
@@ -615,11 +613,9 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
       readOnly,
       dataType,
       getStyle,
-      editButtonElement,
-      cancelButtonElement,
       textareaElementGenerator,
       minusMenuElement,
-      keyPath: comeFromKeyPath,
+      keyPath: comeFromKeyPath = [],
     } = this.props;
 
     const style = getStyle(name, originalValue, keyPath, deep, dataType);
@@ -637,25 +633,15 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
         dataType
       );
 
-      const editButtonElementLayout =
-        editButtonElement &&
-        cloneElement(editButtonElement, {
-          onClick: this.handleEdit,
-        });
-      const cancelButtonElementLayout =
-        cancelButtonElement &&
-        cloneElement(cancelButtonElement, {
-          onClick: this.handleCancelEdit,
-        });
       const textareaElementLayout = cloneElement(textareaElement, {
         ref: this.refInput,
-        defaultValue: originalValue,
+        defaultValue: value,
+        onKeyDown: this.onKeydown,
       });
 
       result = (
         <span className="rejt-edit-form" style={style.editForm}>
-          {textareaElementLayout} {cancelButtonElementLayout}
-          {editButtonElementLayout}
+          {textareaElementLayout}
         </span>
       );
       minusElement = null;
@@ -669,18 +655,24 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
           {value}
         </span>
       );
+
+      const parentPropertyName = comeFromKeyPath.at(-1);
+
       const minusMenuLayout =
         minusMenuElement &&
         cloneElement(minusMenuElement, {
           onClick: handleRemove,
           className: 'rejt-minus-menu',
           style: style.minus,
+          'aria-label': `remove the function '${name}'${
+            parentPropertyName ? ` from '${parentPropertyName}'` : ''
+          }`,
         });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
     }
 
     return (
-      <li className="rejt-function-value-node" style={style.li}>
+      <li className="rejt-value-node" style={style.li}>
         <span className="rejt-name" style={style.name}>
           {name} :{' '}
         </span>
@@ -702,7 +694,6 @@ interface JsonFunctionValueProps {
   readOnly: (...args: any) => any;
   dataType?: string;
   getStyle: (...args: any) => any;
-  editButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
   textareaElementGenerator: (...args: any) => any;
   minusMenuElement?: ReactElement;
@@ -715,7 +706,6 @@ JsonFunctionValue.defaultProps = {
   keyPath: [],
   deep: 0,
   handleUpdateValue: () => {},
-  editButtonElement: <button>e</button>,
   cancelButtonElement: <button>c</button>,
   minusMenuElement: <span> - </span>,
 };
@@ -723,8 +713,8 @@ JsonFunctionValue.defaultProps = {
 interface JsonNodeState {
   data: JsonNodeProps['data'];
   name: JsonNodeProps['name'];
-  keyPath: JsonNodeProps['keyPath'];
-  deep: JsonNodeProps['deep'];
+  keyPath: Exclude<JsonNodeProps['keyPath'], undefined>;
+  deep: Exclude<JsonNodeProps['deep'], undefined>;
 }
 
 export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
@@ -733,8 +723,8 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
     this.state = {
       data: props.data,
       name: props.name,
-      keyPath: props.keyPath,
-      deep: props.deep,
+      keyPath: props.keyPath ?? [],
+      deep: props.deep ?? 0,
     };
   }
 
@@ -754,7 +744,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
       getStyle,
       addButtonElement,
       cancelButtonElement,
-      editButtonElement,
       inputElementGenerator,
       textareaElementGenerator,
       minusMenuElement,
@@ -785,7 +774,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             getStyle={getStyle}
             addButtonElement={addButtonElement}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             textareaElementGenerator={textareaElementGenerator}
             minusMenuElement={minusMenuElement}
@@ -813,7 +801,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             getStyle={getStyle}
             addButtonElement={addButtonElement}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             textareaElementGenerator={textareaElementGenerator}
             minusMenuElement={minusMenuElement}
@@ -841,7 +828,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             getStyle={getStyle}
             addButtonElement={addButtonElement}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             textareaElementGenerator={textareaElementGenerator}
             minusMenuElement={minusMenuElement}
@@ -867,7 +853,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -888,7 +873,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -909,7 +893,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -930,7 +913,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -951,7 +933,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -972,7 +953,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -993,7 +973,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             textareaElementGenerator={textareaElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -1014,7 +993,6 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             dataType={dataType}
             getStyle={getStyle}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementGenerator}
             minusMenuElement={minusMenuElement}
             logger={logger}
@@ -1041,7 +1019,6 @@ interface JsonNodeProps {
   getStyle: (...args: any) => any;
   addButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
-  editButtonElement?: ReactElement;
   inputElementGenerator: (...args: any) => any;
   textareaElementGenerator: (...args: any) => any;
   minusMenuElement?: ReactElement;
@@ -1063,8 +1040,8 @@ interface JsonObjectState {
   name: string;
   collapsed: ReturnType<JsonObjectProps['isCollapsed']>;
   data: JsonObjectProps['data'];
-  keyPath: JsonObjectProps['keyPath'];
-  deep: JsonObjectProps['deep'];
+  keyPath: Exclude<JsonObjectProps['keyPath'], undefined>;
+  deep: Exclude<JsonObjectProps['deep'], undefined>;
   nextDeep: number;
   addFormVisible: boolean;
 }
@@ -1076,7 +1053,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     this.state = {
       name: props.name,
       data: props.data,
-      keyPath,
+      keyPath: keyPath ?? [],
       deep: props.deep ?? 0,
       nextDeep: (props.deep ?? 0) + 1,
       collapsed: props.isCollapsed(keyPath, props.deep ?? 0, props.data),
@@ -1239,15 +1216,16 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
+        'aria-label': `remove the object '${name}'`,
       });
 
     return (
-      <span className="rejt-collapsed">
-        <span className="rejt-collapsed-text" style={collapsed} onClick={this.handleCollapseMode}>
+      <>
+        <span style={collapsed}>
           {'{...}'} {keyList.length} {keyList.length === 1 ? 'key' : 'keys'}
         </span>
         {!isReadOnly && removeItemButton}
-      </span>
+      </>
     );
   }
 
@@ -1262,7 +1240,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
       dataType,
       addButtonElement,
       cancelButtonElement,
-      editButtonElement,
       inputElementGenerator,
       textareaElementGenerator,
       minusMenuElement,
@@ -1285,6 +1262,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: this.handleAddMode,
         className: 'rejt-plus-menu',
         style: plus,
+        'aria-label': `add a new property to the object '${name}'`,
       });
     const removeItemButton =
       minusMenuElement &&
@@ -1292,6 +1270,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
+        'aria-label': `remove the object '${name}'`,
       });
 
     const list = keyList.map((key) => (
@@ -1310,7 +1289,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         getStyle={getStyle}
         addButtonElement={addButtonElement}
         cancelButtonElement={cancelButtonElement}
-        editButtonElement={editButtonElement}
         inputElementGenerator={inputElementGenerator}
         textareaElementGenerator={textareaElementGenerator}
         minusMenuElement={minusMenuElement}
@@ -1327,7 +1305,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     const endObject = '}';
 
     return (
-      <span className="rejt-not-collapsed">
+      <>
         <span className="rejt-not-collapsed-delimiter" style={delimiter}>
           {startObject}
         </span>
@@ -1353,25 +1331,24 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
           {endObject}
         </span>
         {!isReadOnly && removeItemButton}
-      </span>
+      </>
     );
   }
 
   render() {
-    const { name, collapsed, data, keyPath, deep } = this.state;
-    const { getStyle, dataType } = this.props;
+    const { name, collapsed, keyPath, deep = 0 } = this.state;
     const value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
-    const style = getStyle(name, data, keyPath, deep, dataType);
 
     return (
-      <div className="rejt-object-node">
-        <span onClick={this.handleCollapseMode}>
-          <span className="rejt-name" style={style.name}>
-            {name} :{' '}
-          </span>
-        </span>
+      <JsonNodeAccordion
+        name={name}
+        collapsed={collapsed}
+        deep={deep}
+        keyPath={keyPath}
+        onClick={this.handleCollapseMode}
+      >
         {value}
-      </div>
+      </JsonNodeAccordion>
     );
   }
 }
@@ -1390,7 +1367,6 @@ interface JsonObjectProps {
   getStyle: (...args: any) => any;
   addButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
-  editButtonElement?: ReactElement;
   inputElementGenerator: (...args: any) => any;
   textareaElementGenerator: (...args: any) => any;
   minusMenuElement?: ReactElement;
@@ -1413,8 +1389,8 @@ JsonObject.defaultProps = {
 interface JsonValueState {
   value: JsonValueProps['value'];
   name: JsonValueProps['name'];
-  keyPath: string[];
-  deep: JsonValueProps['deep'];
+  keyPath: Exclude<JsonValueProps['keyPath'], undefined>;
+  deep: Exclude<JsonValueProps['deep'], undefined>;
   editEnabled: boolean;
   inputRef: any;
 }
@@ -1426,8 +1402,8 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
     this.state = {
       value: props.value,
       name: props.name,
-      keyPath,
-      deep: props.deep,
+      keyPath: keyPath ?? [],
+      deep: props.deep ?? 0,
       editEnabled: false,
       inputRef: null,
     };
@@ -1454,24 +1430,19 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
     }
   }
 
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeydown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeydown);
-  }
-
   onKeydown(event: KeyboardEvent) {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) {
       return;
     }
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
+
       this.handleEdit();
     }
+
     if (event.code === 'Escape' || event.key === 'Escape') {
       event.preventDefault();
+
       this.handleCancelEdit();
     }
   }
@@ -1527,8 +1498,6 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
       readOnly,
       dataType,
       getStyle,
-      editButtonElement,
-      cancelButtonElement,
       inputElementGenerator,
       minusMenuElement,
       keyPath: comeFromKeyPath,
@@ -1546,26 +1515,23 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
       dataType
     );
 
-    const editButtonElementLayout =
-      editButtonElement &&
-      cloneElement(editButtonElement, {
-        onClick: this.handleEdit,
-      });
-    const cancelButtonElementLayout =
-      cancelButtonElement &&
-      cloneElement(cancelButtonElement, {
-        onClick: this.handleCancelEdit,
-      });
     const inputElementLayout = cloneElement(inputElement, {
       ref: this.refInput,
       defaultValue: JSON.stringify(originalValue),
+      onKeyDown: this.onKeydown,
     });
+
+    const parentPropertyName = keyPath.at(-2);
+
     const minusMenuLayout =
       minusMenuElement &&
       cloneElement(minusMenuElement, {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: style.minus,
+        'aria-label': `remove the property '${name}' with value '${originalValue}'${
+          parentPropertyName ? ` from '${parentPropertyName}'` : ''
+        }`,
       });
 
     return (
@@ -1576,8 +1542,7 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
         </span>
         {isEditing ? (
           <span className="rejt-edit-form" style={style.editForm}>
-            {inputElementLayout} {cancelButtonElementLayout}
-            {editButtonElementLayout}
+            {inputElementLayout}
           </span>
         ) : (
           <span
@@ -1605,7 +1570,6 @@ interface JsonValueProps {
   readOnly: (...args: any) => any;
   dataType?: string;
   getStyle: (...args: any) => any;
-  editButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
   inputElementGenerator: (...args: any) => any;
   minusMenuElement?: ReactElement;
@@ -1618,7 +1582,6 @@ JsonValue.defaultProps = {
   keyPath: [],
   deep: 0,
   handleUpdateValue: () => Promise.resolve(),
-  editButtonElement: <button>e</button>,
   cancelButtonElement: <button>c</button>,
   minusMenuElement: <span> - </span>,
 };
diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx
index b5c840b0639a..465d8da87c8e 100644
--- a/code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx
+++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/index.tsx
@@ -53,7 +53,6 @@ export class JsonTree extends Component<JsonTreeProps, JsonTreeState> {
       getStyle,
       addButtonElement,
       cancelButtonElement,
-      editButtonElement,
       inputElement,
       textareaElement,
       minusMenuElement,
@@ -98,7 +97,6 @@ export class JsonTree extends Component<JsonTreeProps, JsonTreeState> {
             getStyle={getStyle ?? (() => ({}))}
             addButtonElement={addButtonElement}
             cancelButtonElement={cancelButtonElement}
-            editButtonElement={editButtonElement}
             inputElementGenerator={inputElementFunction as (...args: any) => any}
             textareaElementGenerator={textareaElementFunction as (...args: any) => any}
             minusMenuElement={minusMenuElement}
@@ -128,7 +126,6 @@ interface JsonTreeProps {
   getStyle?: (...args: any) => any;
   addButtonElement?: ReactElement;
   cancelButtonElement?: ReactElement;
-  editButtonElement?: ReactElement;
   inputElement?: ReactElement | ((...args: any) => ReactElement);
   textareaElement?: ReactElement | ((...args: any) => ReactElement);
   minusMenuElement?: ReactElement;