update otp-ui packages and import focus trap

opentripplanner · May 24, 2024 · 3cde728 · 3cde728
1 parent 61b6795
commit 3cde728
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 73 deletions.
diff --git a/lib/components/map/point-popup.tsx b/lib/components/map/point-popup.tsx
@@ -4,12 +4,12 @@ import { Search } from '@styled-icons/fa-solid/Search'
 import { useIntl, WrappedComponentProps } from 'react-intl'
 import { useMap } from 'react-map-gl'
 import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import type { Location } from '@opentripplanner/types'
 
 import * as mapActions from '../../actions/map'
-import { getEntryRelativeTo } from '../util/get-entry-relative-to'
+import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib'
 import { Icon } from '../util/styledIcon'
 import { renderCoordinates } from '../../util/i18n'
 import { SetLocationHandler, ZoomToPlaceHandler } from '../util/types'
@@ -51,49 +51,6 @@ function MapPopup({
   const intl = useIntl()
   const { current: map } = useMap()
 
-  /**
-   * Creates a focus trap within map popup that can be dismissed with esc.
-   * https://medium.com/cstech/achieving-focus-trapping-in-a-react-modal-component-3f28f596f35b
-   */
-
-  /**
-   * Check to see which keys are down by tracking keyUp and keyDown events
-   * in order to see when "tab" and "shift" are pressed at the same time.
-   */
-  let keysDown: string[] = useMemo(() => [], [])
-
-  // Argument for document.querySelectorAll to target focusable elements.
-  const queryId = 'button#zoom-btn, #from-to button'
-
-  const _handleKeyDown = useCallback(
-    (e) => {
-      keysDown.push(e.key)
-      const element = e.target as HTMLElement
-      switch (e.key) {
-        case 'Escape':
-          clearMapPopupLocation()
-          break
-        case 'Tab':
-          if (keysDown.includes('Shift')) {
-            e.preventDefault()
-            getEntryRelativeTo(queryId, element, -1)?.focus()
-          } else {
-            e.preventDefault()
-            getEntryRelativeTo(queryId, element, 1)?.focus()
-          }
-          break
-        case ' ':
-          break
-        default:
-      }
-    },
-    [clearMapPopupLocation, keysDown]
-  )
-
-  const _handleKeyUp = (e: any) => {
-    keysDown = keysDown.filter((key) => key !== e.key)
-  }
-
   // Memoize callbacks that shouldn't change from one render to the next.
   const onSetLocationFromPopup = useCallback(
     (payload) => {
@@ -116,16 +73,16 @@ function MapPopup({
   })
 
   return (
-    <div onKeyDown={_handleKeyDown} onKeyUp={_handleKeyUp} role="presentation">
-      <Popup
-        closeButton={false}
-        closeOnClick
-        latitude={mapPopupLocation.lat}
-        longitude={mapPopupLocation.lon}
-        onClose={clearMapPopupLocation}
-        // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
-        style={{ maxWidth: '260px', width: '260px' }}
-      >
+    <Popup
+      closeButton={false}
+      closeOnClick
+      latitude={mapPopupLocation.lat}
+      longitude={mapPopupLocation.lon}
+      onClose={clearMapPopupLocation}
+      // Override inline style supplied by react-map-gl to accommodate long "plan a trip" translations.
+      style={{ maxWidth: '260px', width: '260px' }}
+    >
+      <FocusTrapWrapper closePopup={clearMapPopupLocation} id="stop-popup">
         <PopupTitleWrapper>
           <PopupTitle>
             {typeof popupName === 'string' && popupName.split(',').length > 3
@@ -148,8 +105,8 @@ function MapPopup({
             setLocation={onSetLocationFromPopup}
           />
         </div>
-      </Popup>
-    </div>
+      </FocusTrapWrapper>
+    </Popup>
   )
 }
 

diff --git a/package.json b/package.json
@@ -50,10 +50,10 @@
     "@opentripplanner/geocoder": "^2.2.2",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "^2.0.10",
-    "@opentripplanner/itinerary-body": "^5.2.8",
+    "@opentripplanner/itinerary-body": "^5.3.0",
     "@opentripplanner/location-field": "^2.0.17",
     "@opentripplanner/location-icon": "^1.4.1",
-    "@opentripplanner/map-popup": "^3.0.3",
+    "@opentripplanner/map-popup": "^3.1.0",
     "@opentripplanner/otp2-tile-overlay": "^1.0.12",
     "@opentripplanner/park-and-ride-overlay": "^2.0.8",
     "@opentripplanner/printable-itinerary": "^2.0.20",

diff --git a/yarn.lock b/yarn.lock
@@ -2434,7 +2434,7 @@
     "@opentripplanner/location-icon" "^1.4.1"
     flat "^5.0.2"
 
-"@opentripplanner/geocoder@^2.0.1", "@opentripplanner/geocoder@^2.2.2":
+"@opentripplanner/geocoder@^2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480"
   integrity sha512-tJIOOE5N9kpMj0ji1YyVfWwg4yAFVs7Ks+EET67acql768bXwRE6rHoX6oaHvKhbCDjaQ7kuPIwi1BYWHQgg0Q==
@@ -2458,14 +2458,14 @@
     "@opentripplanner/core-utils" "^11.2.3"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.2.8":
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.2.8.tgz#12cb356dc3c203af9603541d46b2c30f0cc8dbe1"
-  integrity sha512-D/gH80BlTR/J4XYyhVG234J5qVatzYwEjObHUY01u17X+uUgRcl05zv9vNSLx9Va0UDxPc7oR+Ro5VnkW+QkKA==
+"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.0.tgz#1a611dc6c49438666e58c34d0f1f88ab6ff48f2d"
+  integrity sha512-yNMluEX4jJMEdvObGcivnJCS8wMqzZ1j+zJ/40oE9uK9XNyT6o3ascpcsDPN45ZJTIUBoj1FVhItvrfLxaRYMA==
   dependencies:
-    "@opentripplanner/core-utils" "^11.2.3"
+    "@opentripplanner/core-utils" "^11.3.1"
     "@opentripplanner/humanize-distance" "^1.2.0"
-    "@opentripplanner/icons" "^2.0.9"
+    "@opentripplanner/icons" "^2.0.10"
     "@opentripplanner/location-icon" "^1.4.1"
     "@styled-icons/fa-solid" "^10.34.0"
     "@styled-icons/foundation" "^10.34.0"
@@ -2497,14 +2497,14 @@
     "@styled-icons/fa-regular" "^10.34.0"
     "@styled-icons/fa-solid" "^10.34.0"
 
-"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.0.3.tgz#4ded505bcf23f505b07abfe5d24142eb2faa483a"
-  integrity sha512-AvXLUfnEj5PoDHd8eFdpMXsXqmLyreSPPeiVIggNvZUDTm6uHpCAovSrSOOoFT3nOIEaUw4TCcjamJeV0gaNJw==
+"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.1.0.tgz#51627e4d4c902d10bec6fffa2c3e3eed0994a42c"
+  integrity sha512-UzQ9OYOslNqDxvGWIPOZ4KyIJ7R0CO2riC56AJeHz5EI0JSv1Rlt1b6JTz0BtJ9cbHksB2QB43x8bJs6if7mfg==
   dependencies:
-    "@opentripplanner/base-map" "^3.0.16"
-    "@opentripplanner/core-utils" "^11.2.3"
-    "@opentripplanner/from-to-location-picker" "^2.1.11"
+    "@opentripplanner/base-map" "^3.1.0"
+    "@opentripplanner/core-utils" "^11.3.1"
+    "@opentripplanner/from-to-location-picker" "^2.1.12"
     flat "^5.0.2"
 
 "@opentripplanner/otp2-tile-overlay@^1.0.12":