Replace trip sort select with accessible dropdown

i18n/en-US.yml

@@ -339,7 +339,7 @@ components:
     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: 帮助

lib/components/app/locale-selector.tsx

@@ -25,6 +25,7 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
       id="locale-selector"
       label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
       listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
+      locale
       name={
         <span
           style={{

lib/components/narrative/narrative-itineraries-header.tsx

@@ -8,8 +8,12 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
+import { sortOptions } from '../util/sortOptions'
+import { UnstyledButton } from '../util/unstyled-button'
+import Dropdown from '../util/dropdown'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
+
 import PlanFirstLastButtons from './plan-first-last-buttons'
 import SaveTripButton from './save-trip-button'
 
@@ -44,7 +48,7 @@ export default function NarrativeItinerariesHeader({
   itineraries: unknown[]
   itinerary: Itinerary
   itineraryIsExpanded: boolean
-  onSortChange: () => void
+  onSortChange: (type: string) => VoidFunction
   onSortDirChange: () => void
   onToggleShowErrors: () => void
   onViewAllOptions: () => void
@@ -146,7 +150,7 @@ export default function NarrativeItinerariesHeader({
             style={{
               display: 'flex',
               float: 'right',
-              gap: 5,
+              gap: 7,
               marginLeft: showHeaderText ? 'inherit' : 'auto'
             }}
           >
@@ -172,48 +176,25 @@ export default function NarrativeItinerariesHeader({
                 )}
               </StyledIconWrapper>
             </button>
-            <select
-              aria-label={intl.formatMessage({
-                id: 'components.NarrativeItinerariesHeader.sortBy'
+            <Dropdown
+              id="sort-results"
+              label={intl.formatMessage({
+                id: 'components.NarrativeItinerariesHeader.sortResults'
               })}
-              onBlur={onSortChange}
-              onChange={onSortChange}
-              title={intl.formatMessage({
-                id: 'components.NarrativeItinerariesHeader.sortBy'
+              name={intl.formatMessage({
+                id: 'components.NarrativeItinerariesHeader.sortResults'
               })}
-              value={sort.type}
             >
-              <option value="BEST">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectBest'
-                })}
-              </option>
-              <option value="DURATION">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectDuration'
-                })}
-              </option>
-              <option value="ARRIVALTIME">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectArrivalTime'
-                })}
-              </option>
-              <option value="DEPARTURETIME">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectDepartureTime'
-                })}
-              </option>
-              <option value="WALKTIME">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectWalkTime'
-                })}
-              </option>
-              <option value="COST">
-                {intl.formatMessage({
-                  id: 'components.NarrativeItinerariesHeader.selectCost'
-                })}
-              </option>
-            </select>
+              {sortOptions.map((x) => {
+                return (
+                  <li key={x.value}>
+                    <UnstyledButton onClick={() => onSortChange(x.value)}>
+                      <FormattedMessage id={x.locale} />
+                    </UnstyledButton>
+                  </li>
+                )
+              })}
+            </Dropdown>
           </div>
           <PlanFirstLastButtons />
         </>

lib/components/narrative/narrative-itineraries.js

@@ -98,8 +98,7 @@ class NarrativeItineraries extends Component {
     setActiveLeg(null, null)
   }
 
-  _onSortChange = (evt) => {
-    const { value: type } = evt.target
+  _onSortChange = (type) => {
     const { sort, updateItineraryFilter } = this.props
     updateItineraryFilter({ sort: { ...sort, type } })
   }

lib/components/narrative/narrative.css

@@ -3,10 +3,16 @@
 }
 
 .otp .options > .header {
-  margin: 12px 10px;
+  margin: 15px 25px;
   font-size: 16px;
 }
 
+@media (max-width: 768px) {
+  .otp .options > .header {
+    margin: 1em;
+  }
+}
+
 /* Options scroll bar  */
 .otp .options > .list::-webkit-scrollbar {
   width: 10px;

lib/components/util/dropdown.tsx

@@ -12,23 +12,28 @@ interface Props extends HTMLAttributes<HTMLElement> {
   id: string
   label?: string
   listLabel?: string
-  name: JSX.Element
+  locale?: boolean
+  name: JSX.Element | string
   pullRight?: boolean
 }
 
 // TODO: make this a button once bootstrap is removed
-const DropdownButton = styled.a`
+const DropdownButton = styled.a<{ locale?: boolean }>`
   border: none;
+  border-radius: ${(props) => (props.locale ? '' : '5px')};
   color: inherit;
   display: block;
+  padding: ${(props) => (props.locale ? '' : '3px 7px;')};
   transition: all 0.1s ease-in-out;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.05) !important;
+    background: ${(props) =>
+      props.locale ? 'rgba(0, 0, 0, 0.05) !important' : '#fff'};
     cursor: pointer;
   }
   &.active {
-    background: rgba(0, 0, 0, 0.1) !important;
+    background: ${(props) =>
+      props.locale ? 'rgba(0, 0, 0, 0.05) !important' : '#fff'};
   }
 `
 const DropdownMenu = styled.ul`
@@ -101,6 +106,7 @@ const Dropdown = ({
   id,
   label,
   listLabel,
+  locale,
   name,
   pullRight,
   style
@@ -158,10 +164,14 @@ const Dropdown = ({
 
   return (
     <DropdownContainer
+      as={!locale ? 'span' : ''}
       id={`${id}-wrapper`}
       onKeyDown={_handleKeyDown}
       ref={containerRef}
-      style={{ float: pullRight ? 'right' : 'left' }}
+      style={{
+        float: pullRight ? 'right' : 'left',
+        position: locale ? 'inherit' : 'relative'
+      }}
     >
       <DropdownButton
         // Only set aria-controls when the dropdown is open
@@ -170,8 +180,10 @@ const Dropdown = ({
         aria-expanded={open}
         aria-haspopup="listbox"
         aria-label={label}
+        as={!locale ? 'button' : ''}
         className={`${open && 'active'}`}
         id={`${id}-label`}
+        locale={locale}
         onClick={toggleOpen}
         role="button"
         style={style}

lib/components/util/sortOptions.ts

@@ -0,0 +1,26 @@
+export const sortOptions = [
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectBest',
+    value: 'BEST'
+  },
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectDuration',
+    value: 'DURATION'
+  },
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectArrivalTime',
+    value: 'ARRIVALTIME'
+  },
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectDepartureTime',
+    value: 'DEPARTURETIME'
+  },
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectWalkTime',
+    value: 'WALKTIME'
+  },
+  {
+    locale: 'components.NarrativeItinerariesHeader.selectCost',
+    value: 'COST'
+  }
+]