Aria Live Storybook 插件
调试 ARIA live regions 很麻烦。验证 live regions 已连接应该轻松、自动,并且可以直接在 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 的实现。