Initial fixes to tab order (#2370)

* feat: reorganize wide nav * feat: reorganize tablet nav * feat: reorder other nav breakpoints * fix: use fragment to make children maintain state across breakpoints * fix: accessibility improvements to ladder page tabs * fix: remove all of the individual route selectors from tab order * refactor: turn StreetViewControl into a CustomControl * feat: insertFirst option to CustomControl, use for StreetViewControl * feat: allow street view on detour map * fixup! feat: allow street view on detour map
mbta · Jan 25, 2024 · 2e6c52a · 2e6c52a
1 parent 836a2f8
commit 2e6c52a
Show file tree

Hide file tree

Showing 12 changed files with 447 additions and 418 deletions.
diff --git a/assets/src/components/detours/detourMap.tsx b/assets/src/components/detours/detourMap.tsx
@@ -73,7 +73,7 @@ export const DetourMap = ({
   undoDisabled,
   onUndoLastWaypoint,
 }: DetourMapProps) => (
-  <Map vehicles={[]}>
+  <Map vehicles={[]} allowStreetView>
     <CustomControl position="topleft" className="leaflet-bar">
       <Button
         variant="primary"

diff --git a/assets/src/components/ladderPage.tsx b/assets/src/components/ladderPage.tsx
@@ -79,7 +79,8 @@ const LadderTab = ({
         }
       }}
       role="tab"
-      tabIndex={tab.isCurrentTab ? 0 : -1}
+      tabIndex={tab.isCurrentTab ? -1 : 0}
+      aria-selected={tab.isCurrentTab}
     >
       <div className="c-ladder-page__tab-contents">
         <div

diff --git a/assets/src/components/map/controls/StreetViewSwitch.tsx b/assets/src/components/map/controls/StreetViewSwitch.tsx
@@ -1,13 +1,13 @@
-import Leaflet, { ControlOptions } from "leaflet"
-import React, { useEffect, useId, useState } from "react"
-import ReactDOM from "react-dom"
-import { useMap, useMapEvents } from "react-leaflet"
-import { joinClasses } from "../../../helpers/dom"
+import { ControlOptions } from "leaflet"
+import React, { useId } from "react"
+import { useMapEvents } from "react-leaflet"
 import { WalkingIcon } from "../../../helpers/icon"
 import { streetViewUrl } from "../../../util/streetViewUrl"
 import { CutoutOverlay } from "../../cutoutOverlay"
 import { fullStoryEvent } from "../../../helpers/fullStory"
 import { Form } from "react-bootstrap"
+import { CustomControl } from "./customControl"
+import { joinClasses } from "../../../helpers/dom"
 
 export interface StreetViewControlProps extends ControlOptions {
   streetViewEnabled: boolean
@@ -18,31 +18,6 @@ export const StreetViewControl = ({
   streetViewEnabled,
   setStreetViewEnabled,
 }: StreetViewControlProps): JSX.Element | null => {
-  const map = useMap()
-  const portalParent = map
-    .getContainer()
-    .querySelector(".leaflet-control-container")
-  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
-
-  useEffect(() => {
-    if (!portalParent || !portalElement) {
-      setPortalElement(document.createElement("div"))
-    }
-
-    if (portalParent && portalElement) {
-      portalElement.className = joinClasses([
-        "leaflet-control",
-        "leaflet-bar",
-        "c-street-view-switch",
-        "position-absolute",
-      ])
-      portalParent.append(portalElement)
-      Leaflet.DomEvent.disableClickPropagation(portalElement)
-    }
-
-    return () => portalElement?.remove()
-  }, [portalElement, portalParent, setStreetViewEnabled])
-
   useMapEvents(
     streetViewEnabled
       ? {
@@ -75,14 +50,19 @@ export const StreetViewControl = ({
 
   return (
     <>
-      {portalElement &&
-        ReactDOM.createPortal(
-          <StreetViewSwitch
-            streetViewEnabled={streetViewEnabled}
-            setStreetViewEnabled={setStreetViewEnabled}
-          />,
-          portalElement
-        )}
+      <CustomControl
+        className={joinClasses([
+          "leaflet-bar",
+          "c-street-view-switch",
+          "position-absolute",
+        ])}
+        insertFirst
+      >
+        <StreetViewSwitch
+          streetViewEnabled={streetViewEnabled}
+          setStreetViewEnabled={setStreetViewEnabled}
+        />
+      </CustomControl>
       {streetViewEnabled && <CutoutOverlay.FollowMapMouseMove />}
     </>
   )

diff --git a/assets/src/components/map/controls/customControl.tsx b/assets/src/components/map/controls/customControl.tsx
@@ -22,10 +22,12 @@ export const CustomControl = ({
   children,
   className,
   insertAfterSelector,
+  insertFirst,
 }: ControlOptions & {
   children: ReactNode
   className?: string
   insertAfterSelector?: string
+  insertFirst?: boolean
 }): JSX.Element | null => {
   const map = useMap()
   const portalParent = map
@@ -50,14 +52,16 @@ export const CustomControl = ({
         : null
       if (elementToInsertAfter) {
         elementToInsertAfter.after(portalElement)
+      } else if (insertFirst) {
+        portalParent.prepend(portalElement)
       } else {
         portalParent.append(portalElement)
       }
       Leaflet.DomEvent.disableClickPropagation(portalElement)
     }
 
     return () => portalElement?.remove()
-  }, [portalElement, portalParent, className, insertAfterSelector])
+  }, [portalElement, portalParent, className, insertAfterSelector, insertFirst])
 
   return portalElement ? ReactDOM.createPortal(children, portalElement) : null
 }
diff --git a/assets/src/components/nav.tsx b/assets/src/components/nav.tsx
@@ -22,14 +22,13 @@ const Nav: React.FC<Props> = ({ children }) => {
     case "mobile":
       return (
         <div className="l-nav--narrow">
-          <div className="l-nav__app-content">{children}</div>
           <MobilePortraitNav isViewOpen={isViewOpen} />
+          <div className="l-nav__app-content">{children}</div>
         </div>
       )
     case "mobile_landscape_tablet_portrait":
       return (
         <div className="l-nav--medium">
-          <div className="l-nav__app-content">{children}</div>
           <div
             className="l-nav__nav-bar l-nav__nav-bar--left"
             hidden={isViewOpen}
@@ -41,34 +40,37 @@ const Nav: React.FC<Props> = ({ children }) => {
               closePickerOnViewOpen={true}
             />
           </div>
+          <div className="l-nav__app-content">{children}</div>
         </div>
       )
     case "tablet":
       return (
         <div className="l-nav--medium">
-          <div className="l-nav__app-content">{children}</div>
           <div className="l-nav__nav-bar l-nav__nav-bar--left">
             <LeftNav
               toggleMobileMenu={() => dispatch(toggleMobileMenu())}
               defaultToCollapsed={true}
               dispatcherFlag={readDispatcherFlag()}
             />
           </div>
+          <div className="l-nav__app-content">{children}</div>
         </div>
       )
     default:
       return (
         <div className="l-nav--wide">
+          <>
+            <div className="l-nav__nav-bar l-nav__nav-bar--top">
+              <TopNav />
+            </div>
+            <div className="l-nav__nav-bar l-nav__nav-bar--left">
+              <LeftNav
+                defaultToCollapsed={false}
+                dispatcherFlag={readDispatcherFlag()}
+              />
+            </div>
+          </>
           <div className="l-nav__app-content">{children}</div>
-          <div className="l-nav__nav-bar l-nav__nav-bar--top">
-            <TopNav />
-          </div>
-          <div className="l-nav__nav-bar l-nav__nav-bar--left">
-            <LeftNav
-              defaultToCollapsed={false}
-              dispatcherFlag={readDispatcherFlag()}
-            />
-          </div>
         </div>
       )
   }

diff --git a/assets/src/components/routePicker.tsx b/assets/src/components/routePicker.tsx
@@ -105,6 +105,7 @@ const SelectedRouteButton = ({
       <button
         className="c-route-picker__selected-routes-button"
         onClick={() => deselectRoute(routeId)}
+        tabIndex={-1}
       >
         {routeNameOrId(routeId, routes)}
         <OldCloseIcon className="c-route-picker__selected-routes-button-icon" />
@@ -141,6 +142,7 @@ const RouteListButton = ({
     <button
       className="c-route-picker__route-list-button"
       onClick={() => selectRoute(route.id)}
+      tabIndex={-1}
     >
       {route.name}
     </button>