Merge branch 'beta' into fix/accessible-colors

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+<!-- Title of PR should use a standard commit prefix (feat, fix, chore, etc.) followed by an optional context ((components), (linting), etc), and a succinct description. I.E. feat(components): add MyFancyComponent -->
+
+<!-- Does not have to match PR title. I.E. MyFancyComponent -->
+# {Insert short title}
+
+<!-- What is the rationale for the changes? -->
+## Background
+- a
+- b
+- c
+
+<!-- What is the description of the changes? -->
+## Description
+- Adds this
+- Removes that
+
+## Acceptance Criteria
+<!-- What are the steps to test the changes? -->
+1. a
+2. b
+3. c

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
+      }
+    ]
 	},
 };

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"
   }
-}
+}

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"
 		}
 	}
-}
+}

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>

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>

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'] {