ci: add accessibility linting and fix existing issues (#90)

resolves #89 BREAKING CHANGE Not actually breaking changes, but `2.7.0` should have been a major release (force-pushing mucked things up) so we add it here to bump.
Police-Data-Accessibility-Project · Jun 18, 2024 · fbad8ba · fbad8ba
1 parent 1370cc2
commit fbad8ba
Show file tree

Hide file tree

Showing 21 changed files with 384 additions and 156 deletions.
diff --git a/eslint-config/index.js b/eslint-config/index.js
@@ -7,11 +7,12 @@ module.exports = {
 		'plugin:vue/vue3-recommended',
 		'plugin:vue/strongly-recommended',
 		'@vue/eslint-config-prettier',
+		'plugin:vuejs-accessibility/recommended'
 	],
 	env: {
 		node: true
 	},
-	plugins: ['prettier'],
+	plugins: ['prettier', 'vuejs-accessibility'],
 	rules: {
 		'vue/require-default-prop': 'off',
 		indent: 'off',
@@ -41,9 +42,42 @@ module.exports = {
 				tabWidth: 2,
 				useTabs: true,
 				singleQuote: true,
-				quotes: [2, "single", { "avoidEscape": true }]
+				quotes: [2, 'single', { 'avoidEscape': true }]
 			},
 		],
 		'vue/no-multiple-template-root': 'off',
+		'vuejs-accessibility/alt-text': [
+      'error',
+      {
+        'elements': ['img', 'object', 'area', 'input[type="image"]'],
+        'img': ['Image'],
+        'object': ['Object'],
+        'area': ['Area'],
+        'input[type=\'image\']': ['ImageInput']
+      }
+    ],
+		"vuejs-accessibility/no-redundant-roles": [
+    	"error",
+			{
+				"nav": ["navigation"],
+			}
+		],
+		"vuejs-accessibility/media-has-caption": [
+			"error",
+			{
+				"audio": ["Audio"],
+				"video": ["Video"],
+				"track": ["Track"]
+			}
+		],
+		"vuejs-accessibility/label-has-for": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        },
+        "allowChildren": true
+      }
+    ]
 	},
 };
diff --git a/eslint-config/package.json b/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pdap-design-system/eslint-config",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "eslint config for PDAP client apps",
   "main": "index.js",
   "type": "commonjs",
@@ -16,5 +16,9 @@
   "homepage": "https://github.com/Police-Data-Accessibility-Project/design-system#readme",
   "peerDependencies": {
     "eslint": ">= 8"
+  },
+  "devDependencies": {
+    "@ronilaukkarinen/stylelint-a11y": "^1.2.9",
+    "eslint-plugin-vuejs-accessibility": "^2.3.0"
   }
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^18.4.3",
 		"@commitlint/config-conventional": "^18.4.3",
-		"@pdap-design-system/eslint-config": "^1.0.0",
+		"@pdap-design-system/eslint-config": "^1.0.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/release-notes-generator": "^12.1.0",
@@ -103,7 +103,7 @@
 		"clean:test": "rimraf coverage",
 		"lint": "run-p lint:*",
 		"lint:css": "stylelint 'src/**/*.{css,vue}'",
-		"lint:es": "eslint src --ext .ts .",
+		"lint:es": "eslint --ext .ts,.vue src",
 		"lint:ts": "vue-tsc",
 		"postbuild": "rimraf dist/{config,utils}",
 		"posttest": "npm run clean:test",
@@ -135,4 +135,4 @@
 			"path": "./node_modules/cz-conventional-changelog"
 		}
 	}
-}
+}
diff --git a/src/components/Breadcrumbs/PdapBreadcrumbs.vue b/src/components/Breadcrumbs/PdapBreadcrumbs.vue
@@ -1,6 +1,6 @@
 <template>
 	<nav aria-label="Breadcrumb">
