Merge branch 'dev' into itinerary-a11y-grouping-labels

Author: amy-corson-ibigroup

Diff for: i18n/en-US.yml

@@ -130,8 +130,8 @@ components:
     closeMenu: Close Menu
     fieldTrip: Field Trip
     mailables: Mailables
-    menuItemIconAlt: "Icon for {label} menu item"
     openMenu: Open Menu
+    skipNavigation: Skip navigation
   BackToTripPlanner:
     backToTripPlanner: Back to trip planner
   BatchResultsScreen:
@@ -426,9 +426,12 @@ components:
     zoomToStop: Zoom to stop
 
   SubNav:
+    languages: "Languages"
     myAccount: My account
+    selectALanguage: Select a language
     settings: Settings
     trips: Trips
+    userMenu: Profile options
   SwitchButton:
     defaultContent: Switch
     switchLocations: Switch locations
@@ -555,6 +558,9 @@ components:
     bicyclesAllowed: Allowed
     header: Trip Viewer
     listOfRouteStops: List of stops on this route
+    tripDescription: Board at {boardAtStop} and disembark at {disembarkAtStop}
+    startOfTrip: Trip begins here
+    endOfTrip: Trip ends here
     routeHeader: "Route: <strong>{routeShortName}</strong> {routeLongName}"
     viewStop: View
   UserAccountScreen:

Diff for: i18n/es.yml

@@ -429,7 +429,6 @@ components:
     closeMenu: Cerrar Menú
     fieldTrip: Título del viaje
     mailables: Lista para publicar
-    menuItemIconAlt: Icono del menú de {label}
     openMenu: Abrir Menú
     callHistory: Historial de llamadas
   BackToTripPlanner:

Diff for: i18n/fr.yml

@@ -135,8 +135,8 @@ components:
     closeMenu: Fermer le menu
     fieldTrip: Groupes scolaires
     mailables: Prêt-à-poster
-    menuItemIconAlt: "Icône pour le menu {label}"
-    openMenu: "Ouvrir le menu"
+    openMenu: Ouvrir le menu
+    skipNavigation: Sauter la navigation
   BackToTripPlanner:
     backToTripPlanner: Retour au planificateur de trajets
   BatchResultsScreen:

Diff for: i18n/ko.yml

@@ -392,7 +392,6 @@ components:
   AppMenu:
     callHistory: 통화 기록
     closeMenu: 메뉴를 닫습니다
-    menuItemIconAlt: '{label} 메뉴 항목의 아이콘'
     fieldTrip: 여행 제목
     mailables: 게시 준비
     openMenu: 메뉴 열기

Diff for: i18n/vi.yml

