From e0d99306198d02228441de94f97ba8847d151d43 Mon Sep 17 00:00:00 2001 From: Matthew Thornton <44626690+ThorntonMatthewD@users.noreply.github.com> Date: Mon, 30 Oct 2023 12:30:29 -0400 Subject: [PATCH 1/3] Add cypress-axe to e2e setup Signed-off-by: Matthew Thornton <44626690+ThorntonMatthewD@users.noreply.github.com> --- cypress/components/tsconfig.json | 2 +- cypress/e2e/about.cy.ts | 8 ++++++ cypress/e2e/map.cy.ts | 17 ++++++++++++ cypress/e2e/tsconfig.json | 2 +- cypress/support/e2e.ts | 2 ++ package-lock.json | 37 +++++++++++++++++++++++++++ package.json | 2 ++ src/App.vue | 2 ++ src/assets/style.css | 4 +++ src/components/ContributionBanner.vue | 5 +++- src/components/ContributionButton.vue | 7 ++--- 11 files changed, 80 insertions(+), 8 deletions(-) diff --git a/cypress/components/tsconfig.json b/cypress/components/tsconfig.json index f31489c..0c886f3 100644 --- a/cypress/components/tsconfig.json +++ b/cypress/components/tsconfig.json @@ -3,6 +3,6 @@ "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], - "types": ["cypress", "node"] + "types": ["cypress", "node", "cypress-axe"] } } diff --git a/cypress/e2e/about.cy.ts b/cypress/e2e/about.cy.ts index 8e6fbfd..e766932 100644 --- a/cypress/e2e/about.cy.ts +++ b/cypress/e2e/about.cy.ts @@ -12,4 +12,12 @@ describe("About page", () => { cy.contains("Upstate / Greenville SC Open Data Map Layers Demo"); }); + + it("is accessible", () => { + cy.visit("/about"); + + cy.injectAxe(); + + cy.checkA11y(); + }); }); diff --git a/cypress/e2e/map.cy.ts b/cypress/e2e/map.cy.ts index 012772e..9da4098 100644 --- a/cypress/e2e/map.cy.ts +++ b/cypress/e2e/map.cy.ts @@ -111,6 +111,14 @@ describe("Map", () => { ); }); + it("is accessible", () => { + cy.visit("/"); + + cy.injectAxe(); + + cy.checkA11y(); + }); + describe("Attribution Control", () => { it("Attribution control displays the proper message", () => { loadMap("/"); @@ -168,5 +176,14 @@ describe("Map", () => { // Maintainer control should not be visible any longer cy.get("[title='Maintainers']").should("not.exist"); }); + + it("contents of control pop-up are accessible", () => { + cy.visit("/"); + cy.get("[title='Layers']").trigger("mouseover"); + + cy.injectAxe(); + + cy.checkA11y(); + }); }); }); diff --git a/cypress/e2e/tsconfig.json b/cypress/e2e/tsconfig.json index ea7baf9..067f410 100644 --- a/cypress/e2e/tsconfig.json +++ b/cypress/e2e/tsconfig.json @@ -5,6 +5,6 @@ "isolatedModules": false, "target": "es2015", "lib": ["es2015", "dom"], - "types": ["cypress"] + "types": ["cypress", "cypress-axe"] } } diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index d076cec..9fcf8e9 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -14,6 +14,8 @@ // *********************************************************** // Import commands.js using ES2015 syntax: +import "cypress-axe"; + import "./commands"; // Alternatively you can use CommonJS syntax: diff --git a/package-lock.json b/package-lock.json index 328346f..87c4f39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,8 +28,10 @@ "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", "autoprefixer": "^10.4.16", + "axe-core": "^4.8.2", "cross-env": "^7.0.3", "cypress": "^13.3.1", + "cypress-axe": "^1.5.0", "eslint": "^8.51.0", "eslint-plugin-cypress": "^2.15.1", "eslint-plugin-vue": "^9.17.0", @@ -1870,6 +1872,15 @@ "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==", "dev": true }, + "node_modules/axe-core": { + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/axios": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", @@ -2545,6 +2556,19 @@ "node": "^16.0.0 || ^18.0.0 || >=20.0.0" } }, + "node_modules/cypress-axe": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/cypress-axe/-/cypress-axe-1.5.0.tgz", + "integrity": "sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "axe-core": "^3 || ^4", + "cypress": "^10 || ^11 || ^12 || ^13" + } + }, "node_modules/cypress/node_modules/@types/node": { "version": "18.18.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.5.tgz", @@ -9285,6 +9309,12 @@ "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==", "dev": true }, + "axe-core": { + "version": "4.8.2", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz", + "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==", + "dev": true + }, "axios": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", @@ -9774,6 +9804,13 @@ } } }, + "cypress-axe": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/cypress-axe/-/cypress-axe-1.5.0.tgz", + "integrity": "sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==", + "dev": true, + "requires": {} + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", diff --git a/package.json b/package.json index 959f7ee..ac7abf9 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,10 @@ "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", "autoprefixer": "^10.4.16", + "axe-core": "^4.8.2", "cross-env": "^7.0.3", "cypress": "^13.3.1", + "cypress-axe": "^1.5.0", "eslint": "^8.51.0", "eslint-plugin-cypress": "^2.15.1", "eslint-plugin-vue": "^9.17.0", diff --git a/src/App.vue b/src/App.vue index e4eec05..8314087 100644 --- a/src/App.vue +++ b/src/App.vue @@ -37,6 +37,7 @@ function mapLink() {
@@ -47,6 +48,7 @@ function mapLink() { >
Map diff --git a/src/assets/style.css b/src/assets/style.css index 08fedcd..229aec1 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -11,3 +11,7 @@ .h-full-screen { @apply fixed h-full overscroll-none; } + +.leaflet-control-attribution > a { + @apply underline; +} diff --git a/src/components/ContributionBanner.vue b/src/components/ContributionBanner.vue index 966835c..b226e19 100644 --- a/src/components/ContributionBanner.vue +++ b/src/components/ContributionBanner.vue @@ -5,7 +5,10 @@ const uiStore = useUIStore();