Storybook 擴充功能 Aria Live

用於檢查 ARIA 即時區域宣告的 Storybook 擴充功能

storybook-addon-aria-live 是一個用於檢查 ARIA 即時區域宣告的 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 預覽 hook 只能在裝飾器和故事函式內呼叫

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

• 如果您有將故事渲染為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',
  ],
};