-		<transition-group class="pdap-breadcrumbs" name="pdap-breadcrumbs" tag="ul">
+		<transition-group class="pdap-breadcrumbs" tag="ul">
 			<li
 				v-for="breadcrumb in breadcrumbs"
 				:key="breadcrumb.text"
@@ -58,15 +58,19 @@ export default {
 .pdap-breadcrumbs .is-active {
 	@apply text-neutral-950;
 }
+</style>
 
-/* Animations */
-.pdap-breadcrumbs-enter-active,
-.pdap-breadcrumbs-leave-active {
-	transition: opacity 0.2s ease;
-}
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+	/* Animations */
+	.v-enter-active,
+	.v-leave-active {
+		transition: opacity 0.2s ease;
+	}
 
-.pdap-breadcrumbs-enter-from,
-.pdap-breadcrumbs-leave-to {
-	opacity: 0;
+	.v-enter-from,
+	.v-leave-to {
+		opacity: 0;
+	}
 }
 </style>
diff --git a/src/components/Breadcrumbs/__snapshots__/breadcrumbs.spec.ts.snap b/src/components/Breadcrumbs/__snapshots__/breadcrumbs.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`PdapBreadcrumbs > renders breadcrumbs correctly for a double-nested route 1`] = `
 <nav aria-label="Breadcrumb">
-  <transition-group-stub appear="false" class="pdap-breadcrumbs" css="true" name="pdap-breadcrumbs" persisted="false" tag="ul">
+  <transition-group-stub appear="false" class="pdap-breadcrumbs" css="true" persisted="false" tag="ul">
     <li class>
       <a>Product</a>
     </li>
@@ -18,7 +18,7 @@ exports[`PdapBreadcrumbs > renders breadcrumbs correctly for a double-nested rou
 
 exports[`PdapBreadcrumbs > renders breadcrumbs correctly for a single-nested route 1`] = `
 <nav aria-label="Breadcrumb">
-  <transition-group-stub appear="false" class="pdap-breadcrumbs" css="true" name="pdap-breadcrumbs" persisted="false" tag="ul">
+  <transition-group-stub appear="false" class="pdap-breadcrumbs" css="true" persisted="false" tag="ul">
     <li class>
       <a>Product</a>
     </li>

diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
@@ -50,7 +50,7 @@ export default {
 	}
 
 	.pdap-button-primary {
-		@apply pdap-button bg-brand-gold text-white;
+		@apply pdap-button bg-brand-gold text-neutral-50;
 	}
 
 	.pdap-button-primary[type='submit'] {

diff --git a/src/components/Dropdown/PdapDropdown.vue b/src/components/Dropdown/PdapDropdown.vue
@@ -3,6 +3,7 @@
 		ref="dropdownRef"
 		v-click-outside="closeDropdown"
 		class="pdap-dropdown"
+		role="presentation"
 		@keydown.escape="closeDropdown"
 		v-on="dropdownHandlers"
 	>
@@ -157,20 +158,22 @@ export default {
 		@apply flex flex-col w-full overflow-hidden relative max-h-[var(--dropdown-content-max-height)] px-2;
 	}
 
-	.pdap-dropdown-content.dropdown-enter-active,
-	.pdap-dropdown-content.dropdown-leave-active {
-		transition:
-			opacity 0.5s ease-in,
-			max-height 0.7s ease;
-	}
-
-	.pdap-dropdown-content.dropdown-enter-from,
-	.pdap-dropdown-content.dropdown-leave-to {
-		@apply max-h-0 opacity-0;
-	}
-
 	.pdap-dropdown-content > * {
 		@apply my-2 p-0 w-full max-w-[calc(100%-4px)] items-start text-start;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.pdap-dropdown-content.dropdown-enter-active,
+		.pdap-dropdown-content.dropdown-leave-active {
+			transition:
+				opacity 0.5s ease-in,
+				max-height 0.7s ease;
+		}
+
+		.pdap-dropdown-content.dropdown-enter-from,
+		.pdap-dropdown-content.dropdown-leave-to {
+			@apply max-h-0 opacity-0;
+		}
+	}
 }
 </style>