Skip to content

Further a11y fixes #434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Aug 23, 2021
Merged

Further a11y fixes #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
73649e6
fix: replace inaccessible colors
miles-grant-ibigroup Aug 18, 2021
07f84de
improvement(stop-viewer): add missing aria labels
miles-grant-ibigroup Aug 18, 2021
6a2e390
refactor: a11y test stop viewer, make a11y fixes
miles-grant-ibigroup Aug 18, 2021
af86d06
test: update snapshots
miles-grant-ibigroup Aug 18, 2021
a527fc7
refactor: remove debug puppeteer flags
miles-grant-ibigroup Aug 18, 2021
d3c8510
refactor: move routes to array for testing
landonreed Aug 18, 2021
eeed488
test: repair a11y tests
miles-grant-ibigroup Aug 19, 2021
8784caf
refactor(realtime-status-label): fix scheduled departure color
miles-grant-ibigroup Aug 19, 2021
30793fa
refactor(a11y-tests): mock or ignore failing paths
miles-grant-ibigroup Aug 19, 2021
84ddbe2
ci: ignore codespell false positives
miles-grant-ibigroup Aug 19, 2021
47a10f2
ci: don't allow codespell to check itself
miles-grant-ibigroup Aug 19, 2021
88329c8
ci: codespell ignore list syntax fix
miles-grant-ibigroup Aug 19, 2021
ef18f4b
ci: replace codespell ignore list with file ignore
miles-grant-ibigroup Aug 19, 2021
74dd7d7
refactor(route-viewer): fix route details color
miles-grant-ibigroup Aug 19, 2021
7eee7b3
Merge pull request #436 from opentripplanner/a11y-all-paths
landonreed Aug 19, 2021
bc71019
refactor: address pr feedback
miles-grant-ibigroup Aug 20, 2021
bf58d44
test: update snapshots
miles-grant-ibigroup Aug 20, 2021
34da5db
improvement(pattern-row): add a11y roles
miles-grant-ibigroup Aug 20, 2021
2a60d39
refactor(stop-viewer): make expansion aria label more descriptive
miles-grant-ibigroup Aug 23, 2021
4c18a3b
test: update snapshots
miles-grant-ibigroup Aug 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .github/workflows/codespell.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ jobs:
- uses: codespell-project/actions-codespell@master
with:
check_filenames: true
skip: ./.git,yarn.lock
# The a11y test file has a false positive and the ignore list does not work
# see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
skip: ./.git,yarn.lock,./a11y/a11y.test.js
56 changes: 56 additions & 0 deletions __tests__/components/viewers/__snapshots__/stop-viewer.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -827,12 +827,15 @@ exports[`components > viewers > stop viewer should render countdown times after
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -842,6 +845,7 @@ exports[`components > viewers > stop viewer should render countdown times after
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -928,6 +932,9 @@ exports[`components > viewers > stop viewer should render countdown times after
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -1585,12 +1592,15 @@ exports[`components > viewers > stop viewer should render countdown times for st
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -1600,6 +1610,7 @@ exports[`components > viewers > stop viewer should render countdown times for st
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -1686,6 +1697,9 @@ exports[`components > viewers > stop viewer should render countdown times for st
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -2631,12 +2645,15 @@ exports[`components > viewers > stop viewer should render times after midnight w
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -2646,6 +2663,7 @@ exports[`components > viewers > stop viewer should render times after midnight w
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -2741,6 +2759,9 @@ exports[`components > viewers > stop viewer should render times after midnight w
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4200,12 +4221,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -4215,6 +4239,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4310,6 +4335,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4452,12 +4480,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
36
Expand All @@ -4467,6 +4498,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4562,6 +4594,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-36"
aria-expanded={false}
aria-label="Expand all departures for Route 36"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -4704,12 +4739,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
94
Expand All @@ -4719,6 +4757,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -4814,6 +4853,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-94"
aria-expanded={false}
aria-label="Expand all departures for Route 94"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -5010,12 +5052,15 @@ exports[`components > viewers > stop viewer should render with OTP transit index
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
94
Expand All @@ -5025,6 +5070,7 @@ exports[`components > viewers > stop viewer should render with OTP transit index
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -5120,6 +5166,9 @@ exports[`components > viewers > stop viewer should render with OTP transit index
className="expansion-button-container"
>
<button
aria-controls="route-94"
aria-expanded={false}
aria-label="Expand all departures for Route 94"
className="expansion-button"
onClick={[Function]}
>
Expand Down Expand Up @@ -6571,12 +6620,15 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
>
<div
className="route-row"
role="table"
>
<div
className="header"
role="row"
>
<div
className="route-name"
role="columnheader"
>
<b>
20
Expand All @@ -6586,6 +6638,7 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
</div>
<div
className="next-trip-preview"
role="columnheader"
>
<StopTimeCell
homeTimezone="America/Los_Angeles"
Expand Down Expand Up @@ -6681,6 +6734,9 @@ exports[`components > viewers > stop viewer should render with TriMet transit in
className="expansion-button-container"
>
<button
aria-controls="route-20"
aria-expanded={false}
aria-label="Expand all departures for Route 20"
className="expansion-button"
onClick={[Function]}
>
Expand Down
81 changes: 62 additions & 19 deletions a11y/a11y.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,39 @@ import path from 'path'
import puppeteer from 'puppeteer'
import execa from 'execa'

import { routes } from '../lib/components/app/responsive-webapp'

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
let browser, server
// 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
]

/**
* Runs a11y tests on a given OTP-RR path using the test build. Relies on
* the puppeteer browser running
*/
async function runAxeTestOnPath (otpPath) {
const page = await browser.newPage()
const filePath = `file://${path.resolve(__dirname, '../index-for-puppeteer.html')}#${otpPath}`
await Promise.all([
page.goto(filePath),
page.waitForNavigation({ waitUntil: 'networkidle2' })
])

beforeEach(() => {
await expect(page).toPassAxeTests({ disabledRules })
return page
}

beforeAll(async () => {
// backup current config file
if (fs.existsSync(OTP_RR_CONFIG_FILE_PATH)) {
fs.renameSync(
Expand All @@ -37,9 +61,11 @@ beforeEach(() => {
server = mockServer.listen(MOCK_SERVER_PORT, () => {
console.log(`Mock response server running on http://localhost:${MOCK_SERVER_PORT}`)
})
// Web security is disabled to allow requests to the mock OTP server
browser = await puppeteer.launch({args: ['--disable-web-security']})
})

afterEach(async () => {
afterAll(async () => {
fs.unlinkSync(OTP_RR_CONFIG_FILE_PATH)
if (fs.existsSync(OTP_RR_CONFIG_BACKUP_PATH)) {
fs.renameSync(
Expand All @@ -49,23 +75,40 @@ afterEach(async () => {
}
console.log('Restored original OTP-RR config file')
await server.close()
console.log('Closed mock server')
await browser.close()
console.log('Closed mock server and headless browser')
})

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`)
// Puppeteer can take a long time to load, espeically in some ci environments
jest.setTimeout(600000)
routes.forEach(route => {
const {a11yIgnore, path: pathsToTest} = route
if (a11yIgnore) {
return
}

// 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()
if (Array.isArray(pathsToTest)) {
// Run test on each path in list.
pathsToTest.forEach(async (p) => {
test(`${p} should pass Axe Tests`, async () => runAxeTestOnPath(p))
})
} else {
// Otherwise run test on individual path
test(`${pathsToTest} should pass Axe Tests`, async () => runAxeTestOnPath(pathsToTest))
}
})

test('Mocked Main Trip planner page should pass Axe Tests', async () => {
await runAxeTestOnPath('/?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')
})

test('Mocked Stop Viewer and Dropdown should pass Axe tests', async () => {
// Puppeteer can take a long time to load, espeically in some ci environments
jest.setTimeout(600000)
// Test stop viewer
const stopViewerPage = await runAxeTestOnPath('/stop/Agency')
await stopViewerPage.waitForTimeout(2000)
await stopViewerPage.click('.expansion-button')
await stopViewerPage.waitForTimeout(2000)
await expect(stopViewerPage).toPassAxeTests({ disabledRules })
})
Loading