加入直播会话:周四,东部时间上午 11 点,Storybook 9 发布及 AMA

Aria Live Regions

在插件面板中观察并记录 aria-live 区域的变化

在 Github 上查看

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=politearia-live=assertive 元素的变化。

示例

可以在 StorybookChromatic 上找到实现示例。

限制

此插件仅识别 story 中类型为 politeassertive 的第一个 aria-live 元素。

实际上,一个应用每种类型应只有一个 aria-live 播报器。

常见问题解答

为什么后续事件没有显示?

使用 React 等 UI 库时,Chrome 和 Firefox 等浏览器可能无法观察到文本变化,只能观察到新增。这对于此插件和屏幕阅读器体验都是如此。

为确保辅助技术用户能够观察到变化,请务必清空 aria-live 元素的内容。

如果您正在寻找实现策略,可以考虑 这种使用 React Hooks 的实现

其他资源