React Testing Library中number类型input的ARIA角色疑问：除spinbutton外是否有其他可选角色？

这个问题我之前也纠结过！先给你理清楚关键点：

首先明确：原生<input type="number">对应的ARIA无障碍角色确实是spinbutton，这是WAI-ARIA规范里明确定义的，所以React Testing Library会提示你用这个角色查询，完全符合无障碍语义的要求。

你觉得不合理可能是因为number input既能手动输入数字，又能通过上下箭头调整，但从无障碍交互的角度，它的行为完全匹配spinbutton的定义——支持用户通过递增/递减操作修改数值，同时兼容手动输入，所以这个角色是合理的。

那有没有其他可用的角色？严格来说，没有符合规范的替代ARIA角色了。不过如果你的场景里这个input更偏向纯文本式的数字输入（不需要上下箭头功能），可以考虑两种方案：

• 改用<input type="text">并通过代码限制输入内容，但这样会丢失原生number input的特性（比如移动端自动唤起数字键盘）
• 放弃用getByRole查询，改用React Testing Library更推荐的、基于用户可见内容的查询方式，比如：
  • getByLabelText（最推荐，符合RTL的用户-centric理念）：

    // 假设你的input关联了label
    getByLabelText('请输入年龄')
    

  • 如果有占位符，也可以用getByPlaceholderText：

    getByPlaceholderText('请输入数字')
    

最后再强调下：RTL的getByRole是基于无障碍语义设计的，遵循规范用spinbutton是最正确的选择，强行用其他角色反而会破坏无障碍体验，也不符合RTL的设计初衷哦。

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