From f4524e78b80ea17f2753d672c3f6393dfb741713 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 18 Feb 2026 11:00:38 +0000
Subject: [PATCH] fix(frontend): Address CodeRabbit review feedback on
 NodeAdvancedToggle

- Convert arrow function to function declaration with extracted Props type
- Add aria-expanded attribute to toggle button for accessibility
- Use as="span" on Text component to avoid block element inside button
- Add aria-hidden to decorative CaretDownIcon

Co-authored-by: Ubbe <0ubbe@users.noreply.github.com>
---
 .../CustomNode/components/NodeAdvancedToggle.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx
index c3485e2329..e9c8a08cfb 100644
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx
@@ -3,7 +3,11 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { CaretDownIcon } from "@phosphor-icons/react";
 
-export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
+type Props = {
+  nodeId: string;
+};
+
+export function NodeAdvancedToggle({ nodeId }: Props) {
   const showAdvanced = useNodeStore(
     (state) => state.nodeAdvancedStates[nodeId] || false,
   );
@@ -14,9 +18,11 @@ export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
         variant="ghost"
         className="h-fit min-w-0 p-0 hover:border-transparent hover:bg-transparent"
         onClick={() => setShowAdvanced(nodeId, !showAdvanced)}
+        aria-expanded={showAdvanced}
       >
         <Text
           variant="body"
+          as="span"
           className="flex items-center gap-2 !font-semibold text-slate-700"
         >
           Advanced{" "}
@@ -24,9 +30,10 @@ export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
             size={16}
             weight="bold"
             className={`transition-transform ${showAdvanced ? "rotate-180" : ""}`}
+            aria-hidden
           />
         </Text>
       </Button>
     </div>
   );
-};
+}