Addon Docs: Fix aria-labels Symbol conversion issue in docs page and controls panel

yannbf · yannbf · commit d5a6a594706e · 2025-08-06T16:49:02.000+02:00
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
@@ -335,7 +335,7 @@ export class JsonArray extends Component<JsonArrayProps, JsonArrayState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the array '${name}'`,
+        'aria-label': `remove the array '${String(name)}'`,
       });
 
     return (
@@ -379,15 +379,15 @@ 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`,
+        'aria-label': `add a new item to the '${String(name)}' array`,
       });
     const removeItemButton =
       minusMenuElement &&
       cloneElement(minusMenuElement, {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the array '${name}'`,
+        'aria-label': `remove the array '${String(name)}'`,
       });
 
     const onlyValue = true;
@@ -670,8 +670,8 @@ export class JsonFunctionValue extends Component<JsonFunctionValueProps, JsonFun
           onClick: handleRemove,
           className: 'rejt-minus-menu',
           style: style.minus,
-          'aria-label': `remove the function '${name}'${
-            parentPropertyName ? ` from '${parentPropertyName}'` : ''
+          'aria-label': `remove the function '${String(name)}'${
+            String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
           }`,
         });
       minusElement = resultOnlyResult ? null : minusMenuLayout;
@@ -1222,7 +1222,7 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the object '${name}'`,
+        'aria-label': `remove the object '${String(name)}'`,
       });
 
     return (
@@ -1268,15 +1268,15 @@ 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}'`,
+        'aria-label': `add a new property to the object '${String(name)}'`,
       });
     const removeItemButton =
       minusMenuElement &&
       cloneElement(minusMenuElement, {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: minus,
-        'aria-label': `remove the object '${name}'`,
+        'aria-label': `remove the object '${String(name)}'`,
       });
 
     const list = keyList.map((key) => (
@@ -1540,8 +1540,8 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
         onClick: handleRemove,
         className: 'rejt-minus-menu',
         style: style.minus,
-        'aria-label': `remove the property '${name}' with value '${originalValue}'${
-          parentPropertyName ? ` from '${parentPropertyName}'` : ''
+        'aria-label': `remove the property '${String(name)}' with value '${String(originalValue)}'${
+          String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : ''
         }`,
       });
 
