Fix Accessibility and Test for Accessibility Issues

.github/workflows/node-ci.yml

@@ -8,7 +8,6 @@ on:
 
 jobs:
   test-build-release:
-
     runs-on: ubuntu-latest
 
     steps:
@@ -29,6 +28,8 @@ jobs:
         run: yarn jest
       - name: Build example project
         run: yarn build
+      - name: Run a11y tests
+        run: yarn a11y-test
 
       # at this point, the build is successful
       - name: Semantic Release

.gitignore

@@ -18,3 +18,4 @@ dist
 # secrets. Ignore any versions of config.yml, except for example.
 *config.yml
 !example-config.yml
+!test-config.yml

a11y/a11y.test.js

@@ -0,0 +1,71 @@
+import fs from 'fs'
+import path from 'path'
+
+import puppeteer from 'puppeteer'
+import execa from 'execa'
+
+import { mockServer } from './mock-server'
+
+const OTP_RR_CONFIG_FILE_PATH = './config.yml'
+const OTP_RR_CONFIG_BACKUP_PATH = './config.non-test.yml'
+const OTP_RR_TEST_CONFIG_PATH = './a11y/test-config.yml'
+
+let server
+
+beforeEach(() => {
+  // backup current config file
+  if (fs.existsSync(OTP_RR_CONFIG_FILE_PATH)) {
+    fs.renameSync(
+      OTP_RR_CONFIG_FILE_PATH,
+      OTP_RR_CONFIG_BACKUP_PATH
+    )
+    console.log('Backed up current OTP-RR config file')
+  }
+  // copy over test config file
+  fs.copyFileSync(
+    OTP_RR_TEST_CONFIG_PATH,
+    OTP_RR_CONFIG_FILE_PATH
+  )
+  console.log('Copied a11y test config file')
+
+  // Build OTP-RR main.js using new config file
+  execa.sync('yarn', ['build'])
+  console.log('Built OTP-RR')
+
+  // Launch mock OTP server
+  const MOCK_SERVER_PORT = 9999
+  server = mockServer.listen(MOCK_SERVER_PORT, () => {
+    console.log(`Mock response server running on http://localhost:${MOCK_SERVER_PORT}`)
+  })
+})
+
+afterEach(async () => {
+  fs.unlinkSync(OTP_RR_CONFIG_FILE_PATH)
+  if (fs.existsSync(OTP_RR_CONFIG_BACKUP_PATH)) {
+    fs.renameSync(
+      path.resolve(OTP_RR_CONFIG_BACKUP_PATH),
+      path.resolve(OTP_RR_CONFIG_FILE_PATH)
+    )
+  }
+  console.log('Restored original OTP-RR config file')
+  await server.close()
+  console.log('Closed mock server')
+})
+
+test('checks the test page with Axe', async () => {
+  jest.setTimeout(600000)
+  // 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()
+  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
+    ]
+  })
+  await browser.close()
+})

a11y/mock-server.js

@@ -0,0 +1,18 @@
+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 app = express()
+// Mock exactly the requests the test link will create requests to
+app.get('/otp/routers/default/plan', (req, res) => {
+  res.send(PLAN_REALTIME)
+})
+app.get('/otp/routers/default/index/stops', (req, res) => {
+  res.send(STOPS_FIRST)
+})
+app.get('/otp/routers/default/park_and_ride', (req, res) => {
+  res.send(PARK_AND_RIDE)
+})
+module.exports.mockServer = app

a11y/mocks/pr.json

