Storybook 附加组件 Aria Live

用于检查 ARIA live 区域公告的 Storybook 附加组件

storybook-addon-aria-live 是一个用于检查 ARIA live 区域公告的 Storybook 附加组件。它在内部使用 aria-live-capture 来检测公告。

在线测试

安装

storybook-addon-aria-live 应该包含在开发依赖项中。

npm install --dev storybook-addon-aria-live

在您的 .storybook/main.ts 中

const config: StorybookConfig = {
  addons: ['storybook-addon-aria-live']
}

使用 Storybook 参数 来设置全局或特定于故事的选项

在您的 .storybook/preview.ts 中

export const parameters = {
  'aria-live': {
    /** Indicates whether live regions inside `ShadowRoot`s should be tracked. Defaults to false. */
    includeShadowDom: true,
  },
};

开发

项目设置基于 storybookjs/addon-kit。有关工具的说明，请参见其自述文件。

故障排除

1. 错误: Storybook 预览钩子只能在装饰器和故事函数内部调用

这是由 storybookjs/storybook#9893 引起的。有一些解决方法可用

• 如果您有自定义装饰器，这些装饰器将 Story 呈现为**React 元素**，请将其更改为调用故事。

// preview.js

export const decorators = [
  function withCustomDecorator(Story) {
-    return <Story />;
+    return Story();
  }
]

• 如果您没有自定义装饰器，则可能是第三方附加组件导致了此问题。如果确定了此类附加组件，请确保向项目报告问题。作为解决方法，请尝试在 main.js 中重新排序您的附加组件。

// main.js

module.exports = {
  addons: [
+    'some-addon-using-stories-as-react-elements-instead-of-functions',
    'storybook-addon-aria-live',
-    'some-addon-using-stories-as-react-elements-instead-of-functions',
  ],
};