fix(Itinerary): clickable area is now more accurate

Some accessibility and keyboard navigation issues were also fixed.
kiwicom · May 13, 2024 · 6338eb7 · 6338eb7
1 parent 90f7d2b
commit 6338eb7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentBanner/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentBanner/index.tsx
@@ -18,7 +18,7 @@ const ItinerarySegmentBanner = ({ onClick, children }: Props) => {
         "[&_>_div]:max-w-[calc(100%-20px)]",
       )}
       role="button"
-      tabIndex={-1}
+      tabIndex={onClick ? 0 : -1}
       onKeyDown={handleKeyDown(onClick)}
       onClick={ev => {
         ev.stopPropagation();

diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import cx from "clsx";
 
-import Stack from "../../Stack";
 import handleKeyDown from "../../utils/handleKeyDown";
 import Separator from "../../Separator";
 import type { Props } from "./types";
@@ -23,8 +22,20 @@ const ItinerarySegment = ({
 
   const [opened, setOpened] = React.useState(false);
 
+  const handleClick = (ev: React.SyntheticEvent<HTMLDivElement>) => {
+    ev.stopPropagation();
+    if (onClick) onClick(ev);
+    setOpened(prev => !prev);
+  };
+
   const parts = (
-    <Stack direction="column" spacing="none">
+    <div
+      className="pt-sm"
+      role="button"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown(() => setOpened(prev => !prev))}
+    >
       {React.Children.map(children, (el, i) => {
         if (!React.isValidElement(el)) return null;
 
@@ -47,32 +58,26 @@ const ItinerarySegment = ({
           </ItinerarySegmentProvider>
         );
       })}
-    </Stack>
+    </div>
   );
 
-  const handleClick = (ev: React.SyntheticEvent<HTMLDivElement>) => {
-    if (onClick) onClick(ev);
-    setOpened(prev => !prev);
-  };
-
   return (
     <div
       className={cx(
-        "rounded-large py-sm px-0",
-        actionable && "cursor-pointer",
+        "rounded-large pb-sm px-0",
         spaceAfter && spaceAfterClasses[spaceAfter],
         !noElevation && "shadow-fixed",
         actionable && !noElevation && "hover:shadow-action-active focus:shadow-action-active",
       )}
-      role="button"
-      tabIndex={0}
-      onKeyDown={handleKeyDown(() => setOpened(prev => !prev))}
-      onClick={handleClick}
       data-test={dataTest}
     >
       {parts}
-      {Boolean(banner) && <Separator spaceAfter="small" />}
-      {banner}
+      {Boolean(banner) && (
+        <>
+          <Separator spaceAfter="small" />
+          {banner}
+        </>
+      )}
     </div>
   );
 };