From 27bd54808ed4c227f05889329017eaff7d24fa39 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:35:53 -0600
Subject: [PATCH] consolidate network connection status regions into one

---
 lib/components/app/desktop-nav.tsx             |  9 +--------
 .../app/network-connection-banner.tsx          | 18 ++++++++++--------
 lib/components/mobile/navigation-bar.js        | 10 +---------
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index a92cd9df5..43b4ca919 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/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'
 
@@ -169,13 +169,6 @@ 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>
   )
diff --git a/lib/components/app/network-connection-banner.tsx b/lib/components/app/network-connection-banner.tsx
index 50c4924a0..a323520ac 100644
--- a/lib/components/app/network-connection-banner.tsx
+++ b/lib/components/app/network-connection-banner.tsx
@@ -4,6 +4,7 @@ import React, { useRef } from 'react'
 import styled from 'styled-components'
 
 import { RED_ON_WHITE } from '../util/colors'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
 
 const containerClassname = 'network-connection-banner'
 const timeout = 250
@@ -48,7 +49,6 @@ const TransitionStyles = styled.div`
     z-index: 20;
   }
 `
-export const NetworkConnectionLostBanner = styled.div``
 
 export const NetworkConnectionBanner = ({
   networkConnectionLost
@@ -58,6 +58,13 @@ export const NetworkConnectionBanner = ({
   const connectionLostBannerRef = useRef<HTMLDivElement>(null)
   return (
     <TransitionStyles>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
       <TransitionGroup style={{ display: 'content' }}>
         {networkConnectionLost && (
           <CSSTransition
@@ -65,14 +72,9 @@ export const NetworkConnectionBanner = ({
             nodeRef={connectionLostBannerRef}
             timeout={timeout}
           >
-            <NetworkConnectionLostBanner
-              aria-live="assertive"
-              className={containerClassname}
-              ref={connectionLostBannerRef}
-              role="alert"
-            >
+            <div className={containerClassname} ref={connectionLostBannerRef}>
               <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-            </NetworkConnectionLostBanner>
+            </div>
           </CSSTransition>
         )}
       </TransitionGroup>
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index 555690226..1e7b0079c 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -1,6 +1,6 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
-import { FormattedMessage, injectIntl } from 'react-intl'
+import { injectIntl } from 'react-intl'
 import { Navbar } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -12,7 +12,6 @@ import { ComponentContext } from '../../util/contexts'
 import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
-import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import LocaleSelector from '../app/locale-selector'
 import NavLoginButtonAuth0 from '../../components/user/nav-login-button-auth0'
 import PageTitle from '../util/page-title'
@@ -115,13 +114,6 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
-        <InvisibleA11yLabel aria-live="assertive" role="status">
-          {networkConnectionLost ? (
-            <FormattedMessage id="components.AppMenu.networkConnectionLost" />
-          ) : (
-            <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
-          )}
-        </InvisibleA11yLabel>
         <NetworkConnectionBanner
           networkConnectionLost={networkConnectionLost}
         />