Merge pull request #14 from ibi-group/itinbody-a11y-qbd

Itinbody a11y qbd
opentripplanner · Mar 8, 2023 · 631d3a1 · 631d3a1
2 parents dd3603d + ee1b36f
commit 631d3a1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 34 deletions.
diff --git a/packages/itinerary-body/src/AccessLegBody/access-leg-summary.tsx b/packages/itinerary-body/src/AccessLegBody/access-leg-summary.tsx
@@ -22,7 +22,7 @@ export default function AccessLegSummary({
   showLegIcon
 }: Props): ReactElement {
   return (
-    <S.LegClickable onClick={onSummaryClick}>
+    <S.LegClickable>
       <S.LegDescription>
         <S.LegIconAndRouteShortName>
           {showLegIcon && (
@@ -32,13 +32,15 @@ export default function AccessLegSummary({
           )}
         </S.LegIconAndRouteShortName>
         <AccessLegDescription config={config} leg={leg} />
-        <S.InvisibleAdditionalDetails>
-          <FormattedMessage
-            defaultMessage={defaultMessages["otpUi.TransitLegBody.zoomToLeg"]}
-            description="Identifies behavior of button"
-            id="otpUi.TransitLegBody.zoomToLeg"
-          />
-        </S.InvisibleAdditionalDetails>
+        <S.LegClickableButton onClick={onSummaryClick}>
+          <S.InvisibleAdditionalDetails>
+            <FormattedMessage
+              defaultMessage={defaultMessages["otpUi.TransitLegBody.zoomToLeg"]}
+              description="Identifies behavior of button"
+              id="otpUi.TransitLegBody.zoomToLeg"
+            />
+          </S.InvisibleAdditionalDetails>
+        </S.LegClickableButton>
       </S.LegDescription>
     </S.LegClickable>
   );

diff --git a/packages/itinerary-body/src/TransitLegBody/index.tsx b/packages/itinerary-body/src/TransitLegBody/index.tsx
@@ -188,22 +188,26 @@ class TransitLegBody extends Component<Props, State> {
           })}
           role="group"
         >
-          {/* The Route Icon/Name Bar; clickable to set as active leg */}
-          <S.LegClickable onClick={this.onSummaryClick}>
-            <RouteDescription
-              leg={leg}
-              LegIcon={LegIcon}
-              transitOperator={transitOperator}
-            />
-            <S.InvisibleAdditionalDetails>
-              <FormattedMessage
-                defaultMessage={
-                  defaultMessages["otpUi.TransitLegBody.zoomToLeg"]
-                }
-                description="Identifies behavior of button"
-                id="otpUi.TransitLegBody.zoomToLeg"
+          {/* The Route Icon/Name Bar */}
+          <S.LegClickable>
+            <S.LegDescription>
+              <RouteDescription
+                leg={leg}
+                LegIcon={LegIcon}
+                transitOperator={transitOperator}
               />
-            </S.InvisibleAdditionalDetails>
+              <S.LegClickableButton onClick={this.onSummaryClick}>
+                <S.InvisibleAdditionalDetails>
+                  <FormattedMessage
+                    defaultMessage={
+                      defaultMessages["otpUi.TransitLegBody.zoomToLeg"]
+                    }
+                    description="Identifies behavior of button"
+                    id="otpUi.TransitLegBody.zoomToLeg"
+                  />
+                </S.InvisibleAdditionalDetails>
+              </S.LegClickableButton>
+            </S.LegDescription>
           </S.LegClickable>
 
           {/* Agency information */}

diff --git a/packages/itinerary-body/src/styled.tsx b/packages/itinerary-body/src/styled.tsx
@@ -38,12 +38,6 @@ export const TransparentButton = styled.button`
   cursor: pointer;
   font-size: inherit;
   text-decoration: none;
-  &:focus {
-    /*
-      TODO: Add outline for keyboard tabbing only:
-      https://stackoverflow.com/a/45191208/915811
-    */
-  }
 `;
 
 export const AnchorButton = styled.a`
@@ -278,19 +272,32 @@ export const LegBody = styled.div`
   padding: 12px 0 12px 4px;
 `;
 
-export const LegClickable = styled(TransparentButton)`
+export const LegClickable = styled.div``;
+
+/**
+ * Transparent button, clickable by all, with a text about zooming to a leg on the map.
+ * The button sits on top of LegDescription, so that the button's text visually appears to be
+ * that of LegDescription.
+ */
+export const LegClickableButton = styled(TransparentButton)`
+  bottom: 0;
   cursor: pointer;
-  display: block;
-  padding: 0;
-  text-align: start;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  /* Place the button just above the elevation chart, 
+     so that its outline doesn't appear clipped in Chromium. */
+  z-index: 1;
 `;
 
 // Use <span> for correct semantics as it is the contents of a button or a link.
 export const LegDescription = styled.span`
   align-items: center;
-  display: flex;
+  display: inline-flex;
   line-height: 16px;
   min-height: 31px;
+  position: relative;
 `;
 
 // additional description added to ClickableLeg for screenreaders