Storybook Addon 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。请参阅其 README 以获取有关工具的说明。

故障排除

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

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

• 如果你自定义的装饰器将 Story 渲染为 React 元素，请将其更改为直接调用 story。

// 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',
  ],
};