Replace trip sort select with accessible dropdown

i18n/en-US.yml

@@ -332,14 +332,17 @@ components:
       {itineraryNum, plural, one {# itinerary found} other {# itineraries found}
       }
     numIssues: "{issueNum, plural, one {# issue} other {# issues} }"
+    resultsSortedBy: >-
+      Trip results currently sorted by {sortSelected}. To change the way results
+      are sorted, use the "Sort Results" button below.
     searching: Finding your options...
     selectArrivalTime: Arrival time
     selectBest: Best option
     selectCost: Cost
     selectDepartureTime: Departure time
     selectDuration: Duration
     selectWalkTime: Walk time
-    sortBy: Sort By
+    sortResults: Sort results
     viewAll: View all options
   NavLoginButton:
     help: Help

i18n/es.yml

@@ -30,8 +30,7 @@ actions:
       No se puede guardar el plan: este plan no se pudo guardar debido a la
       falta de capacidad en uno o más vehículos. Por favor, vuelva a planificar
       su viaje.
-    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados
-      válidos
+    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados válidos
     saveItinerariesError: "No se pudieron guardar los itinerarios: {err}"
     setDateError: "Error al establecer la fecha:"
     setGroupSizeError: "No se pudo establecer el tamaño del grupo:"
@@ -47,11 +46,9 @@ actions:
     authTokenError: Error al obtener un token de autorización.
     confirmDeleteMonitoredTrip: ¿Desea eliminar este viaje?
     confirmDeletePlace: ¿Quiere eliminar este lugar?
-    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido
-      reenviado.
+    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido reenviado.
     genericError: "Se ha encontrado un error: {err}"
-    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado
-      es posible.
+    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado es posible.
     preferencesSaved: Sus preferencias se han guardado.
     smsInvalidCode: El código introducido no es válido. Por favor, inténtelo de nuevo.
     smsResendThrottled: >-
@@ -113,6 +110,7 @@ common:
       {co2} de CO₂ en {isMore, select, true {más} other {menos} } que conducir
       solo
     transfers: "{transfers, plural, =0 {} one {# transferencia} other {# transferencias}}"
+  linkOpensNewWindow: (Abre una nueva ventana)
   modes:
     bicycle_rent: Compartir bicicleta
     bike: Bicicleta
@@ -160,7 +158,6 @@ common:
     tripDurationFormat: >-
       {hours, plural, =0 {} other {# h }}{minutes} min { seconds, plural, =0 {}
       other {# s}}
-  linkOpensNewWindow: (Abre una nueva ventana)
 components:
   A11yPrefs:
     accessibilityRoutingByDefault: Prefiera los viajes accesibles por defecto
@@ -237,8 +234,7 @@ components:
     origin: origen
     planTripTooltip: Planificar viaje
     settings: Preferencias de viaje
-    validationMessage: "Por favor, defina los siguientes campos para planificar un\
-      \ viaje: {issues}"
+    validationMessage: "Por favor, defina los siguientes campos para planificar un viaje: {issues}"
   BeforeSignInScreen:
     mainTitle: Iniciando sesión
     message: >
@@ -348,7 +344,6 @@ components:
     selectDepartureTime: Hora de salida
     selectDuration: Duración
     selectWalkTime: Tiempo de caminata
-    sortBy: Ordenar por
     viewAll: Ver todas las opciones
   NavLoginButton:
     help: Ayuda
@@ -368,8 +363,7 @@ components:
     description: Puede recibir notificaciones sobre los viajes que realiza con frecuencia.
     noneSelect: No enviar notificaciones
     notificationChannelPrompt: ¿Cómo desea recibir las notificaciones?
-    notificationEmailDetail: "Los correos electrónicos de notificación se enviarán\
-      \ a:"
+    notificationEmailDetail: "Los correos electrónicos de notificación se enviarán a:"
   PhoneNumberEditor:
     changeNumber: Cambiar número de teléfono
     invalidCode: Introduzca 6 dígitos para el código de validación.
@@ -502,8 +496,7 @@ components:
       Opciones
       y Preferencias del viaje
   SimpleRealtimeAnnotation:
-    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo
-      real
+    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo real
   StackedPaneDisplay:
     savePreferences: Guardar preferencias
   StopScheduleTable:
@@ -565,19 +558,16 @@ components:
     travelingAt: Viajando a {milesPerHour}
     vehicleName: Vehículo {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Comprobación de la existencia de itinerarios para
-      cada día de la semana…
+    checkingItineraryExistence: Comprobación de la existencia de itinerarios para cada día de la semana…
     selectAtLeastOneDay: Por favor, seleccione al menos un día para el seguimiento.
     tripDaysPrompt: ¿Qué días hace este viaje?
-    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana
-      indicados anteriormente.
+    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana indicados anteriormente.
     tripNamePrompt: "Por favor, indique un nombre para este viaje:"
     tripNotAvailableOnDay: El viaje no está disponible el {repeatedDay}
     unsavedChangesExistingTrip: >-
       Todavía no ha guardado su viaje. Si abandona la página, los cambios se
       perderán.
-    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página,
-      se perderá.
+    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página, se perderá.
   TripNotificationsPane:
     advancedSettings: Configuración avanzada
     altRouteRecommended: Se recomienda una ruta alternativa o un punto de transferencia

i18n/fr.yml

@@ -351,7 +351,6 @@ components:
     selectDepartureTime: Heure de départ
     selectDuration: Durée
     selectWalkTime: Temps de marche
-    sortBy: Trier par
     viewAll: Toutes les options
   NavLoginButton:
     help: Aide

i18n/ko.yml

@@ -317,7 +317,6 @@ components:
     selectDepartureTime: 출발 시각
     selectDuration: 기간
     selectWalkTime: 도보 시간
-    sortBy: 정렬 기준
     viewAll: 모든 옵션 보기
   NavLoginButton:
     help: 지원

i18n/vi.yml

@@ -325,7 +325,6 @@ components:
     selectDepartureTime: Giờ khởi hành
     selectDuration: Thời hạn
     selectWalkTime: Thời gian đi bộ
-    sortBy: Sắp xếp theo
     viewAll: Xem tất cả các tùy chọn
   NavLoginButton:
     help: Giúp đỡ

i18n/zh.yml

@@ -317,7 +317,6 @@ components:
     selectDepartureTime: 出发时间
     selectDuration: 旅行时长
     selectWalkTime: 步行时间
-    sortBy: 排序方式
     viewAll: 查看所有选项
   NavLoginButton:
     help: 帮助

index.css

@@ -122,6 +122,7 @@ input[type="text"]::-ms-clear {
 }
 
 .app-menu button[aria-selected="true"],
+.sort-option button[aria-selected="true"],
 #locale-selector button[aria-selected="true"] {
   font-weight: bold;
 }

lib/components/app/desktop-nav.tsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { Nav, Navbar, NavItem } from 'react-bootstrap'
+import { Nav, Navbar } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
@@ -12,15 +12,9 @@ import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
 
 import AppMenu, { Icon } from './app-menu'
 import LocaleSelector from './locale-selector'
+import NavbarItem from './nav-item'
 import ViewSwitcher from './view-switcher'
 
-const NavItemOnLargeScreens = styled(NavItem)`
-  display: block;
-  @media (max-width: 768px) {
-    display: none !important;
-  }
-`
-
 const StyledNav = styled(Nav)`
   /* Almost override bootstrap's margin-right: -15px */
   margin-right: -5px;
@@ -34,6 +28,13 @@ const StyledNav = styled(Nav)`
   }
 `
 
+const NavItemOnLargeScreens = styled(NavbarItem)`
+  display: block;
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+`
+
 // Typscript TODO: otpConfig type
 export type Props = {
   locale: string

lib/components/app/locale-selector.tsx

@@ -4,9 +4,9 @@ import { useIntl } from 'react-intl'
 import React from 'react'
 
 import * as uiActions from '../../actions/ui'
+import { Dropdown } from '../util/dropdown'
 import { getLanguageOptions } from '../../util/i18n'
 import { UnstyledButton } from '../util/unstyled-button'
-import Dropdown from '../util/dropdown'
 
 interface LocaleSelectorProps {
   // Typescript TODO languageOptions based on configLanguage type.
@@ -21,34 +21,35 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
 
   // Only render if two or more languages are configured.
   return languageOptions ? (
-    <Dropdown
-      id="locale-selector"
-      label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
-      listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
-      name={
-        <span
-          style={{
-            color: 'rgba(255, 255, 255, 0.85)'
-          }}
-        >
-          <GlobeAmericas />
-        </span>
-      }
-      style={{ display: 'block ruby' }}
-      // TODO: How to make this work without block ruby?
-    >
-      {Object.keys(languageOptions).map((locale: string) => (
-        <li key={locale} lang={locale} role="none">
-          <UnstyledButton
-            aria-selected={locale === currentLocale || undefined}
-            onClick={() => setLocale(locale)}
-            role="option"
+    <li>
+      <Dropdown
+        id="locale-selector"
+        label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
+        listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
+        name={
+          <span
+            style={{
+              color: 'rgba(255, 255, 255, 0.85)'
+            }}
           >
-            {languageOptions[locale].name}
-          </UnstyledButton>
-        </li>
-      ))}
-    </Dropdown>
+            <GlobeAmericas />
+          </span>
+        }
+        style={{ display: 'block ruby' }}
+      >
+        {Object.keys(languageOptions).map((locale: string) => (
+          <li key={locale} lang={locale} role="none">
+            <UnstyledButton
+              aria-selected={locale === currentLocale || undefined}
+              onClick={() => setLocale(locale)}
+              role="option"
+            >
+              {languageOptions[locale].name}
+            </UnstyledButton>
+          </li>
+        ))}
+      </Dropdown>
+    </li>
   ) : null
 }
 

lib/components/app/nav-item.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import styled from 'styled-components'
+
+type Props = {
+  children: React.ReactNode
+  className?: string
+  onClick: () => void
+  title: string | undefined
+}
+
+export const NavbarButton = styled.button`
+  background: transparent;
+  border: none;
+  color: white;
+  display: block;
+  line-height: 20px;
+  padding: 15px;
+  transition: all 0.1s ease-in-out;
+
+  @media (max-width: 768px) {
+    padding: 10px;
+    float: right;
+  }
+  &:hover,
+  &[aria-expanded='true'] {
+    background: rgba(0, 0, 0, 0.05);
+    color: #ddd;
+    cursor: pointer;
+  }
+  &.active {
+    background: rgba(0, 0, 0, 0.05);
+  }
+`
+
+const NavbarItem = ({
+  children,
+  className,
+  onClick,
+  title
+}: Props): JSX.Element => {
+  return (
+    <li className={className}>
+      <NavbarButton className="navItem" onClick={onClick} title={title}>
+        {children}
+      </NavbarButton>
+    </li>
+  )
+}
+
+export default NavbarItem