React Testing Library是否原生支持结合aria-roledescription选择元素?
解决方案:在React Testing Library中区分带
aria-roledescription的按钮元素 React Testing Library(RTL)目前没有内置的getByAnnouncedRole这类直接根据屏幕阅读器播报文本选择元素的查询方法——因为屏幕阅读器的播报逻辑由具体工具(如NVDA、VoiceOver)实现,不同工具的处理细节存在差异,RTL并未统一模拟这一层的行为。
不过你可以利用RTL内置的查询选项,结合aria-roledescription属性来精准筛选元素,无需额外手动遍历getAllByRole的结果:
1. 选择不带aria-roledescription的按钮
// 匹配id="2"的元素 screen.getByRole('button', { name: 'Group Name', filter: (element) => !element.hasAttribute('aria-roledescription') });
2. 选择带指定aria-roledescription的按钮
// 匹配id="1"的元素 screen.getByRole('button', { name: 'Group Name', filter: (element) => element.getAttribute('aria-roledescription') === 'resize button' });
补充说明
filter选项是RTL查询方法的内置参数,允许你基于元素的属性、内容等自定义筛选逻辑,比手动处理getAllByRole的结果更简洁。- 如果需要验证屏幕阅读器的实际播报行为,建议结合真实的屏幕阅读器测试,或者使用无障碍检查工具验证属性正确性,但RTL本身不会直接返回屏幕阅读器的播报文本。
内容的提问来源于stack exchange,提问作者Matthijs Wessels
相关产品推荐
相关产品推荐

