From 73649e6667594bece4177cf6bb5c0e1c2b649044 Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Wed, 18 Aug 2021 17:42:55 +0200 Subject: [PATCH 01/19] fix: replace inaccessible colors --- lib/components/narrative/default/itinerary-summary.js | 2 +- lib/components/narrative/line-itin/itin-summary.js | 2 +- lib/components/user/places/place-location-field.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/components/narrative/default/itinerary-summary.js b/lib/components/narrative/default/itinerary-summary.js index f8da7f666..1063875c3 100644 --- a/lib/components/narrative/default/itinerary-summary.js +++ b/lib/components/narrative/default/itinerary-summary.js @@ -29,7 +29,7 @@ const modeColors = { RAIL: '#BDDAC0', WALK: '#DFC486' } -const DEFAULT_COLOR = 'grey' +const DEFAULT_COLOR = '#685C5C' function getModeColor (mode) { if (!mode) return DEFAULT_COLOR diff --git a/lib/components/narrative/line-itin/itin-summary.js b/lib/components/narrative/line-itin/itin-summary.js index 43641a58c..b457e95ac 100644 --- a/lib/components/narrative/line-itin/itin-summary.js +++ b/lib/components/narrative/line-itin/itin-summary.js @@ -17,7 +17,7 @@ const Container = styled.div` ` const Detail = styled.div` - color: #999999; + color: #676767; font-size: 13px; ` diff --git a/lib/components/user/places/place-location-field.js b/lib/components/user/places/place-location-field.js index 31a75fdba..29cfd4f4a 100644 --- a/lib/components/user/places/place-location-field.js +++ b/lib/components/user/places/place-location-field.js @@ -47,7 +47,7 @@ const StyledLocationField = styled(LocationField)` width: 100%; ::placeholder { - color: #999; + color: #676767; } } ${InputGroup} { From 07f84de4e7071c54cc7747e81f942ec9cedde289 Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Wed, 18 Aug 2021 18:14:13 +0200 Subject: [PATCH 02/19] improvement(stop-viewer): add missing aria labels --- lib/components/viewers/pattern-row.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/viewers/pattern-row.js b/lib/components/viewers/pattern-row.js index e690fa963..c6349c6b7 100644 --- a/lib/components/viewers/pattern-row.js +++ b/lib/components/viewers/pattern-row.js @@ -72,7 +72,7 @@ export default class PatternRow extends Component { {/* expansion chevron button */}
-
From 6a2e390e77fe2075693d4706e77413a9847224f8 Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Wed, 18 Aug 2021 19:20:01 +0200 Subject: [PATCH 03/19] refactor: a11y test stop viewer, make a11y fixes --- a11y/a11y.test.js | 28 +++++-- a11y/mock-server.js | 12 +++ a11y/mocks/stopviewer/routes.json | 10 +++ a11y/mocks/stopviewer/stop.json | 12 +++ a11y/mocks/stopviewer/stoptimes.json | 73 +++++++++++++++++++ .../viewers/realtime-status-label.js | 2 +- 6 files changed, 128 insertions(+), 9 deletions(-) create mode 100644 a11y/mocks/stopviewer/routes.json create mode 100644 a11y/mocks/stopviewer/stop.json create mode 100644 a11y/mocks/stopviewer/stoptimes.json diff --git a/a11y/a11y.test.js b/a11y/a11y.test.js index c6c40a7b3..32bad8c0d 100644 --- a/a11y/a11y.test.js +++ b/a11y/a11y.test.js @@ -54,18 +54,30 @@ afterEach(async () => { test('checks the test page with Axe', async () => { jest.setTimeout(600000) + // These rules aren't relevant to this project + const disabledRules = [ + 'region', // Leaflet does not comply + 'meta-viewport', // Leaflet does not comply + 'page-has-heading-one' // Heading is provided by logo + ] + // Web security is disabled to allow requests to the mock OTP server - const browser = await puppeteer.launch({args: ['--disable-web-security']}) - const page = await browser.newPage() + const browser = await puppeteer.launch({args: ['--disable-web-security'], headless: false}) + let page = await browser.newPage() + // Test trip planner await page.goto(`file://${path.resolve(__dirname, '../index-for-puppeteer.html')}#/?ui_activeSearch=0qoydlnut&ui_activeItinerary=0&fromPlace=1900%20Main%20Street%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.750144%2C-95.370998&toPlace=800%20Congress%2C%20Houston%2C%20TX%2C%20USA%3A%3A29.76263%2C-95.362178&date=2021-08-04&time=08%3A14&arriveBy=false&mode=WALK%2CBUS%2CTRAM&showIntermediateStops=true&maxWalkDistance=1207&optimize=QUICK&walkSpeed=1.34&ignoreRealtimeUpdates=true&numItineraries=3&otherThanPreferredRoutesPenalty=900`) - // These rules aren't relevant to this project await expect(page).toPassAxeTests({ - disabledRules: [ - 'region', // Leaflet does not comply - 'meta-viewport', // Leaflet does not comply - 'page-has-heading-one' // Heading is provided by logo - ] + disabledRules: disabledRules }) + // Test stop viewer + page = await browser.newPage() + await page.goto(`file://${path.resolve(__dirname, '../index-for-puppeteer.html')}#/stop/exampleStop?ui_activeSearch=u9dwdhmyo&ui_activeItinerary=2&fromPlace=945 Columbia Street%2C Houston%2C TX%2C USA%3A%3A29.78881282532108%2C-95.3932571411133&toPlace=Hardy Street Yard%2C Houston%2C TX%2C USA%3A%3A29.772125846370574%2C-95.3551483154297&date=2021-08-18&time=17%3A07&arriveBy=false&mode=WALK%2CBUS%2CTRAM&showIntermediateStops=true&maxWalkDistance=1207&optimize=QUICK&walkSpeed=1.34&ignoreRealtimeUpdates=true&numItineraries=3&otherThanPreferredRoutesPenalty=900`) + await page.waitForTimeout(4000) + await page.click('.expansion-button') + await expect(page).toPassAxeTests({ + disabledRules: disabledRules + }) + await browser.close() }) diff --git a/a11y/mock-server.js b/a11y/mock-server.js index 8c4863aad..47d56151d 100644 --- a/a11y/mock-server.js +++ b/a11y/mock-server.js @@ -3,6 +3,9 @@ const express = require('express') const PLAN_REALTIME = require('./mocks/plan.json') const STOPS_FIRST = require('./mocks/stops.json') const PARK_AND_RIDE = require('./mocks/pr.json') +const STOP_VIEWER_STOPTIMES = require('./mocks/stopviewer/stoptimes.json') +const STOP_VIEWER_STOP = require('./mocks/stopviewer/stop.json') +const STOP_VIEWER_ROUTES = require('./mocks/stopviewer/routes.json') const app = express() // Mock exactly the requests the test link will create requests to @@ -15,4 +18,13 @@ app.get('/otp/routers/default/index/stops', (req, res) => { app.get('/otp/routers/default/park_and_ride', (req, res) => { res.send(PARK_AND_RIDE) }) +app.get('/otp/routers/default/index/stops/exampleStop', (req, res) => { + res.send(STOP_VIEWER_STOP) +}) +app.get('/otp/routers/default/index/stops/exampleStop/routes', (req, res) => { + res.send(STOP_VIEWER_ROUTES) +}) +app.get('/otp/routers/default/index/stops/exampleStop/stoptimes', (req, res) => { + res.send(STOP_VIEWER_STOPTIMES) +}) module.exports.mockServer = app diff --git a/a11y/mocks/stopviewer/routes.json b/a11y/mocks/stopviewer/routes.json new file mode 100644 index 000000000..9316d3917 --- /dev/null +++ b/a11y/mocks/stopviewer/routes.json @@ -0,0 +1,10 @@ +[{ + "id": "exampleStop:1", + "shortName": "066", + "longName": "QUITMAN", + "mode": "BUS", + "color": "004080", + "agencyId": "HOU", + "agencyName": "Metropolitan Transit Authority of Harris County", + "sortOrder": -999 +}] \ No newline at end of file diff --git a/a11y/mocks/stopviewer/stop.json b/a11y/mocks/stopviewer/stop.json new file mode 100644 index 000000000..9ceb8c410 --- /dev/null +++ b/a11y/mocks/stopviewer/stop.json @@ -0,0 +1,12 @@ +{ + "id": "exampleStop", + "name": "White Oak Dr @ Oxford St", + "lat": 29.78149, + "lon": -95.391953, + "code": "6478", + "desc": "WHITE OAK DR & OXFORD ST", + "locationType": 0, + "wheelchairBoarding": 0, + "vehicleType": -999, + "vehicleTypeSet": false +} \ No newline at end of file diff --git a/a11y/mocks/stopviewer/stoptimes.json b/a11y/mocks/stopviewer/stoptimes.json new file mode 100644 index 000000000..b28210193 --- /dev/null +++ b/a11y/mocks/stopviewer/stoptimes.json @@ -0,0 +1,73 @@ +[ + { + "pattern": { + "id": "exampleStop:1:01", + "desc": "040 to Glencrest St @ Airport Blvd (Houston:743)" + }, + "times": [ + { + "stopId": "exampleStop:6478", + "stopIndex": 44, + "stopCount": 141, + "scheduledArrival": 44621, + "scheduledDeparture": 44621, + "realtimeArrival": 44719, + "realtimeDeparture": 44719, + "arrivalDelay": 102, + "departureDelay": 102, + "timepoint": false, + "realtime": true, + "realtimeState": "UPDATED", + "serviceDay": 1629262800, + "tripId": "Houston:9120959", + "blockId": "1061601", + "headsign": "TEST BUS", + "continuousPickup": -999, + "continuousDropOff": -999, + "serviceAreaRadius": 0.0 + }, + { + "stopId": "exampleStop:6478", + "stopIndex": 44, + "stopCount": 141, + "scheduledArrival": 44521, + "scheduledDeparture": 44521, + "realtimeArrival": 44419, + "realtimeDeparture": 44419, + "arrivalDelay": -102, + "departureDelay": -102, + "timepoint": false, + "realtime": true, + "realtimeState": "UPDATED", + "serviceDay": 1629262800, + "tripId": "Houston:9120953", + "blockId": "1061601", + "headsign": "HOBBY AIRPORT", + "continuousPickup": -999, + "continuousDropOff": -999, + "serviceAreaRadius": 0.0 + }, + { + "stopId": "exampleStop:6478", + "stopIndex": 44, + "stopCount": 141, + "scheduledArrival": 46321, + "scheduledDeparture": 46321, + "realtimeArrival": 46321, + "realtimeDeparture": 46321, + "arrivalDelay": 0, + "departureDelay": 0, + "timepoint": false, + "realtime": false, + "realtimeState": "SCHEDULED", + "serviceDay": 1629262800, + "tripId": "Houston:9120952", + "blockId": "1061602", + "headsign": "HOBBY AIRPORT", + "continuousPickup": -999, + "continuousDropOff": -999, + "serviceAreaRadius": 0.0 + } + ] + } +] diff --git a/lib/components/viewers/realtime-status-label.js b/lib/components/viewers/realtime-status-label.js index e93cb092f..c2eecbf49 100644 --- a/lib/components/viewers/realtime-status-label.js +++ b/lib/components/viewers/realtime-status-label.js @@ -67,7 +67,7 @@ const RealtimeStatusLabel = ({ const isEarlyOrLate = status === REALTIME_STATUS.EARLY || status === REALTIME_STATUS.LATE // Use a default background color if the status object doesn't set a color // (e.g. for 'Scheduled' status), but only in withBackground mode. - const color = STATUS[status].color || (withBackground && '#bbb') + const color = STATUS[status].color || (withBackground && '#6D6C6Cb') // Render time if provided. let renderedTime if (time) { From af86d063553b394cfc1bd9c02e333e7f7fdd28e7 Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Wed, 18 Aug 2021 19:25:48 +0200 Subject: [PATCH 04/19] test: update snapshots --- .../components/viewers/__snapshots__/stop-viewer.js.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap index 43bc5f765..b3f523dc9 100644 --- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap +++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap @@ -928,6 +928,7 @@ exports[`components > viewers > stop viewer should render countdown times after className="expansion-button-container" > @@ -83,7 +91,7 @@ export default class PatternRow extends Component { enter={{ animation: 'slideDown' }} leave={{ animation: 'slideUp' }}> {this.state.expanded && ( -
+
{/* trips table header row */}
@@ -93,17 +101,20 @@ export default class PatternRow extends Component {
{/* list of upcoming trips */} - {hasStopTimes && ( + {hasStopTimes && sortedStopTimes.map((stopTime, i) => { const { departureDelay: delay, realtimeState } = stopTime return (
-
- To {stopTime.headsign} -
+ style={{ + display: 'table-row', + fontSize: 14, + marginTop: 6 + }} + > +
To {stopTime.headsign}
) - }) - )} + })}
)} From bf58d447a7ba5e43a4f21df35af55e442c4a5fdf Mon Sep 17 00:00:00 2001 From: miles-grant-ibigroup Date: Fri, 20 Aug 2021 15:46:19 +0200 Subject: [PATCH 16/19] test: update snapshots --- .../viewers/__snapshots__/stop-viewer.js.snap | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap index b3f523dc9..74b6464bd 100644 --- a/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap +++ b/__tests__/components/viewers/__snapshots__/stop-viewer.js.snap @@ -928,7 +928,9 @@ exports[`components > viewers > stop viewer should render countdown times after className="expansion-button-container" >