https://github.com/etchteam/storybook-addon-a11y-interaction-tests
Storybook addon for accessibility interaction tests
https://github.com/etchteam/storybook-addon-a11y-interaction-tests
Last synced: 4 months ago
JSON representation
Storybook addon for accessibility interaction tests
- Host: GitHub
- URL: https://github.com/etchteam/storybook-addon-a11y-interaction-tests
- Owner: etchteam
- Created: 2025-04-01T10:07:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-04T10:52:53.000Z (11 months ago)
- Last Synced: 2025-08-04T14:30:41.994Z (11 months ago)
- Language: TypeScript
- Size: 603 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storybook A11y Interaction Tests
A collection of reusable accessibility interaction tests for common UI patterns that can be used in Storybook's test runner play functions.
## Installation
```bash
npm install --save-dev @etchteam/storybook-addon-a11y-interaction-tests
# or
yarn add -D @etchteam/storybook-addon-a11y-interaction-tests
```
## Usage
This addon provides a set of reusable accessibility interaction tests that you can use in your Storybook stories' play functions. The tests follow the [W3C ARIA Design Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) and test for proper ARIA roles, states, properties, and keyboard interactions.
### Example Usage
```tsx
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent } from '../utils/test-utils';
import { a11yButton } from '@etchteam/storybook-addon-a11y-interaction-tests';
import { Button } from './Button';
const meta: Meta = {
component: Button,
argTypes: {
// ... your argTypes
},
};
export default meta;
type Story = StoryObj;
export const Primary: Story = {
args: {
label: 'Button',
primary: true,
},
play: async ({ canvasElement, step }) => {
// Run the a11y button tests
await a11yButton({
step,
canvasElement,
isDisabled: false,
isToggle: false,
});
// Add any additional tests specific to your button component
},
};
export const Disabled: Story = {
args: {
label: 'Disabled Button',
disabled: true,
},
play: async ({ canvasElement, step }) => {
await a11yButton({
step,
canvasElement,
isDisabled: true,
});
},
};
```
### Using Multiple Test Patterns
You can use multiple accessibility tests for components that combine patterns:
```tsx
import { a11yButton, a11yDisclosure } from '@etchteam/storybook-addon-a11y-interaction-tests';
// ...
export const DisclosureButton: Story = {
args: {
// ...
},
play: async ({ canvasElement, step }) => {
// Test both button and disclosure aspects
await a11yButton({ step, canvasElement });
await a11yDisclosure({ step, canvasElement });
},
};
```
### Available Tests
This addon includes tests for the following ARIA patterns:
- `a11yAccordion` - Tests for accordion components
- `a11yAlert` - Tests for alert components
- `a11yAlertDialog` - Tests for alert dialog components
- `a11yButton` - Tests for button components
- `a11yCarousel` - Tests for carousel components
- `a11yCheckbox` - Tests for checkbox components
- `a11yCombobox` - Tests for combobox components
- `a11yDisclosure` - Tests for disclosure components
- `a11yLink` - Tests for link components
- `a11yModal` - Tests for modal dialog components
- `a11yRadio` - Tests for radio button components
- `a11ySwitch` - Tests for switch components
- `a11yTable` - Tests for table components
- `a11yTabs` - Tests for tabs components
Each test function accepts parameters specific to that component type.
## License
MIT