fix(Seat): display as div when non-clickable

If the Seat is available and has onClick set, renders it as an
interactive button, otherwise renders it as a non-interactive div

Closes FEPLT-2265

Author: mvidalgarcia

packages/orbit-components/src/Seat/Seat.stories.tsx

@@ -71,7 +71,6 @@ export const Playground: Story = {
         true: action("onClick"),
         false: undefined,
       },
-      defaultValue: true,
     },
   },
 };

packages/orbit-components/src/Seat/index.tsx

@@ -29,40 +29,52 @@ const Seat = ({
   const randomId = useRandomIdSeed();
   const titleId = title ? randomId("title") : "";
   const descrId = description ? randomId("descr") : "";
-  const clickable = type !== TYPES.UNAVAILABLE;
+  const isAvailable = type !== TYPES.UNAVAILABLE;
+  const clickable = isAvailable && onClick !== undefined;
 
-  return (
-    <Stack inline grow={false} spacing="50" direction="column" align="center">
-      <button
-        className={cx(
-          "orbit-seat font-base group relative",
-          size === SIZE_OPTIONS.SMALL ? "w-800 h-[36px]" : "size-[46px]",
-        )}
-        data-test={dataTest}
-        id={id}
-        disabled={!clickable}
-        onClick={clickable ? onClick : undefined}
-        tabIndex={clickable ? 0 : -1}
-        type="button"
+  const commonProps = {
+    className: cx(
+      "orbit-seat font-base group relative",
+      isAvailable && "cursor-pointer",
+      size === SIZE_OPTIONS.SMALL ? "w-800 h-[36px]" : "size-[46px]",
+    ),
+    id,
+    "data-test": dataTest,
+  };
+
+  const seatContent = (
+    <>
+      <svg
+        viewBox={size === SIZE_OPTIONS.SMALL ? "0 0 32 36" : "0 0 46 46"}
+        aria-labelledby={`${[ariaLabelledBy, titleId, descrId].join(" ").trim()}` || undefined}
+        fill="none"
+        role="img"
       >
-        <svg
-          viewBox={size === SIZE_OPTIONS.SMALL ? "0 0 32 36" : "0 0 46 46"}
-          aria-labelledby={`${[ariaLabelledBy, titleId, descrId].join(" ").trim()}` || undefined}
-          fill="none"
-          role="img"
-        >
-          {title && <title id={titleId}>{title}</title>}
-          {description && <desc id={descrId}>{description}</desc>}
+        {title && <title id={titleId}>{title}</title>}
+        {description && <desc id={descrId}>{description}</desc>}
+
+        {size === SIZE_OPTIONS.SMALL ? (
+          <SeatSmall type={type} selected={selected} label={label} />
+        ) : (
+          <SeatNormal type={type} selected={selected} label={label} />
+        )}
+      </svg>
+      {selected && isAvailable && <SeatCircle size={size} type={type} />}
+    </>
+  );
 
-          {size === SIZE_OPTIONS.SMALL ? (
-            <SeatSmall type={type} selected={selected} label={label} />
-          ) : (
-            <SeatNormal type={type} selected={selected} label={label} />
-          )}
-        </svg>
-        {selected && clickable && <SeatCircle size={size} type={type} />}
-      </button>
-      {price && !(selected && type === TYPES.UNAVAILABLE) && (
+  return (
+    <Stack inline grow={false} spacing="50" direction="column" align="center">
+      {clickable ? (
+        <button {...commonProps} onClick={onClick} type="button" aria-pressed={selected}>
+          {seatContent}
+        </button>
+      ) : (
+        <div {...commonProps} role="button" aria-pressed={selected} aria-disabled="true">
+          {seatContent}
+        </div>
+      )}
+      {price && !(selected && !isAvailable) && (
         <Text size="small" type="secondary">
           {price}
         </Text>