Test the accessibility of a Vue component

Last modified by Manuel Leduc on 2026/03/25 15:39

Content

Steps

  1. Add a dependency to vitest pnpm add -D vitest
  2. Add a dependency to @xwiki/platform-test-accessibility pnpm add -D @xwiki/platform-test-accessibility
  3. Import the Vue component import MyComponent from "../MyComponent.vue"
  4. Define a mount helper for the test suite using mountHelper const accessibilyMount = mountHelper(MyComponent);
  5. Define the test suite
    import MyComponent from "../MyComponent.vue";
    import { mountHelper, runTest } from "@xwiki/platform-test-accessibility";
    import { describe } from "vitest";
    
    const accessibilyMount = mountHelper(MyComponent);
    
    describe("Test suite description", () => {
      runTest("test description", accessibilyMount(), () => {
        // Assertions ....
        // After this step, an axe-core validation is performed on the tested component.
        // Is is possible to call assertAxe during the test to assert the accessibility during intermediate states of the component
      });
    });

Get Connected