Wheelchair accessible labeling

packages/itinerary-body/i18n/en-US.yml

@@ -81,6 +81,13 @@ otpUi:
       car: by car
       escooter: by e-scooter
       walk: by walking
+    tripAccessibility:
+      accessible: accessible
+      inaccessible: inaccessible
+      itineraryAccessibility: "Wheelchair accessibility of this trip: "
+      legAccessibility: "Wheelchair accessibility of this trip leg: "
+      likelyAccessible: likely accessible
+      unclear: unknown
     viewOnMap: View on map
   TransitLegBody:
     AlertsBody:

packages/itinerary-body/src/ItineraryBody/accessibility-rating.tsx

@@ -2,6 +2,8 @@ import { GradationMap } from "@opentripplanner/types";
 import React, { ReactElement } from "react";
 import styled from "styled-components";
 import { Wheelchair } from "@styled-icons/foundation/Wheelchair";
+import { useIntl } from "react-intl";
+import { InvisibleAdditionalDetails } from "../styled";
 
 interface WrapperProps {
   border: boolean;
@@ -40,6 +42,7 @@ interface Props {
   gradationMap?: GradationMap;
   grayscale?: boolean;
   large?: boolean;
+  leg?: boolean;
   score: number;
 }
 
@@ -51,16 +54,33 @@ const AccessibilityRating = ({
   gradationMap,
   grayscale = false,
   large = false,
+  leg = false,
   score
 }: Props): ReactElement => {
+  const intl = useIntl();
   // Provide default mapping
   const mapping = gradationMap || {
-    0.0: { color: "#ffe4e5", text: "❌" },
+    0.0: {
+      color: "#ffe4e5",
+      icon: "❌",
+      text: intl.formatMessage({
+        id: `otpUi.ItineraryBody.tripAccessibility.tripIsInaccessible`
+      })
+    },
     0.5: {
       color: "#dbe9ff",
-      text: "？"
+      icon: "？",
+      text: intl.formatMessage({
+        id: `otpUi.ItineraryBody.tripAccessibility.tripAccessibilityUnclear`
+      })
     },
-    0.9: { color: "#bfffb5", text: "✅" }
+    0.9: {
+      color: "#bfffb5",
+      icon: "✅",
+      text: intl.formatMessage({
+        id: `otpUi.ItineraryBody.tripAccessibility.tripIsLikelyAccessible`
+      })
+    }
   };
 
   // Find the highest (including equality) key for our score.
@@ -75,15 +95,28 @@ const AccessibilityRating = ({
   // External configuration may report "0.0" as 0, so include fallback
   const mapped = mapping[mappedKey] || mapping[0.0];
 
+  const accessibilityPreface = intl.formatMessage({
+    id: `otpUi.ItineraryBody.tripAccessibility.${
+      leg ? "legAccessibility" : "itineraryAccessibility"
+    }`
+  });
+
+  const accessibilityScore = mapped.text;
+
+  const accessibilityLabel = accessibilityPreface + accessibilityScore;
+
   return (
     <Wrapper
       border={grayscale}
       color={grayscale ? "transparent" : mapped.color}
       large={large}
-      title={mapped.text}
+      title={accessibilityLabel}
     >
+      <InvisibleAdditionalDetails>
+        {accessibilityLabel}
+      </InvisibleAdditionalDetails>
       <Wheelchair style={{ flex: "2", height: "100%", minWidth: "20px" }} />
-      <StatusWrapper>
+      <StatusWrapper aria-hidden>
         {/* Show either icon or text if no icon given */}
         {mapped.icon || <TextWrapper>{mapped.text}</TextWrapper>}
       </StatusWrapper>

packages/itinerary-body/src/ItineraryBody/place-row.tsx

@@ -103,8 +103,10 @@ export default function PlaceRow({
         {/* Custom rendering of the departure/arrival time of the specified leg. */}
         <TimeColumnContent isDestination={isDestination} leg={leg} />
         {!isDestination && leg.accessibilityScore && (
+          // TODO: Reorder markup so accessibility info doesn't fall between time and destination.
           <AccessibilityRating
             gradationMap={accessibilityScoreGradationMap}
+            leg
             score={leg.accessibilityScore}
           />
         )}