@@ -0,0 +1 @@
+[{"name":"P+R Eastwood Park & Ride","x":-95.33571105000001,"y":29.72878155},{"name":"P+R Magnolia Park & Ride","x":-95.30348190000001,"y":29.73431275},{"name":"P+R Eastex Park & Ride","x":-95.29903390000001,"y":29.927564550000003},{"name":"P+R Fifth Ward Park & Ride","x":-95.31554165,"y":29.776087200000003},{"name":"P+R Maxey Road Park & Ride","x":-95.2173539,"y":29.784856000000005},{"name":"P+R Kashmere Park & Ride","x":-95.32818135000001,"y":29.813871050000003},{"name":"P+R Cypress Park & Ride","x":-95.68538430000001,"y":29.964691300000002},{"name":"P+R Kuykendahl Park & Ride","x":-95.4254829,"y":29.973071000000004},{"name":"P+R Fuqua Park & Ride","x":-95.2169867,"y":29.60929745},{"name":"P+R Hilcroft Park and Ride","x":-95.4953988,"y":29.722077400000003},{"name":"P+R Kingsland Park & Ride","x":-95.74403235,"y":29.773826550000003},{"name":"P+R Bay Area Park and Ride","x":-95.1242302,"y":29.553318850000004},{"name":"P+R Spring Park and Ride","x":-95.41705290000002,"y":30.0219978},{"name":"P+R Grand Parkway Park & Ride","x":-95.775868,"y":29.787324400000003},{"name":"P+R Missouri City Park and Ride","x":-95.50684269999999,"y":29.62220885},{"name":"P+R Addicks Park and Ride","x":-95.6378214,"y":29.7871035},{"name":"P+R South Point Park & Ride","x":-95.2090594,"y":29.613153700000005},{"name":"P+R West Loop Park & Ride","x":-95.4590115,"y":29.67969695},{"name":"P+R West Loop Park & Ride","x":-95.4575754,"y":29.678453400000002},{"name":"P+R West Loop Park & RIde","x":-95.45893530000001,"y":29.680618600000003},{"name":"P+R West Loop Park & Ride","x":-95.45812955,"y":29.67963985},{"name":"P+R METRO West Bellfort Park & Ride","x":-95.56057320000001,"y":29.6551495},{"name":"P+R Townsen Park and Ride","x":-95.2639671,"y":30.019417250000004},{"name":"P+R Townsen Park and Ride","x":-95.2640864,"y":30.018127850000003},{"name":"P+R","x":-95.5108057,"y":29.53132745},{"name":"P+R Baytown Park & Ride","x":-94.9865383,"y":29.79922535},{"name":"P+R Northline Transit Center Parking","x":-95.3763821,"y":29.8326085},{"name":"P+R Westwood Park and Ride","x":-95.54868185000001,"y":29.672184450000003},{"name":"P+R Northwest Transit Center Park & Ride","x":-95.4537731,"y":29.78344215},{"name":"P+R","x":-95.4542179,"y":29.7830552},{"name":"P+R Westwood Park and Ride","x":-95.54843235000001,"y":29.672169000000004},{"name":"P+R Monroe Park and Ride","x":-95.25483990000001,"y":29.664887150000002},{"name":"P+R Kingsland Park & Ride","x":-95.7442418,"y":29.77444045},{"name":"P+R Hiram Clarke Park & Ride","x":-95.43183185000001,"y":29.614350900000005},{"name":"P+R Northwest Station Park & Ride","x":-95.59425515000001,"y":29.901728900000002},{"name":"P+R Seton Lake Park & Ride","x":-95.49940015,"y":29.927510500000004},{"name":"P+R West Little York Park & Ride","x":-95.55293265,"y":29.86934865},{"name":"P+R Kingwood Park and Ride","x":-95.1830843,"y":30.054689000000003},{"name":"P+R El Dorado Park & Ride","x":-95.1573459,"y":29.54807475},{"name":"P+R Mission Bend Transit Center","x":-95.6294207,"y":29.710549450000002},{"name":"P+R Gessner Park and Ride","x":-95.53812250000001,"y":29.720586000000004},{"name":"P+R Westchase Park and Ride","x":-95.5627122,"y":29.716845600000003},{"name":"P+R Southeast Park & Ride","x":-95.35762960000001,"y":29.7019081},{"name":"P+R Tidwell Park & Ride","x":-95.33732285,"y":29.852356300000004},{"name":"P+R North Shepherd Park & Ride","x":-95.41379545000001,"y":29.876002500000002},{"name":"P+R North Shepherd Park & Ride","x":-95.41460395000001,"y":29.877670450000004},{"name":"P+R North Shepherd Park & Ride","x":-95.41447335000001,"y":29.87597495},{"name":"P+R Fannin South Park & Ride","x":-95.40149275000002,"y":29.67472505},{"name":"P+R Conroe Park & Ride","x":-95.469595,"y":30.309220600000003}]

a11y/test-config.yml

