Preview Integration

/**
 * Experimental AfterEach hook for running accessibility tests
 * Automatically executes accessibility tests after story rendering
 * @param context - Story context containing reporting, parameters, and globals
 */
export const experimental_afterEach: AfterEach<any>;

interface AfterEach<TArgs> {
  (context: {
    reporting: {
      addReport: (report: A11yTestReport) => void;
      reports: Array<{ type: string; status: string; result?: any }>;
    };
    parameters: {
      a11y?: A11yParameters;
      [key: string]: any;
    };
    globals: {
      a11y?: A11yGlobals;
      [key: string]: any;
    };
  }): Promise<void>;
}

// In .storybook/preview.js
import { experimental_afterEach } from '@storybook/addon-a11y/preview';

export default {
  hooks: {
    afterEach: experimental_afterEach
  }
};

// The hook automatically runs after each story and adds accessibility reports

/**
 * Default global configuration for accessibility addon
 * Sets manual testing to false by default
 */
export const initialGlobals: {
  a11y: {
    manual: false;
  };
};

// In .storybook/preview.js
import { initialGlobals } from '@storybook/addon-a11y/preview';

export default {
  globals: {
    ...initialGlobals,
    // Override if needed
    a11y: {
      manual: true  // Disable automatic testing
    }
  }
};

/**
 * Default parameter configuration for accessibility testing
 * Sets test mode to 'todo' by default
 */
export const parameters: {
  a11y: A11yParameters;
};

// In .storybook/preview.js
import { parameters } from '@storybook/addon-a11y/preview';

export default {
  parameters: {
    ...parameters,
    // Override or extend as needed
    a11y: {
      test: 'error',  // Change from 'todo' to 'error'
      config: {
        rules: [{ id: 'color-contrast', enabled: true }]
      }
    }
  }
};

interface A11yTestReport {
  type: 'a11y';
  version: 1;
  result: AxeResults | { error: Error };
  status: 'passed' | 'failed' | 'warning';
}

interface A11yParameters {
  element?: ElementContext;
  config?: Spec;
  options?: RunOptions;
  /** @deprecated Use globals.a11y.manual instead */
  manual?: boolean;
  disable?: boolean;
  test?: 'off' | 'todo' | 'error';
}

interface AxeResults {
  url: string;
  timestamp: string;
  testEngine: {
    name: string;
    version: string;
  };
  testRunner: {
    name: string;
  };
  testEnvironment: {
    userAgent: string;
    windowWidth: number;
    windowHeight: number;
    orientationAngle?: number;
    orientationType?: string;
  };
  toolOptions: RunOptions;
  violations: Array<AxeResult>;
  passes: Array<AxeResult>;
  incomplete: Array<AxeResult>;
  inapplicable: Array<AxeResult>;
}

interface AxeResult {
  id: string;
  impact?: 'minor' | 'moderate' | 'serious' | 'critical';
  tags: string[];
  description: string;
  help: string;
  helpUrl: string;
  nodes: Array<{
    any: Array<AxeCheckResult>;
    all: Array<AxeCheckResult>;
    none: Array<AxeCheckResult>;
    impact?: 'minor' | 'moderate' | 'serious' | 'critical';
    html: string;
    target: string[];
  }>;
}

interface AxeCheckResult {
  id: string;
  impact: string;
  message: string;
  data: any;
  relatedNodes?: Array<{
    target: string[];
    html: string;
  }>;
}

// In a Vitest test file
import { experimental_afterEach } from '@storybook/addon-a11y/preview';

// The hook will automatically throw errors in Vitest when violations are found
// No additional configuration needed