type="number"类型的input元素对应的正确ARIA role是什么

type="number" 的原生<input>元素，浏览器默认分配的隐式ARIA role是**spinbutton**，而非textbox，这就是你切换type属性后元素定位失败的直接原因。

相关代码片段 #

被测输入元素

<input
  type="number"
  placeholder="Duration"
  aria-label="duration"
/>

原定位失败的测试代码

const input = screen.getByRole('textbox', {
  name: /duration/i,
});

原因说明 #

• 原生表单控件不需要手动添加role属性，浏览器会根据type值自动映射对应的隐式ARIA角色：
  • 当type="text"时，input的隐式role为textbox，因此原测试代码可以正常定位元素
  • 当type="number"时，input的隐式role为spinbutton，该角色专门对应支持数值调整、数字格式校验的数字输入控件，和普通文本输入框的可访问性语义完全不同，用textbox角色自然无法匹配到。

修正方案 #

将测试代码中查询的角色替换为spinbutton即可正常定位，修正后代码如下：

const input = screen.getByRole('spinbutton', {
  name: /duration/i,
});

注意：不建议手动给type="number"的input添加role="textbox"覆盖默认角色，这会破坏屏幕阅读器等辅助工具的默认交互逻辑，不符合Web可访问性规范。

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