Fix UI accessibility issues

Author: Shellishack

web/components/app-loaders/base-app-loader.tsx

@@ -32,6 +32,9 @@ export default function BaseAppLoader({
       className="h-full w-full"
       src={src}
       sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+      role="application"
+      title={moduleId}
+      aria-label={moduleId}
     />
   );
 }

web/components/marketplace/app/app-preview-card.tsx

@@ -13,7 +13,6 @@ import { ContextMenuState, ExtensionApp } from "@/lib/types";
 import { DraggableAttributes } from "@dnd-kit/core";
 import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import {
-  addToast,
   Button,
   Chip,
   Skeleton,
@@ -91,7 +90,7 @@ export default function AppPreviewCard({
     undefined,
   );
 
-  const [showMFVersionInfo, setShowMFVersionInfo] = useState(false);
+  const [isHover, setIsHover] = useState(false);
 
   useEffect(() => {
     async function fetchVersions() {
@@ -170,13 +169,13 @@ export default function AppPreviewCard({
         className="relative h-full min-h-32 w-full"
         onMouseEnter={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(true);
+            setIsHover(true);
           }
         }}
         // Hide show info when user taps outside of the modal
         onMouseLeave={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(false);
+            setIsHover(false);
           }
         }}
       >
@@ -275,9 +274,6 @@ export default function AppPreviewCard({
               return;
             }
 
-            addToast({
-              title: "App Preview Clicked",
-            });
             if (onPress) {
               onPress(extension);
             } else {
@@ -323,7 +319,7 @@ export default function AppPreviewCard({
             <Skeleton className="h-full w-full" isLoaded={false}></Skeleton>
           )}
         </Button>
-        {isShowInfo && (
+        {(isShowInfo || isHover) && (
           <div className="absolute bottom-0.5 left-1/2 flex w-fit -translate-x-1/2 justify-center gap-x-0.5">
             {isShowUseButton && (
               <Button

web/components/marketplace/workflow/workflow-preview-card.tsx

@@ -29,6 +29,8 @@ export default function WorkflowPreviewCard({
 
   const [isShowInfo, setIsShowInfo] = useState(false);
 
+  const [isHover, setIsHover] = useState(false);
+
   useEffect(() => {
     setIsLoaded(true);
   }, [workflow]);
@@ -54,18 +56,18 @@ export default function WorkflowPreviewCard({
   }
 
   return (
-    <div className="w-full h-full grid grid-rows-[auto_max-content_max-content] grid-cols-1">
+    <div className="grid h-full w-full grid-cols-1 grid-rows-[auto_max-content_max-content]">
       <div
-        className="relative h-full w-full min-h-32"
+        className="relative h-full min-h-32 w-full"
         onMouseEnter={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(true);
+            setIsHover(true);
           }
         }}
         // Hide show info when user taps outside of the modal
         onMouseLeave={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(false);
+            setIsHover(false);
           }
         }}
       >
@@ -102,7 +104,7 @@ export default function WorkflowPreviewCard({
             <Skeleton className="h-full w-full" isLoaded={false}></Skeleton>
           )}
         </Button>
-        {isShowInfo && (
+        {(isShowInfo || isHover) && (
           <div className="absolute bottom-0.5 left-1/2 flex w-full -translate-x-1/2 justify-center gap-x-0.5">
             <Button
               color="primary"

web/components/views/canvas/nodes/app-node/node-handle.tsx

@@ -14,10 +14,11 @@ export default function NodeHandle({
 }) {
   return (
     <div
-      className="relative h-fit w-fit bg-content2 text-content2-foreground z-40 pointer-events-none px-2 py-1 flex flex-col justify-center shadow-md data-[direction=left]:rounded-l-lg data-[direction=right]:rounded-r-lg"
+      className="bg-content2 text-content2-foreground pointer-events-none relative z-40 flex h-fit w-fit flex-col justify-center px-2 py-1 shadow-md data-[direction=left]:rounded-l-lg data-[direction=right]:rounded-r-lg"
       data-direction={position}
+      aria-label="Click on node handle to open node menu"
     >
-      <div className="text-center text-sm ">
+      <div className="text-center text-sm">
         <p>{id}</p>
         <p>({param?.type.toString()})</p>
       </div>