为什么 getByRole 找不到带有 aria-label 的按钮？答案

【问题标题】：Why does getByRole not find a button with aria-label?为什么 getByRole 找不到带有 aria-label 的按钮？
【发布时间】：2020-10-13 19:34:08
【问题描述】：

我有一个带有隐藏标签的按钮的用例（模式对话框），该标签使用图标作为其内容。它与示例 1 中的 described here 的用例基本相同：

<button aria-label="Close" onClick={() => doSomething()}><svg>...</svg></button>

（我只有一个 SVG 元素作为按钮的子元素，而不是文本“X”。）

当我执行这个查询时：

screen.getByRole('button', { name: 'Close' });

未找到该按钮。调试输出告诉我这个按钮的名字是“”。然而documentation 声明，“您可以通过其可访问名称查询返回的元素。可访问名称用于简单的情况，例如表单元素的标签或按钮的文本内容，或 aria-label 属性的值。” （强调我的）

我发现this example 也支持我的用例。

那么为什么getByRole('button', {name: 'Close'})——或者更简单的getByLabelText('Close')——找不到这个按钮元素呢？

【问题讨论】：

标签： javascript button wai-aria

【解决方案1】：

嗯，我想这发生在我们所有人身上。事实上，我必须在发布“aria”错误 TWICE 后立即编辑这个问题，这应该很好地表明了根本原因，因为我写了 <button arial-label="Close">...</button>。是的。 “Arial”是一个有效的词，所以拼写检查器也永远不会捕捉到它。 ? 我需要写一个 ESLint 规则什么的；发生得太频繁了。

所以这确实有效：getByLabelText('Close') 或 getByRole('button', {name: 'Close'})。

抱歉，这个问题不太好。

【讨论】：