アクセシビリティを自動で検査する仕組みを整える

npm i eslint --save-dev

npm install eslint-plugin-vue-a11y --save-dev

module.exports = {
 extends: [
    "plugin:vue-a11y/recommended",
  ]
}

npm install -D axe-core vue-axe@next

// src/main.ts
import { createApp, h, Fragment, App as IApp } from "vue";
import App from "./App.vue";
 
const setup = async () => {
  let app: IApp<Element>;
  if (import.meta.env.DEV) {
    const VueAxe = await import("vue-axe");
    app = createApp({
      render: () => h(Fragment, [h(App), h(VueAxe.VueAxePopup)]),
    });
    app.use(VueAxe.default);
  } else {
    app = createApp(App);
  }
 
  return app;
};
 
setup().then((app) => app.mount("#app"));

// vue-axe.d.ts
declare module "vue-axe";

// vite.config.js
import { defineConfig } from "vite";
 
export default defineConfig({
  // ..
  optimizeDeps: {
    include: ["axe-core"],
  },
});
 

npm run dev

// src/App.vue
 <template>
   <header>
     <img
-      alt="vue logo"
       class="logo"
       src="@/assets/logo.svg"
       width="125"
       height="125"
     />
 
     <div class="wrapper">
       <h1>Hello</h1>
     </div>
   </header>
 </template>

npm i --save--dev @storybook/addon-a11y

module.exports = {
  addons: ['@storybook/addon-a11y'],
};

// components/BadButton.vue
<script lang="ts" setup>
interface Props {
  color: "primary" | "danger";
}
 
defineProps<Props>();
</script>
 
<template>
  <button class="btn" :class="color"><slot /></button>
</template>
 
<style scoped>
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
}
 
.primary {
  background-color: blue;
  color: white;
}
 
.danger {
  background-color: coral;
  color: red;
}
</style>

// components/BadButton.stories.ts
import type { Story, Meta } from "@storybook/vue3";
import BadButton from "./BadButton.vue";
 
export default {
  title: "BadButton",
  component: BadButton,
  argTypes: {},
} as Meta;
 
const Template: Story = (args) => ({
  components: { BadButton },
  setup() {
    return { args };
  },
  template: `<BadButton v-bind="args">Button</BadButton>`,
});
 
export const Primary = Template.bind({});
Primary.args = {
  color: "primary",
};
 
export const Danger = Template.bind({});
Danger.args = {
  color: "danger",
};

npm install --save-dev jest-axe

npm install --save-dev @types/jest-axe

// components/BadInput.vue
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  inheritAttrs: false,
});
</script>
 
<script setup lang="ts">
interface Props {
  label: string;
}
 
defineProps<Props>();
</script>
 
<template>
  {{ label }}
  <input v-bind="$attrs" />
</template>

// components/BadInput.spec.ts
import { axe, toHaveNoViolations } from "jest-axe";
import { render } from "@testing-library/vue";
import BadInput from "./BadInput.vue";
 
expect.extend(toHaveNoViolations);
 
describe("components/BadInput", () => {
  it("should have no accessibility violations", async () => {
    const { container } = render(BadInput, {
      props: {
        label: "name",
      },
    });
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

$ npm run test
 
> [email protected] test
> jest
 
 FAIL  src/components/BadInput.spec.ts
  components/BadInput
    ✕ should have no accessibility violations (117 ms)
 
  ● components/BadInput › should have no accessibility violations
 
    expect(received).toHaveNoViolations(expected)
 
    Expected the HTML found at $('input') to have no violations:
 
    <input>
 
    Received:
 
    "Form elements must have labels (label)"
 
    Fix any of the following:
      Form element does not have an implicit (wrapped) <label>
      Form element does not have an explicit <label>
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element has no title attribute
      Element has no placeholder attribute
      Element's default semantics were not overridden with role="none" or role="presentation"
 
    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI
 
      13 |     });
      14 |     const results = await axe(container);
    > 15 |     expect(results).toHaveNoViolations();
         |                     ^
      16 |   });
      17 | });
      18 |
 
      at Object.<anonymous> (src/components/BadInput.spec.ts:15:21)
 
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.069 s, estimated 7 s
Ran all test suites.