Skip to content

Commit c9ba529

Browse files
Merge pull request #742 from opentripplanner/a11y-search-form
Search Form A11y Adjustments
2 parents 43407f5 + 81778e9 commit c9ba529

6 files changed

+70
-43
lines changed

Diff for: lib/components/app/batch-routing-panel.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import ViewerContainer from '../viewers/viewer-container'
1717
* Main panel for the batch/trip comparison form.
1818
*/
1919
class BatchRoutingPanel extends Component {
20+
handleSubmit = (e) => e.preventDefault()
21+
2022
render() {
2123
const { activeSearch, intl, mobile, showUserSettings } = this.props
2224
const mapAction = mobile
@@ -36,7 +38,11 @@ class BatchRoutingPanel extends Component {
3638
height: '100%'
3739
}}
3840
>
39-
<div className="form" style={{ padding: '10px' }}>
41+
<form
42+
className="form"
43+
onSubmit={this.handleSubmit}
44+
style={{ padding: '10px' }}
45+
>
4046
<LocationField
4147
inputPlaceholder={intl.formatMessage(
4248
{ id: 'common.searchForms.enterStartLocation' },
@@ -63,7 +69,7 @@ class BatchRoutingPanel extends Component {
6369
/>
6470
</div>
6571
<BatchSettings />
66-
</div>
72+
</form>
6773
{!activeSearch && showUserSettings && (
6874
<UserSettings style={{ margin: '0 10px', overflowY: 'auto' }} />
6975
)}

Diff for: lib/components/form/connect-location-field.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import React from 'react'
88

99
import * as apiActions from '../../actions/api'
1010
import * as locationActions from '../../actions/location'
11-
import { getActiveSearch, getShowUserSettings } from '../../util/state'
11+
import {
12+
getActiveSearch,
13+
getShowUserSettings,
14+
hasValidLocation
15+
} from '../../util/state'
1216
import { getUserLocations } from '../../util/user'
1317
import { StyledIconWrapper } from '../util/styledIcon'
1418

@@ -57,6 +61,8 @@ export default function connectLocationField(
5761
const activeSearch = getActiveSearch(state)
5862
const query = activeSearch ? activeSearch.query : currentQuery
5963

64+
const isValid = hasValidLocation(query, ownProps.locationType)
65+
6066
// Display saved locations and recent places according to the configured persistence strategy,
6167
// unless displaying user locations is disabled via prop (e.g. in the saved-place editor
6268
// when the loggedInUser defines their saved locations).
@@ -77,6 +83,7 @@ export default function connectLocationField(
7783
const stateToProps = {
7884
currentPosition,
7985
geocoderConfig,
86+
isValid,
8087
layerColorMap: config.geocoder?.resultsColors || {},
8188
nearbyStops,
8289
sessionSearches,

Diff for: lib/components/form/connected-location-field.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ const StyledLocationField = styled(LocationField)`
1717
width: 100%;
1818
1919
${DropdownContainer} {
20-
display: table-cell;
21-
vertical-align: middle;
22-
width: 1%;
20+
display: grid;
21+
grid-template-columns: 30px 1fr 30px;
2322
}
2423
2524
${FormGroup} {
@@ -29,19 +28,16 @@ const StyledLocationField = styled(LocationField)`
2928
}
3029
3130
${Input} {
32-
display: table-cell;
3331
padding: 6px 12px;
34-
width: 100%;
3532
}
3633
3734
${InputGroup} {
3835
width: 100%;
3936
}
4037
4138
${InputGroupAddon} {
42-
display: table-cell;
43-
vertical-align: middle;
44-
width: 1%;
39+
align-self: baseline;
40+
justify-self: center;
4541
}
4642
4743
${MenuItemA} {

Diff for: lib/components/form/intermediate-place-field.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ import * as mapActions from '../../actions/map'
1515

1616
import connectLocationField from './connect-location-field'
1717

18+
// TODO: Merge with connected-location-field.js
1819
const StyledIntermediatePlace = styled(LocationField)`
1920
width: 100%;
2021
2122
${DropdownContainer} {
22-
display: table-cell;
23-
vertical-align: middle;
24-
width: 1%;
23+
display: grid;
24+
grid-template-columns: 30px 1fr 30px;
2525
}
2626
2727
${FormGroup} {
@@ -31,19 +31,16 @@ const StyledIntermediatePlace = styled(LocationField)`
3131
}
3232
3333
${Input} {
34-
display: table-cell;
3534
padding: 6px 12px;
36-
width: 100%;
3735
}
3836
3937
${InputGroup} {
4038
width: 100%;
4139
}
4240
4341
${InputGroupAddon} {
44-
display: table-cell;
45-
vertical-align: middle;
46-
width: 1%;
42+
align-self: baseline;
43+
justify-self: center;
4744
}
4845
4946
${MenuItemA} {

Diff for: package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@
4444
"@opentripplanner/geocoder": "^1.3.4",
4545
"@opentripplanner/humanize-distance": "^1.2.0",
4646
"@opentripplanner/icons": "^2.0.1",
47-
"@opentripplanner/itinerary-body": "^4.1.5",
48-
"@opentripplanner/location-field": "1.12.11",
49-
"@opentripplanner/location-icon": "^1.4.0",
47+
"@opentripplanner/itinerary-body": "^4.1.7",
48+
"@opentripplanner/location-field": "1.12.12",
49+
"@opentripplanner/location-icon": "^1.4.1",
5050
"@opentripplanner/park-and-ride-overlay": "^2.0.4",
5151
"@opentripplanner/printable-itinerary": "^2.0.7",
5252
"@opentripplanner/route-viewer-overlay": "^2.0.9",

Diff for: yarn.lock

+42-21
Original file line numberDiff line numberDiff line change
@@ -2403,10 +2403,10 @@
24032403
"@opentripplanner/location-icon" "^1.4.0"
24042404
flat "^5.0.2"
24052405

2406-
"@opentripplanner/[email protected].3":
2407-
version "1.3.3"
2408-
resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.3.3.tgz#7ba1f90e59a30d0306ebe641e8394cb60bd1a1d0"
2409-
integrity sha512-fBTdLg75OZ1Xsr3l1/XJIYlS+IDVPqm2k8fDwLYOFm+NzBo97ZZIdOkOt1ujCg0uJEv+W1KUR1WqOHwaJ0xk4Q==
2406+
"@opentripplanner/[email protected].4", "@opentripplanner/geocoder@^1.3.4":
2407+
version "1.3.4"
2408+
resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.3.4.tgz#94f1b4085ab3005ef6c8960ab5f75387db29a123"
2409+
integrity sha512-Dqzkt5wRjTbgzUg79H5ZSHHI/OG58+jeQJaPUMkBzyx759hUiHKuj5X7VwDtF3LI9mfR7SUyxOtu4QQtNvyGmQ==
24102410
dependencies:
24112411
"@conveyal/geocoder-arcgis-geojson" "^0.0.3"
24122412
"@conveyal/lonlat" "^1.4.1"
@@ -2423,16 +2423,6 @@
24232423
isomorphic-mapzen-search "^1.6.1"
24242424
lodash.memoize "^4.1.2"
24252425

2426-
"@opentripplanner/geocoder@^1.3.4":
2427-
version "1.3.4"
2428-
resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-1.3.4.tgz#94f1b4085ab3005ef6c8960ab5f75387db29a123"
2429-
integrity sha512-Dqzkt5wRjTbgzUg79H5ZSHHI/OG58+jeQJaPUMkBzyx759hUiHKuj5X7VwDtF3LI9mfR7SUyxOtu4QQtNvyGmQ==
2430-
dependencies:
2431-
"@conveyal/geocoder-arcgis-geojson" "^0.0.3"
2432-
"@conveyal/lonlat" "^1.4.1"
2433-
isomorphic-mapzen-search "^1.6.1"
2434-
lodash.memoize "^4.1.2"
2435-
24362426
"@opentripplanner/humanize-distance@^1.2.0":
24372427
version "1.2.0"
24382428
resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.2.0.tgz#71cf5d5d1b756adef15300edbba0995ccd4b35ee"
@@ -2446,7 +2436,7 @@
24462436
"@opentripplanner/core-utils" "^7.0.5"
24472437
prop-types "^15.7.2"
24482438

2449-
"@opentripplanner/itinerary-body@^4.1.3", "@opentripplanner/itinerary-body@^4.1.5":
2439+
"@opentripplanner/itinerary-body@^4.1.3":
24502440
version "4.1.5"
24512441
resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-4.1.5.tgz#10be8b3b66785bb77c6ffcaa3c2d3e260c3a93e2"
24522442
integrity sha512-EgA9NReTXU5alNv1tdQtFGK+b+UkAdSMh5N4C6hOoVJfDt55/wE8fEG539/UB7m0EfJ79k8f5sqdzu8kppcuTQ==
@@ -2463,14 +2453,32 @@
24632453
react-animate-height "^3.0.4"
24642454
react-resize-detector "^4.2.1"
24652455

2466-
"@opentripplanner/[email protected]":
2467-
version "1.12.11"
2468-
resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.12.11.tgz#ed62de5ea20bfbbbc0f3d5ae65dc0cefcce54f69"
2469-
integrity sha512-HwZl/qLC0opsKoJPdxFJh7Ukf1Xf6M8+ybaIj/YpDZMa5afjqm454W3tHVwW0U0UOcF2w5oh7TNieM7Ug0lU3Q==
2456+
"@opentripplanner/itinerary-body@^4.1.7":
2457+
version "4.1.7"
2458+
resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-4.1.7.tgz#4633350c46ef4a1cc64a3daa7ec06feaeb06c71f"
2459+
integrity sha512-wJg6p6R6GaYIs3yqmFeR3PcT//uHtDfrHwqoe9oL9dacef5/jl41P4lQ2LEszn4cyb0wcem4jhIc8P/jpthr1g==
2460+
dependencies:
2461+
"@opentripplanner/core-utils" "^8.0.0"
2462+
"@opentripplanner/humanize-distance" "^1.2.0"
2463+
"@opentripplanner/icons" "^2.0.1"
2464+
"@opentripplanner/location-icon" "^1.4.0"
2465+
"@styled-icons/fa-solid" "^10.34.0"
2466+
"@styled-icons/foundation" "^10.34.0"
2467+
date-fns "^2.28.0"
2468+
date-fns-tz "^1.2.2"
2469+
flat "^5.0.2"
2470+
react-animate-height "^3.0.4"
2471+
react-resize-detector "^4.2.1"
2472+
string-similarity "^4.0.4"
2473+
2474+
"@opentripplanner/[email protected]":
2475+
version "1.12.12"
2476+
resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-1.12.12.tgz#5fa55cfd3008b599fd11fc4775d61114c512cbf3"
2477+
integrity sha512-4cPE3WPBm3WvKdbPGd7RfPPl9mzoR+Lx6GvTweYDqNlqlVIWw6qP6wAkQUreZfEDFyxsMiBx6Jb+HyptVboJxw==
24702478
dependencies:
24712479
"@conveyal/geocoder-arcgis-geojson" "^0.0.3"
2472-
"@opentripplanner/core-utils" "^7.0.5"
2473-
"@opentripplanner/geocoder" "1.3.3"
2480+
"@opentripplanner/core-utils" "^8.0.0"
2481+
"@opentripplanner/geocoder" "1.3.4"
24742482
"@opentripplanner/humanize-distance" "^1.2.0"
24752483
"@opentripplanner/location-icon" "^1.4.0"
24762484
"@styled-icons/fa-solid" "^10.34.0"
@@ -2484,6 +2492,14 @@
24842492
"@styled-icons/fa-regular" "^10.34.0"
24852493
"@styled-icons/fa-solid" "^10.34.0"
24862494

2495+
"@opentripplanner/location-icon@^1.4.1":
2496+
version "1.4.1"
2497+
resolved "https://registry.yarnpkg.com/@opentripplanner/location-icon/-/location-icon-1.4.1.tgz#9a94bbfd2464db2f7c1be1d759e87a9d982d1448"
2498+
integrity sha512-Yg52MTV6resjSkkTsK6FxeH+s24Pjs0eWsywFmsdBbB2sVS7oueehaky6tOHjAC6In9o2Waux+tqqeip7UQkKw==
2499+
dependencies:
2500+
"@styled-icons/fa-regular" "^10.34.0"
2501+
"@styled-icons/fa-solid" "^10.34.0"
2502+
24872503
"@opentripplanner/map-popup@^1.0.0":
24882504
version "1.0.0"
24892505
resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-1.0.0.tgz#537faa42de5119ab6667e7147b81b868f8832238"
@@ -16862,6 +16878,11 @@ string-natural-compare@^3.0.1:
1686216878
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
1686316879
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
1686416880

16881+
string-similarity@^4.0.4:
16882+
version "4.0.4"
16883+
resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.4.tgz#42d01ab0b34660ea8a018da8f56a3309bb8b2a5b"
16884+
integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==
16885+
1686516886
string-width@^1.0.1:
1686616887
version "1.0.2"
1686716888
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"

0 commit comments

Comments
 (0)