Skip to content

Commit 9c1b9f4

Browse files
committed
docs: mention need for a11y testing components within CONTRIBUTING guide
1 parent 1e7d6cb commit 9c1b9f4

1 file changed

Lines changed: 26 additions & 1 deletion

File tree

CONTRIBUTING.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,32 @@ describe('featureName', () => {
227227
> [!TIP]
228228
> If you need access to the Nuxt context in your unit or component test, place your test in the `test/nuxt/` directory and run with `pnpm test:nuxt`
229229
230-
### E2e tests
230+
### Component accessibility tests
231+
232+
All new components should have a basic accessibility test in `test/nuxt/components.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations.
233+
234+
```typescript
235+
import MyComponent from '~/components/MyComponent.vue'
236+
237+
describe('MyComponent', () => {
238+
it('should have no accessibility violations', async () => {
239+
const component = await mountSuspended(MyComponent, {
240+
props: {
241+
/* required props */
242+
},
243+
})
244+
const results = await runAxe(component)
245+
expect(results.violations).toEqual([])
246+
})
247+
})
248+
```
249+
250+
The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
251+
252+
> [!IMPORTANT]
253+
> Just because axe-core doesn't find any obvious issues, it does not mean a component is accessible. Please do additional checks and use best practices.
254+
255+
### End to end tests
231256

232257
Write end-to-end tests using Playwright:
233258

0 commit comments

Comments
 (0)