Add cypress-axe to e2e setup

Signed-off-by: Matthew Thornton <[email protected]>

README.md

@@ -1,7 +1,7 @@
 # Open Data Upstate / Greenville SC Map Layers Demo
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[all-contributors-logo]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square "Number of contributors on All-Contributors"
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![All Contributors][all-contributors-logo]](#contributors-)&ensp;[![Continuous Integration](https://github.com/hackgvl/open-map-data-multi-layers-demo/actions/workflows/ci.yml/badge.svg)](https://github.com/hackgvl/open-map-data-multi-layers-demo/actions/workflows/ci.yml)
@@ -130,6 +130,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://olivia.sculley.dev"><img src="https://avatars.githubusercontent.com/u/88074048?v=4?s=100" width="100px;" alt="Olivia Sculley"/><br /><sub><b>Olivia Sculley</b></sub></a><br /><a href="#ideas-oliviasculley" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=oliviasculley" title="Code">💻</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=oliviasculley" title="Tests">⚠️</a> <a href="#maintenance-oliviasculley" title="Maintenance">🚧</a> <a href="#infra-oliviasculley" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/issues?q=author%3Aoliviasculley" title="Bug reports">🐛</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=oliviasculley" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ThorntonMatthewD"><img src="https://avatars.githubusercontent.com/u/44626690?v=4?s=100" width="100px;" alt="Matthew Thornton"/><br /><sub><b>Matthew Thornton</b></sub></a><br /><a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=ThorntonMatthewD" title="Code">💻</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=ThorntonMatthewD" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Alex-Grimes"><img src="https://avatars.githubusercontent.com/u/66704965?v=4?s=100" width="100px;" alt="Alex Grimes"/><br /><sub><b>Alex Grimes</b></sub></a><br /><a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=Alex-Grimes" title="Code">💻</a> <a href="https://github.com/hackgvl/open-map-data-multi-layers-demo/commits?author=Alex-Grimes" title="Tests">⚠️</a></td>
     </tr>
   </tbody>
 </table>

cypress/components/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node", "cypress-axe"]
   }
 }

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();
+  });
 });

cypress/e2e/map.cy.ts

@@ -42,6 +42,14 @@ describe("Map", () => {
     cy.url().should("contain", "zoom=11");
   });
 
+  it("zooms the map in with scroll wheel and attempts to surpass the max zoom", () => {
+    loadMap("/?zoom=18");
+
+    cy.get(".leaflet-container").scrollLeaflet({ deltaY: -66.666666 });
+
+    cy.url().should("contain", "zoom=18");
+  });
+
   it("unzooms the map with zoom out button and changes URL", () => {
     loadMap("/?zoom=10");
 
@@ -103,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("/");
@@ -160,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();
+    });
   });
 });

cypress/e2e/tsconfig.json

@@ -5,6 +5,6 @@
     "isolatedModules": false,
     "target": "es2015",
     "lib": ["es2015", "dom"],
-    "types": ["cypress"]
+    "types": ["cypress", "cypress-axe"]
   }
 }

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:

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",

src/App.vue

@@ -37,6 +37,7 @@ function mapLink() {
     </Transition>
     <div
       :class="uiStore.showContributionBanner ? 'h-[calc(100%-24px)]' : 'h-full'"
+      role="main"
     >
       <RouterView />
     </div>
@@ -47,6 +48,7 @@ function mapLink() {
   >
     <nav
       class="flex justify-between items-center text-xl space-x-4 mx-4 md:mx-8 lg:mx-16"
+      role="navigation"
     >
       <RouterLink class="link" :to="mapLink()">Map</RouterLink>
       <ContributionButton />

src/assets/style.css

@@ -11,3 +11,7 @@
 .h-full-screen {
   @apply fixed h-full overscroll-none;
 }
+
+.leaflet-control-attribution > a {
+  @apply underline;
+}

src/components/ContributionBanner.vue

@@ -5,7 +5,10 @@ const uiStore = useUIStore();
 </script>
 
 <template>
-  <div class="sticky top-0 overflow-hidden gap-x-6 bg-gray-800 items-center">
+  <div
+    class="sticky top-0 overflow-hidden gap-x-6 bg-gray-800 items-center"
+    role="region"
+  >
     <div class="flex flex-nowrap">
       <!-- Spacer -->
       <div class="flex flex-1 shrink" aria-hidden="true" />

src/components/ContributionButton.vue

@@ -1,11 +1,8 @@
 <template>
-  <a
-    href="https://data.openupstate.org/map-layers"
-    target="_blank"
-    role="button"
-  >
+  <a href="https://data.openupstate.org/map-layers" target="_blank">
     <button
       type="button"
+      role="button"
       class="mt-1 text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-2 py-1 sm:px-5 sm:py-2 text-center"
     >
       Learn how to contribute!

src/components/MainMap.vue

@@ -229,7 +229,7 @@ onBeforeUnmount(() => mapStore.clearLayerData());
       ref="map"
       :zoom="mapStore.zoom"
       :minZoom="7"
-      :maxZoom="20"
+      :maxZoom="18"
       :center="mapStore.locationArray"
       :options="{
         attributionControl: false,