fix: React Console Warnings and Accessibility Issues in Langflow Frontend (#6950)

* fix errors on console jsx

* ✨ (NodeOutputfield/index.tsx): Refactor InspectButton component to use forwardRef for better performance and maintainability
♻️ (NodeOutputfield/index.tsx): Refactor AlertDropdown component to use forwardRef for better performance and maintainability

* 📝 (dialog.tsx): Add VisuallyHidden component for accessibility and improve semantics in DialogContent component
🔧 (dialog.tsx): Update DialogContent component to conditionally include VisuallyHidden component for DialogTitle
🔧 (dialog.tsx): Export VisuallyHidden component from dialog.tsx
♻️ (textAnimation.tsx): Refactor TextEffectPerChar component to use TextEffect component with per="char" and as="span" properties for consistency

* ✨ (CustomEdges/index.tsx): Destructure props to extract specific properties and pass the rest as domSafeProps for cleaner code
♻️ (singleAlertComponent/index.tsx): Remove unnecessary aria-hidden attribute from IconComponent to improve accessibility and reduce redundancy

* ✨ (index.tsx): introduce ShortUniqueId library to generate unique keys for alert items in the dropdown list

* ✨ (frontend): add support for displaying a list of items in the NoticeAlert component
📝 (frontend): update NoticeAlertType interface to include a list property for displaying multiple items in the alert

* ✨ (styleUtils.ts): introduce new icon PencilRuler to the list of nodeIconsLucide for use in the frontend styling utilities.

src/frontend/src/CustomEdges/index.tsx

@@ -56,11 +56,26 @@ export function DefaultEdge({
     targetY: targetYNew,
   });
 
+  const {
+    animated,
+    selectable,
+    deletable,
+    sourcePosition,
+    targetPosition,
+    pathOptions,
+    selected,
+    ...domSafeProps
+  } = props;
+
   return (
     <BaseEdge
       path={targetHandleObject.output_types ? edgePathLoop : edgePath}
       strokeDasharray={targetHandleObject.output_types ? "5 5" : "0"}
-      {...props}
+      {...domSafeProps}
+      data-animated={animated ? "true" : "false"}
+      data-selectable={selectable ? "true" : "false"}
+      data-deletable={deletable ? "true" : "false"}
+      data-selected={selected ? "true" : "false"}
     />
   );
 }

src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx

@@ -3,7 +3,14 @@ import { ICON_STROKE_WIDTH } from "@/constants/constants";
 import { targetHandleType } from "@/types/flow";
 import { useUpdateNodeInternals } from "@xyflow/react";
 import { cloneDeep } from "lodash";
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import ForwardedIconComponent, {
   default as IconComponent,
 } from "../../../../components/common/genericIconComponent";
