11.2Storybook + Accessibility Testing

Configure Storybook to run accessibility checks on every story:

// .storybook/preview.ts
import type { Preview } from '@storybook/react';

const preview: Preview = {
    parameters: {
        a11y: {
            // axe-core configuration for all stories
            config: {
                rules: [
                    { id: 'color-contrast', enabled: true },
                    { id: 'image-alt', enabled: true },
                    { id: 'label', enabled: true },
                    { id: 'button-name', enabled: true },
                ],
            },
        },
    },
};

export default preview;

This configuration adds an "Accessibility" panel to every story in Storybook. Developers see violations in real-time while building components.