Merge pull request #821 from opentripplanner/fix-operator-aria-label

Fix operator aria label

Author: demory

Diff for: __tests__/components/viewers/__snapshots__/stop-viewer.js.snap

@@ -448,7 +448,6 @@ exports[`components > viewers > stop viewer should render countdown times after
                 <div
                   className="header-text"
                 >
-                  <OperatorLogo />
                   <h1
                     style={
                       Object {
@@ -3327,7 +3326,6 @@ exports[`components > viewers > stop viewer should render countdown times for st
                 <div
                   className="header-text"
                 >
-                  <OperatorLogo />
                   <h1
                     style={
                       Object {
@@ -5239,7 +5237,6 @@ exports[`components > viewers > stop viewer should render times after midnight w
                 <div
                   className="header-text"
                 >
-                  <OperatorLogo />
                   <h1
                     style={
                       Object {
@@ -8507,7 +8504,6 @@ exports[`components > viewers > stop viewer should render with OTP transit index
                 <div
                   className="header-text"
                 >
-                  <OperatorLogo />
                   <h1
                     style={
                       Object {
@@ -15582,7 +15578,6 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
                 <div
                   className="header-text"
                 >
-                  <OperatorLogo />
                   <h1
                     style={
                       Object {

Diff for: i18n/en-US.yml

@@ -369,9 +369,6 @@ components:
     moreDetails: "More Details"
     stopsTo: "Towards"
     selectADirection: "Select a direction..."
-  RouteRow:
-    operatorLogoAltText: "logo for {operatorName}"
-    operatorLogoAriaLabel: "{operatorName} stop:"
   # Used in both desktop and mobile
   RouteViewer:
     agencyFilter: Agency Filter
@@ -442,6 +439,7 @@ components:
     loadingText: Loading Stop...
     nextArrivals: Next Arrivals
     noStopsFound: No stop times found for date.
+    operatorLogoAriaLabel: "{operatorName} stop:"
     schedule: Schedule
     timezoneWarning: "Departure times are shown in <strong>{timezoneCode}</strong>."
     titleBarStopId: "Stop {stopId}"

Diff for: i18n/es.yml

@@ -261,6 +261,7 @@ components:
     header: Visor de paradas
     loadingText: Cargando la parada...
     noStopsFound: No se han encontrado tiempos de parada para la fecha.
+    operatorLogoAriaLabel: "Parada de {operatorName}:"
     timezoneWarning: Las horas de salida se indican en <strong>{timezoneCode}</strong>.
     titleBarStopId: Parada {stopId}
     viewNextArrivals: Ver próximas llegadas
@@ -489,8 +490,6 @@ components:
     noTripFound: No se encontró ningún viaje
     tripsFound: Encontramos {count, plural, one {# opción} other {# opciones}}
     waiting: Espera...
-  RouteRow:
-    operatorLogoAltText: logotipo de {operatorName}
   SimpleRealtimeAnnotation:
     usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo
       real

Diff for: i18n/fr.yml

@@ -360,9 +360,6 @@ components:
     moreDetails: "Plus d'infos"
     stopsTo: "Direction"
     selectADirection: "Choisissez une direction..."
-  RouteRow:
-    operatorLogoAriaLabel: "{operatorName} stop:"
-    operatorLogoAltText: "Logo de {operatorName}"
   # Used in both desktop and mobile
   RouteViewer:
     agencyFilter: Filtrer les transporteurs
@@ -434,6 +431,7 @@ components:
     loadingText: Chargement de l'arrêt...
     nextArrivals: Prochains passages
     noStopsFound: Aucun horaire pour la date choisie.
+    operatorLogoAriaLabel: "Arrêt {operatorName} :"
     schedule: Horaires
     timezoneWarning: "Les horaires sont affichés dans le fuseau <strong>{timezoneCode}</strong>."
     titleBarStopId: "Arrêt {stopId}"

Diff for: i18n/ko.yml

@@ -237,6 +237,7 @@ components:
     header: 정류장 뷰어
     loadingText: 로딩 중지…
     noStopsFound: 날짜에 대한 정지 시간이 없습니다.
+    operatorLogoAriaLabel: "정류장 {operatorName}:"
     timezoneWarning: 출발 시간은 <strong>{timezoneCode}</strong> 로 표시됩니다.
     titleBarStopId: 정류장 {stopId}
     viewNextArrivals: 다음 도착 정보보기
@@ -476,8 +477,6 @@ components:
   RelatedPanel:
     hideExtraStops: 여분의 정지를 숨 깁니다
     showExtraStops: 추가 정거장 {count} 개를 보여줍니다
-  RouteRow:
-    operatorLogoAltText: '{operatorName} 심벌 마크'
   SimpleRealtimeAnnotation:
     usingRealtimeInfo: 이 여행은 실시간 트래픽과 지연 정보를 사용합니다
   StackedPaneDisplay:

Diff for: i18n/vi.yml

@@ -245,6 +245,7 @@ components:
     header: Trình xem trạm dừng
     loadingText: Đang tải trạm dừng…
     noStopsFound: Không tìm thấy thời gian dừng cho ngày.
+    operatorLogoAriaLabel: "Điểm dừng của {operatorName}:"
     timezoneWarning: Thời gian khởi hành được hiển thị trong <strong>{timezoneCode}</strong>.
     titleBarStopId: 'Điểm dừng {stopId}'
     viewNextArrivals: Xem những người đến tiếp theo
@@ -468,8 +469,6 @@ components:
   RelatedPanel:
     hideExtraStops: Ẩn các điểm trạm dừng thêm
     showExtraStops: Hiển thị thêm {count} trạm điểm dừng
-  RouteRow:
-    operatorLogoAltText: logo {operatorName}
   SavedTripEditor:
     editSavedTrip: Chỉnh sửa chuyến đi lưu
     saveNewTrip: Lưu chuyến đi mới

Diff for: i18n/zh.yml

@@ -259,6 +259,7 @@ components:
     header: 车站查看器
     loadingText: 加载车站信息…
     noStopsFound: 未找到该日期的车站时间.
+    operatorLogoAriaLabel: "公交车站 {operatorName}:"
     timezoneWarning: 出发时间以 <strong>{timezoneCode}</strong> 显示.
     titleBarStopId: 车站 {stopId}
     viewNextArrivals: 查看下一个公共交通到达
@@ -469,8 +470,6 @@ components:
     noTripFound: 没有找到旅行
     tripsFound: 我们发现了 {count} 选项
     waiting: 等待...
-  RouteRow:
-    operatorLogoAltText: '{operatorName} 标志'
   SavedTripScreen:
     tripNameAlreadyUsed: 另一个保存的旅行已经使用了这个名字. 请选择一个不同的名字.
     tripNameRequired: 请输入一个行程名称.

Diff for: lib/components/util/operator-logo.tsx

@@ -1,5 +1,4 @@
 import { TransitOperator } from '@opentripplanner/types'
-import { useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -8,31 +7,13 @@ const OperatorImg = styled.img`
 `
 
 type Props = {
+  alt?: string
   operator?: TransitOperator
 }
 
-const OperatorLogo = ({ operator }: Props): JSX.Element | null => {
-  const intl = useIntl()
-
+const OperatorLogo = ({ alt, operator }: Props): JSX.Element | null => {
   if (!operator?.logo) return null
-
-  return (
-    <OperatorImg
-      alt={intl.formatMessage(
-        {
-          id: 'components.RouteRow.operatorLogoAltText'
-        },
-        { operatorName: operator.name }
-      )}
-      aria-label={intl.formatMessage(
-        {
-          id: 'components.RouteRow.operatorLogoAriaLabel'
-        },
-        { operatorName: operator.name }
-      )}
-      src={operator.logo}
-    />
-  )
+  return <OperatorImg alt={alt || operator.name} src={operator.logo} />
 }
 
 export default OperatorLogo

Diff for: lib/components/viewers/stop-viewer.js

@@ -191,8 +191,13 @@ class StopViewer extends Component {
   }
 
   _renderHeader = (agencyCount) => {
-    const { enableFavoriteStops, hideBackButton, showUserSettings, stopData } =
-      this.props
+    const {
+      enableFavoriteStops,
+      hideBackButton,
+      intl,
+      showUserSettings,
+      stopData
+    } = this.props
 
     // We can use the first route, as this operator will only be used if there is only one operator
     const stationOperator = this.getOperator()
@@ -213,10 +218,22 @@ class StopViewer extends Component {
         {/* Header Text */}
         <div className="header-text">
           {stopData ? (
-            <>
-              {agencyCount <= 1 && <OperatorLogo operator={stationOperator} />}
-              <h1 style={{ paddingLeft: '0.5ch' }}>{stopData.name}</h1>
-            </>
+            <h1 style={{ paddingLeft: '0.5ch' }}>
+              {agencyCount <= 1 && stationOperator && (
+                <OperatorLogo
+                  alt={intl.formatMessage(
+                    {
+                      id: 'components.StopViewer.operatorLogoAriaLabel'
+                    },
+                    {
+                      operatorName: stationOperator.name
+                    }
+                  )}
+                  operator={stationOperator}
+                />
+              )}
+              {stopData.name}
+            </h1>
           ) : (
             <h1>
               <FormattedMessage id="components.StopViewer.loadingText" />