Aria 实时 Storybook 插件
调试ARIA 实时区域 非常麻烦。验证实时区域是否已连接应该很容易、自动且可以在故事中直接使用。
入门
首先，安装插件。
$ yarn add aria-live-storybook-addon
将此行添加到您的 main.js 文件中（如果需要，在您的 Storybook 配置目录中创建此文件）。
module.exports = {
addons: ['aria-live-storybook-addon'],
};
安装后，您将获得一个新的面板：Aria 实时区域。
此面板将观察您故事中 aria-live=polite 和 aria-live=assertive 元素的变化。
示例
可以在Storybook 上的 Chromatic 中找到实现示例。
限制
此插件仅确认故事中第一个 aria-live 元素的 polite 和 assertive 类型。
在实践中，应用程序每种类型应该只有一个 aria-live 播报器。
常见问题
为什么后续事件没有显示？
当使用 React 等 UI 库时，Chrome 和 Firefox 等浏览器可能不会观察文本更改，只会观察添加。这对于此插件以及屏幕阅读器的体验都是正确的。
为了确保辅助技术的用户能够观察到更改，请确保清除 aria-live 元素的内容。
如果您正在寻找实现策略，可以考虑此使用 React Hooks 的实现。