@@ -399,7 +399,6 @@ components:
       \ {# xe đạp của {company} gần đó}\n }\n"
   AppMenu:
     mailables: Sẵn sàng để đăng
-    menuItemIconAlt: Biểu tượng cho mục menu {label}
     openMenu: Mở thực đơn
     callHistory: Lịch sử cuộc gọi
     closeMenu: Đóng menu

Diff for: i18n/zh.yml

@@ -394,7 +394,6 @@ components:
     closeMenu: 关闭菜单
     fieldTrip: 旅行标题
     mailables: 准备发布
-    menuItemIconAlt: '{label} 菜单项的图标'
     openMenu: 打开菜单
   StopTimeCell:
     imminentArrival: 到达

Diff for: index.css

@@ -23,43 +23,48 @@ input[type="text"]::-ms-clear {
 
 /* New app menu */
 .app-menu-icon {
-  width: 21px;
-  height: 15px;
+  background: none;
+  border: none;
+  cursor: pointer;
   display: flex;
   flex-direction: column;
+  height: 15px;
   justify-content: space-between;
-  cursor: pointer;
+  padding: 0;
   position: absolute;
-  z-index: 10;
-  transition: all 1s ease;
   top: 16px;
+  transition: all 1s ease;
+  width: 21px;
+  z-index: 10;
 }
 
 @media only screen and (max-width: 768px) {
+  #locale-selector-wrapper {
+    display: none;
+  }
   .app-menu-icon {
-    margin-left: 15px;
+    left: 15px;
   }
 }
 
-.menu-top-line,
-.menu-middle-line,
-.menu-bottom-line,
-.menu-left-x,
-.menu-right-x {
+.app-menu-icon .menu-line {
   border-bottom: 3px solid #ffffff;
+  display: block;
+  position: relative;
   transition: all 0.5s ease;
+  width: 100%;
 }
 
-.menu-left-x {
+.app-menu-icon[aria-expanded="true"] .menu-line.top {
   transform: rotate(45deg);
   top: 7px;
-  position: relative;
 }
-
-.menu-right-x {
+.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
   transform: rotate(-45deg);
   bottom: 5px;
-  position: relative;
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.middle {
+  display: none;
 }
 
 .slide-pane {
@@ -70,11 +75,6 @@ input[type="text"]::-ms-clear {
   margin: 52px auto 0 0;
 }
 
-.slide-pane__header,
-.slide-pane__close {
-  display: none;
-}
-
 .slide-pane__content {
   padding: 6px 0;
 }
@@ -85,28 +85,51 @@ input[type="text"]::-ms-clear {
 
 .app-menu {
   margin: 0;
-  padding: 0;
+  padding: 0.5rem 0;
 }
 
-.app-menu li {
-  list-style-type: none;
-  margin: 1rem 2rem;
-  cursor: pointer;
-}
-
-.app-menu li img,
-.app-menu li svg {
+.app-menu img,
+.app-menu svg {
   max-height: 1em;
-  margin-right: 2rem;
+  margin: 0 2rem;
   vertical-align: middle;
   width: 1em;
 }
 
-.app-menu li a {
+.app-menu a,
+.app-menu button {
+  background: none;
+  border: none;
   color: inherit;
+  cursor: pointer;
+  display: flex;
   font-size: 20px;
+  padding: 0.5rem 0;
   text-decoration: none;
-  outline: none;
+  width: 100%;
+}
+
+.app-menu a:hover,
+.app-menu button:hover {
+  color: #4c97f5;
+}
+
+.app-menu a:focus,
+.app-menu button:focus {
+  background-color: #ddd;
+  outline: 2px solid #4c97f5;
+  outline-offset: -2px;
+}
+
+.skip-nav-button {
+  color: initial;
+  position: fixed;
+  top: -30px;
+}
+.skip-nav-button:focus {
+  padding: 7px 24px;
+  top: 7px;
+  z-index: 100
 }
 
 .view-switcher {
@@ -119,13 +142,9 @@ input[type="text"]::-ms-clear {
   }
 }
 
-.menu-item:hover *,
-.app-menu li a span *:hover {
-  color: #4c97f5;
-}
-
 .expand-menu-chevron {
-  margin-right: -2rem;
+  flex-grow: 1;
+  text-align: end;
 }
 
 .dropdown-header {
@@ -135,34 +154,23 @@ input[type="text"]::-ms-clear {
   white-space: nowrap;
 }
 
-.expand-submenu-button a {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
 .sub-menu-container {
   border-top: 1px solid #cccccc;
+  margin-top: 0.5rem;
+  padding-left: 2rem;
 }
 
-.sub-menu-container li a {
-  margin-left: 2rem;
-}
-
-.sub-menu-container li a span {
-  color: inherit;
+.app-menu .app-menu-divider {
+  border-bottom: 1px solid #ccc;
+  padding: 1rem 0;
 }
 
-.app-menu-divider::after {
-  content: "";
-  display: block;
-  height: 1px;
-  background: #ccc;
-  margin: 1rem;
-  width: 200%; /* ensures the line extends to the edge of the pane */
+/* Header image or title */
+/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
+.with-icon div.navbar-title {
+  height: 0;
+  overflow: hidden;
+  width: 0;
 }
 
 /* Buttons */
@@ -207,4 +215,4 @@ button.step {
   /* we need to override this z-index so that the +/- map controls appear below
   the geocoder search results */
   z-index: 999;
-}
+}

Diff for: lib/actions/ui.js

@@ -123,7 +123,7 @@ export function setViewedRoute(payload) {
 /**
  * Sets the main panel content according to the payload (one of the enum values
  * of MainPanelContent) and routes the application to the correct path.
- * @param {number} payload MainPanelContent value
+ * @param {number|null} payload MainPanelContent value
  */
 export function setMainPanelContent(payload) {
   return function (dispatch, getState) {

Diff for: lib/components/app/app-frame.js

@@ -0,0 +1,46 @@
+import { Col, Row } from 'react-bootstrap'
+import React, { ComponentType, FC, HTMLAttributes } from 'react'
+
+import DesktopNav from './desktop-nav'
+import NotFound from './not-found'
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  SubNav?: ComponentType
+}
+
+/**
+ * This component defines the general application frame, to which
+ * content and an optional sub-navigation component can be inserted.
+ */
+const AppFrame = ({ children, SubNav }: Props): JSX.Element => (
+  <div className="otp" id="otp">
+    {/* TODO: Do mobile view. */}
+    <DesktopNav />
+    {SubNav && <SubNav />}
+    {/* Create a main region here so that the DesktopNav, which contains a "banner" landmark,
+        is not contained within the main or other landmark
+        (see https://dequeuniversity.com/rules/axe/4.3/landmark-banner-is-top-level?application=axe-puppeteer) */}
+    <main tabIndex={-1}>
+      <div className="container">
+        <Row>
+          <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+            {children}
+          </Col>
+        </Row>
+      </div>
+    </main>
+  </div>
+)
+
+/**
+ * Creates a simple wrapper component consisting of an AppFrame that surrounds
+ * the provided component. (Displays "Content not found" if none provided.)
+ */
+export function frame(Component: ComponentType): FC {
+  const FramedComponent = () => (
+    <AppFrame>{Component ? <Component /> : <NotFound />}</AppFrame>
+  )
+  return FramedComponent
+}
+
+export default AppFrame