Aria Live Storybook 附加元件
偵錯 ARIA 即時區域 相當麻煩。驗證即時區域是否已連線應該要簡單、自動且可在 Story 中直接使用。
開始使用
首先，安裝附加元件。
$ yarn add aria-live-storybook-addon
將此行新增至您的 main.js 檔案 (如果需要，請在您的 Storybook 設定目錄中建立此檔案)。
module.exports = {
addons: ['aria-live-storybook-addon'],
};
安裝完成後，您將會有一個新的面板：Aria Live Regions。
此面板將會觀察您 Story 中 aria-live=polite 和 aria-live=assertive 元素的變更。
範例
實作範例可以在 Storybook 上找到，位於 Chromatic。
限制
此附加元件僅會確認 Story 中類型為 polite 和 assertive 的第一個 aria-live 元素。
實際上，一個應用程式每個類型應該只有一個 aria-live 通告器。
常見問題
為何後續事件沒有顯示？
當使用 React 等 UI 函式庫時，Chrome 和 Firefox 等瀏覽器可能不會觀察到文字變更，只會觀察到新增。這對於此附加元件以及螢幕閱讀器的體驗來說都是如此。
為確保輔助技術的使用者能夠觀察到變更，請務必清除 aria-live 元素的內容。
如果您正在尋找實作策略，請考慮這個使用 React Hooks 的實作方式。
