故事书 A11y 交互测试

用于常见UI图案的可再用可访问性交互测试的集合,可以被用到Storybook的测试跑道游戏功能中.

安装

npm install --save-dev @etchteam/storybook-addon-a11y-interaction-tests
# or
yarn add -D @etchteam/storybook-addon-a11y-interaction-tests

使用量

此附加提供了一组可重复使用的可访问性交互测试,您可以在您的"故事本"故事的游戏功能中使用. 测试跟随 W3C ARIA 设计模式 并测试 ARIA 恰当的角色,状态,属性,和键盘交互.

示例使用

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

使用多测试模式

您可以对组合模式的组件使用多重无障碍测试:

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

可用测试

此加法包括对下列ARIA模式的测试:

• a11yAccordion - 手风琴部件试验
• a11yAlert - 警报组件测试
• a11yAlertDialog - 警报对话框组件测试
• a11yButton - 按钮组件测试
• a11yCarousel - 旋转木马部件试验
• a11yCheckbox - 复选框组件测试
• a11yCombobox - 组合框组件测试
• a11yDisclosure - 披露内容测试
• a11yLink - 测试链接组件
• a11yModal - 模式对话框组件测试
• a11yRadio - 无线电按钮组件测试
• a11ySwitch - 测试开关组件
• a11yTable - 表格组件测试
• a11yTabs - 标签组件测试

每个测试函数接受该组件类型的特定参数.

许可证

麻省理工学院