@@ -0,0 +1,116 @@
+branding: a11y-test
+title: a11y test environment
+homeTimezone: America/Chicago
+
+# Default OTP API
+api:
+  host: http://localhost:9999
+  # host: http://localhost:8001 # For testing against a local OTP instance
+  path: /otp/routers/default
+
+# Enabled multimodal routing types (e.g. interary, profile)
+routingTypes:
+  - key: ITINERARY
+    text: Exact Time
+
+# Show/hide elevation profile chart for walk/bike legs
+# elevationProfile: true
+
+# Map config
+map:
+  # Enabled map views
+  views:
+    - type: DEFAULT
+      text: Map View
+    # Delete/uncomment the following block to disable the stylized map
+    #- type: STYLIZED
+    #  text: Network View
+
+  # Default map center
+  initLat: 29.7604
+  initLon: -95.3698
+  initZoom: 12
+
+  overlays:
+    - type: bike-rental
+      name: BCycle Locations
+      modes:
+        - BICYCLE_RENT
+      companies:
+        - BCYCLE
+      mapSymbols:
+        - maxZoom: 12
+          minZoom: 0
+          type: circle
+          pixels: 3
+          fillColor: "#FF2E28"
+          dockStrokeColor: "#000000"
+        - maxZoom: 15
+          minZoom: 13
+          type: circle
+          pixels: 5
+          fillColor: "#FF2E28"
+          dockStrokeColor: "#000000"
+        - maxZoom: 20
+          minZoom: 16
+          fillColor: "#FF2E28"
+          dockStrokeColor: "#000000"
+          type: hubAndFloatingBike
+
+    - type: park-and-ride
+      name: Park & Ride Locations
+      maxTransitDistance: 1000
+      modes:
+        - CAR_PARK
+
+    - type: stops
+      name: Transit Stops
+      visible: true
+
+# A list of private transportation operators. These are either companies that
+# provide rental vehicles or transportation network companies. Companies that
+# have multiple modes of transport should have all modes listed as a string with
+# commas. For example: BICYCLE_RENT,MICROMOBILITY_RENT.
+companies:
+  - id: BCYCLE
+    label: BCycle
+    modes: BICYCLE_RENT
+
+# Mode selector configuration
+modes:
+  transitModes:
+    - mode: BUS
+      label: Bus
+    - mode: TRAM
+      label: METRORail
+
+  # access to transit modes. These options are all combined with the above
+  # transit modes in the request to OTP
+  accessModes:
+    - mode: BICYCLE
+      label: Transit + Personal bike
+    - mode: BICYCLE_RENT
+      label: Transit + BCycle
+      company: BCYCLE
+    - mode: CAR_PARK
+      label: Park & Ride
+  # which exclusive modes to show. This involves using a single mode and no
+  # transit for the duration of the trip. Further configurations of
+  # `bicycleModes`, `micromobilityModes` and/or `carModes` are needed as
+  # desired, but no extra configuration is needed for a WALK exclusive mode.
+  exclusiveModes:
+    - WALK
+    - BICYCLE
+
+  bicycleModes:
+    - mode: BICYCLE
+      label: Own Bike
+      iconWidth: 18
+    - mode: BICYCLE_RENT
+      label: BCycle
+      iconWidth: 36
+
+dateTime:
+  timeFormat: h:mm a
+  dateFormat: MM/DD/YYYY
+  longDateFormat: MMMM D, YYYY

index-for-puppeteer.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <link rel="stylesheet" href="dist/index.css">
+    <link rel="stylesheet" href="example.css">
+    <title>OTP R.R.</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="dist/index.js"></script>
+  </body>
+</html>

index.html

@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-<html>
+<!-- FIXME: insert correct i18n code here -->
+<!-- Required to meet a11y requirements -->
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

lib/components/admin/styled.js

@@ -145,7 +145,7 @@ export const Text = styled.span`
 
 export const Val = styled.span`
   :empty:before {
-    color: grey;
+    color: #685C5C;
     content: 'N/A';
   }
 `

lib/components/app/app-frame.js

@@ -9,7 +9,7 @@ import NotFound from './not-found'
  * content and an optional sub-navigation component can be inserted.
  */
 const AppFrame = ({ children, SubNav }) => (
-  <div className='otp'>
+  <div className='otp' id='otp' role='main'>
     {/* TODO: Do mobile view. */}
     <DesktopNav />
     {SubNav && <SubNav />}

lib/components/app/app-menu.js

@@ -53,7 +53,7 @@ class AppMenu extends Component {
     } = this.props
 
     return (
-      <div className='app-menu'>
+      <div aria-label='app-menu' className='app-menu' role='navigation'>
         <DropdownButton
           aria-label='Application Menu'
           className='app-menu-button'

lib/components/narrative/narrative.css

@@ -195,7 +195,7 @@
 
 .otp .tabbed-itineraries .tab-button .details {
   font-size: 12px;
-  color: gray;
+  color: #685c5c;
 }
 
 .otp .tabbed-itineraries .tab-button:hover .title {

lib/components/viewers/realtime-status-label.js

@@ -34,11 +34,11 @@ const STATUS = {
     label: 'early'
   },
   LATE: {
-    color: '#d9534f',
+    color: '#D92923',
     label: 'late'
   },
   ON_TIME: {
-    color: '#5cb85c',
+    color: '#028602',
     label: 'on time'
   },
   SCHEDULED: {

lib/components/viewers/viewers.css

@@ -138,7 +138,7 @@
 .otp .stop-viewer .trip-table .header {
   display: table-row;
   font-size: 11px;
-  color: gray;
+  color: #685c5c;
   text-align: center;
 }
 
@@ -195,14 +195,14 @@
 
 .otp .trip-viewer .strip-map-highlight {
   position: absolute;
-  background-color: cyan;
+  background-color: #13c1c1;
   width: 20px;
   height: 30px;
 }
 
 .otp .trip-viewer .strip-map-highlight-first {
   position: absolute;
-  background-color: cyan;
+  background-color: #13c1c1;
   top: 2px;
   width: 20px;
   height: 28px;
@@ -212,7 +212,7 @@
 
 .otp .trip-viewer .strip-map-highlight-last {
   position: absolute;
-  background-color: cyan;
+  background-color: #13c1c1;
   top: 0px;
   width: 20px;
   height: 28px;