Merge pull request #753 from opentripplanner/itinerary-a11y-grouping-labels

Grouping, Labels, and Headings in Itineraries

Author: amy-corson-ibigroup

Diff for: i18n/en-US.yml

@@ -206,6 +206,7 @@ components:
   FormNavigationButtons:
     ariaLabel: Form navigation
   ItinerarySummary:
+    itineraryDetails: Itinerary details
     minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LiveStopTimes:
     autoRefresh: Auto-refresh arrivals?

Diff for: lib/components/narrative/default/default-itinerary.js

@@ -52,9 +52,26 @@ const LegIconWrapper = styled.div`
   }
 `
 
+const DetailsHintButton = styled.button`
+  &.visible {
+    display: contents;
+  }
+
+  /* the width/height/overflow trick still renders a tiny button, 
+  so make it invisible and out of the way, but still visible to 
+  screen readers */
+
+  background: transparent;
+  border: none;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+`
 const DetailsHint = styled.div`
   clear: both;
   color: #685c5c;
+  cursor: pointer;
   font-size: small;
   text-align: center;
 `
@@ -254,6 +271,21 @@ class DefaultItinerary extends NarrativeItinerary {
         .filter((number) => !!number)[0]
     }
 
+    const itineraryAttributeOptions = {
+      co2Config,
+      configCosts,
+      currency,
+      LegIcon
+    }
+
+    const renderItineraryAttributes = (attribute) => {
+      return attribute.render(
+        itinerary,
+        itineraryAttributeOptions,
+        defaultFareKey
+      )
+    }
+
     return (
       <div
         className={`option default-itin${active ? ' active' : ''}${
@@ -263,68 +295,73 @@ class DefaultItinerary extends NarrativeItinerary {
         onMouseLeave={this._onMouseLeave}
         role="presentation"
       >
-        <button
+        <ItinerarySummaryWrapper
           className="header"
           // _onHeaderClick comes from super component (NarrativeItinerary).
           onClick={this._onHeaderClick}
         >
-          {/* FIXME: semantics - replace the divs with span (we are inside a button) */}
-          <ItinerarySummaryWrapper>
-            <div className="title">
+          <div className="title">
+            <h3>
               <ItineraryDescription intl={intl} itinerary={itinerary} />
-              <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
-              {itineraryHasAccessibilityScores(itinerary) && (
-                <AccessibilityRating
-                  gradationMap={localizedGradationMapWithIcons}
-                  large
-                  score={getAccessibilityScoreForItinerary(itinerary)}
-                />
-              )}
-            </div>
-            {isFlexItinerary && (
-              <FlexIndicator
-                isCallAhead={isCallAhead}
-                isContinuousDropoff={isCoordinationRequired}
-                phoneNumber={phone}
+            </h3>
+            <ItinerarySummary itinerary={itinerary} LegIcon={LegIcon} />
+            {itineraryHasAccessibilityScores(itinerary) && (
+              <AccessibilityRating
+                gradationMap={localizedGradationMapWithIcons}
+                large
+                score={getAccessibilityScoreForItinerary(itinerary)}
               />
             )}
-            <ul className="list-unstyled itinerary-attributes">
-              <FieldTripGroupSize itinerary={itinerary} />
-              {ITINERARY_ATTRIBUTES.sort((a, b) => {
-                const aSelected = this._isSortingOnAttribute(a)
-                const bSelected = this._isSortingOnAttribute(b)
-                if (aSelected) return -1
-                if (bSelected) return 1
-                return a.order - b.order
-              }).map((attribute) => {
+          </div>
+          {isFlexItinerary && (
+            <FlexIndicator
+              isCallAhead={isCallAhead}
+              isContinuousDropoff={isCoordinationRequired}
+              phoneNumber={phone}
+            />
+          )}
+          <ul
+            aria-label={intl.formatMessage({
+              id: 'components.ItinerarySummary.itineraryDetails'
+            })}
+            className="list-unstyled itinerary-attributes"
+          >
+            <FieldTripGroupSize itinerary={itinerary} />
+            {ITINERARY_ATTRIBUTES.sort((a, b) => {
+              const aSelected = this._isSortingOnAttribute(a)
+              const bSelected = this._isSortingOnAttribute(b)
+              if (aSelected) return -1
+              if (bSelected) return 1
+              return a.order - b.order
+            })
+              .filter((x) => renderItineraryAttributes(x) !== undefined)
+              .map((attribute) => {
                 const isSelected = this._isSortingOnAttribute(attribute)
-                const options = {
-                  co2Config,
-                  configCosts,
-                  currency,
-                  LegIcon
-                }
                 if (isSelected) {
-                  options.isSelected = true
-                  options.selection = this.props.sort.type
+                  itineraryAttributeOptions.isSelected = true
+                  itineraryAttributeOptions.selection = this.props.sort.type
                 }
                 return (
                   <li
                     className={`${attribute.id}${isSelected ? ' main' : ''}`}
                     key={attribute.id}
                   >
-                    {attribute.render(itinerary, options, defaultFareKey)}
+                    {renderItineraryAttributes(attribute)}
                   </li>
                 )
               })}
-            </ul>
-          </ItinerarySummaryWrapper>
-          {active && !expanded && (
+          </ul>
+        </ItinerarySummaryWrapper>
+        {!expanded && (
+          <DetailsHintButton
+            className={active && !expanded && 'visible'}
+            onClick={this._onDirectClick}
+          >
             <DetailsHint>
               <FormattedMessage id="components.DefaultItinerary.clickDetails" />
             </DetailsHint>
-          )}
-        </button>
+          </DetailsHintButton>
+        )}
         {active && expanded && (
           <>
             {showRealtimeAnnotation && <SimpleRealtimeAnnotation />}

Diff for: lib/components/narrative/default/itinerary.css

@@ -143,6 +143,11 @@
   font-size: large;
 }
 
+.otp .option.default-itin > .header .title h3 {
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
 .otp .option.default-itin > .header .itinerary-attributes {
   float: right;
   min-width: 6em;

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

@@ -22,16 +22,19 @@ type DepartureTimesProps = {
 export const DepartureTimesList = (props: DepartureTimesProps): JSX.Element => {
   const { activeItineraryTimeIndex, itinerary, setItineraryTimeIndex } = props
   const intl = useIntl()
+  const isRealTime = firstTransitLegIsRealtime(itinerary)
   if (!itinerary.allStartTimes) {
     return (
       <button
-        className={
-          firstTransitLegIsRealtime(itinerary) ? 'realtime active' : 'active'
-        }
-        title={intl.formatMessage(
+        className={isRealTime ? 'realtime active' : 'active'}
+        title={`${intl.formatMessage(
           { id: 'components.MetroUI.arriveAtTime' },
           { time: intl.formatTime(itinerary.endTime) }
-        )}
+        )} ${
+          isRealTime
+            ? intl.formatMessage({ id: 'components.StopTimeCell.realtime' })
+            : ''
+        }`}
       >
         <FormattedTime value={itinerary.startTime} />
       </button>
@@ -55,10 +58,14 @@ export const DepartureTimesList = (props: DepartureTimesProps): JSX.Element => {
             className={classNames.join(' ')}
             key={getFirstLegStartTime(time.legs)}
             onClick={() => setItineraryTimeIndex(index)}
-            title={intl.formatMessage(
+            title={`${intl.formatMessage(
               { id: 'components.MetroUI.arriveAtTime' },
               { time: intl.formatTime(getLastLegEndTime(time.legs)) }
-            )}
+            )} ${
+              time.realtime
+                ? intl.formatMessage({ id: 'components.StopTimeCell.realtime' })
+                : ''
+            }`}
           >
             <FormattedTime value={getFirstLegStartTime(time.legs)} />
           </button>