@@ -96,7 +103,9 @@ const HideShowButton = memo(
 );
 
 const InspectButton = memo(
-  ({
+  forwardRef(
+    (
+      {
         disabled,
         displayOutputPreview,
         unknownOutput,
@@ -114,8 +123,11 @@ const InspectButton = memo(
         title: string;
         onClick: () => void;
         id: string;
-  }) => (
+      },
+      ref: React.ForwardedRef<HTMLButtonElement>,
+    ) => (
       <Button
+        ref={ref}
         disabled={disabled}
         data-testid={`output-inspection-${title.toLowerCase()}-${id.toLowerCase()}`}
         unstyled
@@ -138,7 +150,9 @@ const InspectButton = memo(
         />
       </Button>
     ),
+  ),
 );
+InspectButton.displayName = "InspectButton";
 
 const MemoizedOutputComponent = memo(OutputComponent);
 

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -18,11 +18,7 @@ export default function SingleAlert({
       key={dropItem.id}
     >
       <div className="flex-shrink-0">
-        <IconComponent
+        <IconComponent name="XCircle" className="h-5 w-5 text-status-red" />
-          name="XCircle"
-          className="h-5 w-5 text-status-red"
-          aria-hidden="true"
-        />
       </div>
       <div className="ml-3">
         <h3 className="text-sm font-medium text-error-foreground word-break-break-word">
@@ -80,11 +76,7 @@ export default function SingleAlert({
             className="inline-flex rounded-md p-1.5 text-status-red"
           >
             <span className="sr-only">Dismiss</span>
-            <IconComponent
+            <IconComponent name="X" className="h-4 w-4 text-error-foreground" />
-              name="X"
-              className="h-4 w-4 text-error-foreground"
-              aria-hidden="true"
-            />
           </button>
         </div>
       </div>
@@ -95,11 +87,7 @@ export default function SingleAlert({
       key={dropItem.id}
     >
       <div className="flex-shrink-0 cursor-help">
-        <IconComponent
+        <IconComponent name="Info" className="h-5 w-5 text-status-blue" />
-          name="Info"
-          className="h-5 w-5 text-status-blue"
-          aria-hidden="true"
-        />
       </div>
       <div className="ml-3 flex-1 md:flex md:justify-between">
         <p className="text-sm font-medium text-info-foreground">
@@ -131,11 +119,7 @@ export default function SingleAlert({
             className="inline-flex rounded-md p-1.5 text-info-foreground"
           >
             <span className="sr-only">Dismiss</span>
-            <IconComponent
+            <IconComponent name="X" className="h-4 w-4 text-info-foreground" />
-              name="X"
-              className="h-4 w-4 text-info-foreground"
-              aria-hidden="true"
-            />
           </button>
         </div>
       </div>
@@ -149,7 +133,6 @@ export default function SingleAlert({
         <IconComponent
           name="CheckCircle2"
           className="h-5 w-5 text-status-green"
-          aria-hidden="true"
         />
       </div>
       <div className="ml-3">
@@ -173,7 +156,6 @@ export default function SingleAlert({
             <IconComponent
               name="X"
               className="h-4 w-4 text-success-foreground"
-              aria-hidden="true"
             />
           </button>
         </div>

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,5 +1,6 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
+import ShortUniqueId from "short-unique-id";
 import IconComponent from "../../components/common/genericIconComponent";
 import {
   Popover,
@@ -11,11 +12,8 @@ import useAlertStore from "../../stores/alertStore";
 import { AlertDropdownType } from "../../types/alerts";
 import SingleAlert from "./components/singleAlertComponent";
 
-export default function AlertDropdown({
+const AlertDropdown = forwardRef<HTMLDivElement, AlertDropdownType>(
-  children,
+  function AlertDropdown({ children, notificationRef, onClose }, ref) {
-  notificationRef,
-  onClose,
-}: AlertDropdownType): JSX.Element {
     const notificationList = useAlertStore((state) => state.notificationList);
     const clearNotificationList = useAlertStore(
       (state) => state.clearNotificationList,
@@ -33,7 +31,9 @@ export default function AlertDropdown({
       if (!open) {
         onClose?.();
       }
-  }, [open]);
+    }, [open, onClose]);
+
+    const uid = new ShortUniqueId();
 
     return (
       <Popover
@@ -48,11 +48,14 @@ export default function AlertDropdown({
       >
         <PopoverTrigger asChild>{children}</PopoverTrigger>
         <PopoverContent
-        ref={notificationRef}
+          ref={ref}
           data-testid="notification-dropdown-content"
           className="noflow nowheel nopan nodelete nodrag z-10 flex h-[500px] w-[500px] flex-col"
         >
-        <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
+          <div
+            ref={notificationRef}
+            className="text-md flex flex-row justify-between pl-3 font-medium text-foreground"
+          >
             Notifications
             <div className="flex gap-3 pr-3">
               <button
@@ -76,9 +79,9 @@ export default function AlertDropdown({
           </div>
           <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
             {notificationList.length !== 0 ? (
-            notificationList.map((alertItem, index) => (
+              notificationList.map((alertItem) => (
                 <SingleAlert
-                key={alertItem.id}
+                  key={uid.randomUUID(10)}
                   dropItem={alertItem}
                   removeAlert={removeFromNotificationList}
                 />
@@ -92,4 +95,7 @@ export default function AlertDropdown({
         </PopoverContent>
       </Popover>
     );
-}
+  },
+);
+
+export default AlertDropdown;

src/frontend/src/alerts/notice/index.tsx

@@ -1,35 +1,35 @@
 import { CustomLink } from "@/customization/components/custom-link";
 import { Transition } from "@headlessui/react";
 import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import IconComponent from "../../components/common/genericIconComponent";
 import { NoticeAlertType } from "../../types/alerts";
 
 export default function NoticeAlert({
   title,
-  link,
+  list = [],
   id,
+  link,
   removeAlert,
 }: NoticeAlertType): JSX.Element {
   const [show, setShow] = useState(true);
-
   useEffect(() => {
-    const timeoutId = setTimeout(() => {
+    if (show) {
+      setTimeout(() => {
         setShow(false);
-      // Wait for the leave transition before calling removeAlert
         setTimeout(() => {
           removeAlert(id);
-      }, 500); // match the duration of the leave transition
+        }, 500);
-    }, 5000); // auto-dismiss alert after 5 seconds
+      }, 5000);
-
+    }
-    return () => clearTimeout(timeoutId); // Cleanup timeout on component unmount or re-render
+  }, [id, removeAlert, show]);
-  }, [id, removeAlert]);
 
   const handleClick = () => {
     setShow(false);
-    // Wait for the leave transition before calling removeAlert
     setTimeout(() => {
       removeAlert(id);
-    }, 500); // Ensure the alert is removed after the animation
+    }, 500);
   };
 
   return (

src/frontend/src/components/ui/dialog.tsx

@@ -35,10 +35,34 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+// Create a VisuallyHidden component for accessibility
+const VisuallyHidden = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ children, ...props }, ref) => (
+  <span
+    ref={ref}
+    className="absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0"
+    style={{ clip: "rect(0 0 0 0)", clipPath: "inset(50%)" }}
+    {...props}
+  >
+    {children}
+  </span>
+));
+VisuallyHidden.displayName = "VisuallyHidden";
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
->(({ className, children, ...props }, ref) => (
+    hideTitle?: boolean;
+  }
+>(({ className, children, hideTitle = false, ...props }, ref) => {
+  // Check if DialogTitle is included in children
+  const hasDialogTitle = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === DialogTitle,
+  );
+
+  return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
@@ -49,6 +73,11 @@ const DialogContent = React.forwardRef<
         )}
         {...props}
       >
+        {!hasDialogTitle && (
+          <VisuallyHidden>
+            <DialogTitle>Dialog</DialogTitle>
+          </VisuallyHidden>
+        )}
         {children}
         <ShadTooltip
           styleClasses="z-50"
@@ -63,7 +92,8 @@ const DialogContent = React.forwardRef<
         </ShadTooltip>
       </DialogPrimitive.Content>
     </DialogPortal>
-));
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -126,4 +156,5 @@ export {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  VisuallyHidden,
 };

src/frontend/src/components/ui/textAnimation.tsx

@@ -111,11 +111,7 @@ const AnimationComponent: React.FC<{
         {segment}
       </motion.span>
     ) : per === "word" ? (
-      <motion.span
+      <motion.span variants={variants} className="inline-block whitespace-pre">
-        aria-hidden="true"
-        variants={variants}
-        className="inline-block whitespace-pre"
-      >
         {segment}
       </motion.span>
     ) : (
@@ -123,7 +119,6 @@ const AnimationComponent: React.FC<{
         {segment.split("").map((char, charIndex) => (
           <motion.span
             key={`char-${charIndex}`}
-            aria-hidden="true"
             variants={variants}
             className="inline-block whitespace-pre"
           >
@@ -151,7 +146,7 @@ AnimationComponent.displayName = "AnimationComponent";
 export function TextEffect({
   children,
   per = "word",
-  as = "p",
+  as = "span",
   variants,
   className,
   preset,
@@ -224,7 +219,7 @@ export function TextEffect({
 
 export function TextEffectPerChar({ children }: { children: string }) {
   return (
-    <TextEffect per="char" preset="fade">
+    <TextEffect per="char" preset="fade" as="span">
       {children}
     </TextEffect>
   );

src/frontend/src/types/alerts/index.ts

@@ -9,6 +9,7 @@ export type NoticeAlertType = {
   link?: string;
   id: string;
   removeAlert: (id: string) => void;
+  list?: Array<string>;
 };
 export type SuccessAlertType = {
   title: string;

src/frontend/src/utils/styleUtils.ts

@@ -160,6 +160,7 @@ import {
   Pen,
   Pencil,
   PencilLine,
+  PencilRuler,
   PieChart,
   Pin,
   Plane,
@@ -857,6 +858,7 @@ export const nodeIconsLucide: iconsType = {
   UserMinus2,
   UserPlus2,
   Pencil,
+  PencilRuler,
   ChevronsRight,
   ChevronsLeft,
   EyeOff,