Merge branch 'dev' into a11y-work-regression-repair

Author: miles-grant-ibigroup

Diff for: .github/workflows/codespell.yml

@@ -15,4 +15,4 @@ jobs:
           # skip git, yarn, pixel test script, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
-          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./percy/percy.test.js,./i18n
+          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./i18n

Diff for: i18n/en-US.yml

@@ -236,6 +236,7 @@ components:
     fromStop: "from {stop}"
     itineraryDescription: "{time} itinerary using {routes}"
     leaveAt: You leave
+    originallyScheduledTime: (originally {originalTime})
     multipleOptions: Multiple Options
     orAlternatives: or other routes in the same direction
     singleModeItineraryDescription: "{time} {mode} itinerary"

Diff for: i18n/es.yml

@@ -466,7 +466,6 @@ components:
     setDestination: Marcar el destino
     setOrigin: Establecer origen
   MetroUI:
-    arriveAtTime: Llegar a {time}
     fromStop: de {stop}
     itineraryDescription: '{time} itinerario en {routes}'
     leaveAt: Partir a

Diff for: i18n/fr.yml

@@ -232,7 +232,6 @@ components:
     stops: Arrêts et stations
     streets: Plan des rues
   MetroUI:
-    arriveAtTime: "Arrivée à {time}"
     fromStop: "de {stop}"
     itineraryDescription: "Trajet de {time} par les lignes {routes}"
     leaveAt: Partez à

Diff for: lib/components/narrative/metro/departure-times-list.tsx

@@ -3,10 +3,8 @@ import { Itinerary, Leg } from '@opentripplanner/types'
 import React from 'react'
 
 import { firstTransitLegIsRealtime } from '../../../util/viewer'
-import {
-  getFirstLegStartTime,
-  getLastLegEndTime
-} from '../../../util/itinerary'
+import { getDepartureLabelText } from '../utils'
+import { getFirstLegStartTime } from '../../../util/itinerary'
 
 type DepartureTimesProps = {
   activeItineraryTimeIndex?: number
@@ -23,18 +21,17 @@ export const DepartureTimesList = (props: DepartureTimesProps): JSX.Element => {
   const { activeItineraryTimeIndex, itinerary, setItineraryTimeIndex } = props
   const intl = useIntl()
   const isRealTime = firstTransitLegIsRealtime(itinerary)
+  const itineraryButtonLabel = getDepartureLabelText(
+    intl,
+    itinerary.startTime,
+    isRealTime
+  )
   if (!itinerary.allStartTimes) {
     return (
       <button
+        aria-label={itineraryButtonLabel}
         className={isRealTime ? 'realtime active' : 'active'}
-        title={`${intl.formatMessage(
-          { id: 'components.MetroUI.arriveAtTime' },
-          { time: intl.formatTime(itinerary.endTime) }
-        )} ${
-          isRealTime
-            ? intl.formatMessage({ id: 'components.StopTimeCell.realtime' })
-            : ''
-        }`}
+        title={itineraryButtonLabel}
       >
         <FormattedTime value={itinerary.startTime} />
       </button>
@@ -49,23 +46,22 @@ export const DepartureTimesList = (props: DepartureTimesProps): JSX.Element => {
     <FormattedList
       type="disjunction"
       value={allStartTimes.map((time, index) => {
+        const { legs, realtime } = time
         const classNames = []
-        if (time.realtime) classNames.push('realtime')
+        if (realtime) classNames.push('realtime')
         if (index === (activeItineraryTimeIndex || 0)) classNames.push('active')
-
+        const singleItinLabel = getDepartureLabelText(
+          intl,
+          getFirstLegStartTime(legs),
+          realtime
+        )
         return (
           <button
+            aria-label={singleItinLabel}
             className={classNames.join(' ')}
-            key={getFirstLegStartTime(time.legs)}
+            key={getFirstLegStartTime(legs)}
             onClick={() => setItineraryTimeIndex(index)}
-            title={`${intl.formatMessage(
-              { id: 'components.MetroUI.arriveAtTime' },
-              { time: intl.formatTime(getLastLegEndTime(time.legs)) }
-            )} ${
-              time.realtime
-                ? intl.formatMessage({ id: 'components.StopTimeCell.realtime' })
-                : ''
-            }`}
+            title={singleItinLabel}
           >
             <FormattedTime value={getFirstLegStartTime(time.legs)} />
           </button>

Diff for: lib/components/narrative/utils.tsx

@@ -42,3 +42,24 @@ export function localizeGradationMap(
   })
   return newGradationMap
 }
+
+/**
+ * Takes the itinerary start time and returns a label for button title and
+ * screen readers that indicates whether the departure time is based on realtime
+ * or scheduled data.
+ * @param intl React-Intl object
+ * @param time Itinerary start time
+ * @param realTime Whether the itinerary is based on realtime data
+ * @returns string with time and realtime/schedule status
+ */
+export const getDepartureLabelText = (
+  intl: IntlShape,
+  time: any,
+  realTime: boolean
+): string => {
+  return `${intl.formatTime(time)} ${
+    realTime
+      ? `(${intl.formatMessage({ id: 'components.StopTimeCell.realtime' })})`
+      : `(${intl.formatMessage({ id: 'components.StopTimeCell.scheduled' })})`
+  }`
+}

Diff for: lib/components/viewers/realtime-status-label.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // Typescript TODO: Waiting on viewer.js being typed
 import { connect } from 'react-redux'
-import { FormattedTime } from 'react-intl'
+import { FormattedMessage, FormattedTime } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
 import { getTripStatus, REALTIME_STATUS } from '../../util/viewer'
+import { InvisibleAdditionalDetails } from '@opentripplanner/itinerary-body/lib/styled'
 import FormattedDuration from '../util/formatted-duration'
 import FormattedRealtimeStatusLabel from '../util/formatted-realtime-status-label'
 
@@ -96,7 +97,7 @@ const RealtimeStatusLabel = ({
     // and display the updated time underneath.
     renderedTime = isEarlyOrLate ? (
       <TimeBlock>
-        <TimeStruck>
+        <TimeStruck aria-hidden>
           <FormattedTime timeStyle="short" value={originalTime} />
         </TimeStruck>
         <div>
@@ -133,6 +134,18 @@ const RealtimeStatusLabel = ({
           // @ts-ignore getTripStatus is not typed yet
           status={STATUS[status].label}
         />
+        {isEarlyOrLate && (
+          <InvisibleAdditionalDetails>
+            <FormattedMessage
+              id="components.MetroUI.originallyScheduledTime"
+              values={{
+                originalTime: (
+                  <FormattedTime timeStyle="short" value={originalTime} />
+                )
+              }}
+            />
+          </InvisibleAdditionalDetails>
+        )}
       </MainContent>
     </Container>
   )