fix(mobile navigation): Add container with banner role.

opentripplanner · Jan 19, 2023 · 1aec49a · 1aec49a
1 parent 3be3651
commit 1aec49a
Showing 1 changed file with 48 additions and 46 deletions.
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
@@ -1,7 +1,7 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
 import { Navbar } from 'react-bootstrap'
-import PropTypes, { any } from 'prop-types'
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import { accountLinks, getAuth0Config } from '../../util/auth'
@@ -44,57 +44,59 @@ class MobileNavigationBar extends Component {
     } = this.props
 
     return (
-      <Navbar className="mobile-navbar-container" fixedTop fluid>
-        <Navbar.Header role="banner">
-          <Navbar.Brand>
-            {showBackButton ? (
-              <div className="mobile-back">
-                <StyledIconWrapper onClick={this._backButtonPressed}>
-                  <ArrowLeft />
-                </StyledIconWrapper>
-              </div>
+      <div role="banner">
+        <Navbar className="mobile-navbar-container" fixedTop fluid>
+          <Navbar.Header>
+            <Navbar.Brand>
+              {showBackButton ? (
+                <div className="mobile-back">
+                  <StyledIconWrapper onClick={this._backButtonPressed}>
+                    <ArrowLeft />
+                  </StyledIconWrapper>
+                </div>
+              ) : (
+                <AppMenu />
+              )}
+            </Navbar.Brand>
+          </Navbar.Header>
+
+          <div className="mobile-header">
+            {headerText ? (
+              <div className="mobile-header-text">{headerText}</div>
             ) : (
-              <AppMenu />
+              <div>{defaultMobileTitle}</div>
             )}
-          </Navbar.Brand>
-        </Navbar.Header>
+          </div>
 
-        <div className="mobile-header">
-          {headerText ? (
-            <div className="mobile-header-text">{headerText}</div>
-          ) : (
-            <div>{defaultMobileTitle}</div>
+          {headerAction && (
+            <div className="mobile-close">
+              <div className="mobile-header-action">{headerAction}</div>
+            </div>
           )}
-        </div>
-
-        {headerAction && (
-          <div className="mobile-close">
-            <div className="mobile-header-action">{headerAction}</div>
-          </div>
-        )}
 
-        <div className="locale-selector-and-login">
-          {configLanguages &&
-            // Ensure that > 1 valid language is defined
-            Object.keys(configLanguages).filter(
-              (key) => key !== 'allLanguages' && configLanguages[key].name
-            ).length > 1 && (
-              <LocaleSelector
-                className="locale-selector"
-                configLanguages={configLanguages}
-              />
+          <div className="locale-selector-and-login">
+            {configLanguages &&
+              // Ensure that > 1 valid language is defined
+              Object.keys(configLanguages).filter(
+                (key) => key !== 'allLanguages' && configLanguages[key].name
+              ).length > 1 && (
+                <LocaleSelector
+                  className="locale-selector"
+                  configLanguages={configLanguages}
+                />
+              )}
+            {/**
+             * HACK: Normally, NavLoginButtonAuth0 should be inside a <Nav> element,
+             * however, in mobile mode, react-bootstrap's <Nav> causes the
+             * submenus of this component to be displayed full-screen-width,
+             * and that behavior is not desired here.
+             */}
+            {auth0Config && (
+              <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
             )}
-          {/**
-           * HACK: Normally, NavLoginButtonAuth0 should be inside a <Nav> element,
-           * however, in mobile mode, react-bootstrap's <Nav> causes the
-           * submenus of this component to be displayed full-screen-width,
-           * and that behavior is not desired here.
-           */}
-          {auth0Config && (
-            <NavLoginButtonAuth0 id="login-control" links={accountLinks} />
-          )}
-        </div>
-      </Navbar>
+          </div>
+        </Navbar>
+      </div>
     )
   }
 }