@etchteam/storybook-addon-a11y-interaction-tests N

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

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 and test for proper ARIA roles, states, properties, and keyboard interactions.

Example Usage

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<typeof Button> = {
  component: Button,
  argTypes: {
    // ... your argTypes
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

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:

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 });
  },
};