tweak styling and create status region

lib/components/app/app.css

@@ -108,6 +108,9 @@
   height: 100%;
   width: 100%;
 }
+.otp .navbar {
+  z-index: 25;
+}
 
 /** These changes kick in when the map is hidden. These rules ensure that the entire "sidebar"
     (which at this point fills the entire screen) scrolls as a single unit.

lib/components/app/desktop-nav.tsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { isMobile } from '@opentripplanner/core-utils/lib/ui'
 import { Nav, Navbar } from 'react-bootstrap'
-import { useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -120,8 +120,6 @@ const DesktopNav = ({
       id: `config.popups.${popupTarget}`
     })
 
-  console.log(networkConnectionLost)
-
   return (
     <header>
       <Navbar fluid inverse>
@@ -171,6 +169,13 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
       <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )

lib/components/app/network-connection-banner.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import { RED_ON_WHITE } from '../util/colors'
 
 const containerClassname = 'network-connection-banner'
-const timeout = 200
+const timeout = 250
 
 const TransitionStyles = styled.div`
   .${containerClassname} {
@@ -20,7 +20,12 @@ const TransitionStyles = styled.div`
     text-align: center;
     top: 50px;
     width: 100%;
-    z-index: 1;
+    // When banner is fully loaded, set z-index higher than nav so we're not seeing the nav border.
+    z-index: 26;
+
+    @media (max-width: 768px) {
+      border: 0;
+    }
   }
   .${containerClassname}-enter {
     opacity: 0;
@@ -34,11 +39,13 @@ const TransitionStyles = styled.div`
   .${containerClassname}-exit {
     opacity: 1;
     transform: translateY(0);
+    z-index: 20;
   }
   .${containerClassname}-exit-active {
     opacity: 0;
     transform: translateY(-100%);
     transition: opacity ${timeout}ms ease-in, transform ${timeout}ms ease-in;
+    z-index: 20;
   }
 `
 export const NetworkConnectionLostBanner = styled.div``
@@ -62,13 +69,9 @@ export const NetworkConnectionBanner = ({
               aria-live="assertive"
               className={containerClassname}
               ref={connectionLostBannerRef}
-              role="status"
+              role="alert"
             >
-              {networkConnectionLost ? (
-                <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-              ) : (
-                <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
-              )}
+              <FormattedMessage id="components.AppMenu.networkConnectionLost" />
             </NetworkConnectionLostBanner>
           </CSSTransition>
         )}

lib/components/mobile/batch-search-screen.tsx

@@ -40,8 +40,9 @@ const MobileSearchSettings = styled.div<{
   top: 50px;
   transition: ${(props) => `all ${props.transitionDuration}ms ease`};
   transition-delay: ${(props) => props.transitionDelay}ms;
-  /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */
-  z-index: 999;
+  /* Must appear under the 'hamburger' dropdown which has z-index of 1000, and the "network lost"
+    banner which has a z-index of 10 */
+  z-index: 9;
 `
 
 interface Props {

lib/reducers/create-otp-reducer.js

@@ -1112,7 +1112,6 @@ function createOtpReducer(config) {
           }
         })
       case 'SET_NETWORK_CONNECTION_LOST':
-        console.log(action.payload)
         return update(state, {
           ui: {
             errors: {