Add cypress-axe

.all-contributorsrc

@@ -1,7 +1,5 @@
 {
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "commit": false,
   "commitType": "docs",
@@ -27,20 +25,14 @@
       "name": "Matthew Thornton",
       "avatar_url": "https://avatars.githubusercontent.com/u/44626690?v=4",
       "profile": "https://github.com/ThorntonMatthewD",
-      "contributions": [
-        "code",
-        "test"
-      ]
+      "contributions": ["code", "test"]
     },
     {
       "login": "Alex-Grimes",
       "name": "Alex Grimes",
       "avatar_url": "https://avatars.githubusercontent.com/u/66704965?v=4",
       "profile": "https://github.com/Alex-Grimes",
-      "contributions": [
-        "code",
-        "test"
-      ]
+      "contributions": ["code", "test"]
     }
   ],
   "contributorsPerLine": 7,

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

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

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!