diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentBanner/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentBanner/index.tsx index 39435be329..e14c274cd5 100644 --- 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 index 16dc063ff7..8bf9b05750 100644 --- 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) => { + ev.stopPropagation(); + if (onClick) onClick(ev); + setOpened(prev => !prev); + }; + const parts = ( - +
setOpened(prev => !prev))} + > {React.Children.map(children, (el, i) => { if (!React.isValidElement(el)) return null; @@ -47,32 +58,26 @@ const ItinerarySegment = ({ ); })} - +
); - const handleClick = (ev: React.SyntheticEvent) => { - if (onClick) onClick(ev); - setOpened(prev => !prev); - }; - return (
setOpened(prev => !prev))} - onClick={handleClick} data-test={dataTest} > {parts} - {Boolean(banner) && } - {banner} + {Boolean(banner) && ( + <> + + {banner} + + )}
); };