Test the accessibility of a Vue component
Last modified by Manuel Leduc on 2026/03/25 15:39
Content
Steps
- Add a dependency to vitest
pnpm add -D vitest - Add a dependency to @xwiki/platform-test-accessibility
pnpm add -D @xwiki/platform-test-accessibility - Import the Vue component
import MyComponent from "../MyComponent.vue" - Define a mount helper for the test suite using mountHelper
const accessibilyMount = mountHelper(MyComponent); - 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 }); });