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.

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

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>