如何利用原查询通过aria-labelledby关联文本定位role="region"元素？

你遇到的问题根源在于：被aria-labelledby关联的<div id="Year 1">是普通容器，不具备语义化的标题角色，Testing Library在通过getByRole查询region时，无法将普通div识别为区域名称的有效来源，导致匹配失败。

以下是两种能让你最初的查询语句生效的修复方案：

方案1：给内部标题添加语义化标题角色 #

给标题div补充role="heading"属性（可搭配aria-level指定标题层级，比如aria-level="2"），让它符合无障碍规范中名称来源的角色要求：

<div role="region" aria-labelledby="Year 1">
  <div id="Year 1" role="heading" aria-level="2">Year 1</div>
</div>

此时执行screen.getByRole('region', { name: 'Year 1' })即可正常定位目标元素。

方案2：使用原生标题标签替换普通div #

直接用<h2>（或对应层级的<h1>-<h6>标签）替代普通div，原生标题自带语义化角色，无需额外配置：

<div role="region" aria-labelledby="Year 1">
  <h2 id="Year 1">Year 1</h2>
</div>

该方案更贴合HTML语义化标准，同样能让你的查询语句生效。

原代码失效的核心原因 #

Testing Library的查询逻辑严格遵循无障碍规范，aria-labelledby关联的元素必须具备可作为名称来源的语义角色。普通div无默认语义角色，无法被识别为区域的名称提供者，因此即便id与文本内容一致，查询也无法匹配。

内容的提问来源于stack exchange，提问作者LazioTibijczyk