What is a role of input with type number

Question

I am using react testing library and by its conventions, elements should be accessed by getByRole.

When I had input type="text" the role was textarea which was fine.

Now I have input with type="number" and the error message suggests I use spinbutton as the role which works but it doesn't make sense to me.

Is there a different role for input with number type?

You can remove spin button Refer this https://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number — rishabh tripathi, Jul 09 '22 at 13:26
If you don’t want a spinbutton, it is quite likely that [you are not using the correct input type](https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate). Is your input actually a (floating point) number? or does it merely consist of numbers? If it’s the latter, you would want to use `inputtype=numeric pattern=[0-9]*` — Andy, Jul 11 '22 at 08:25

dippas · Accepted Answer · 2022-07-24T23:35:30.967

As per MDN on <input type="number">:

The implicit role for the element is spinbutton.

So as long as you didn't change the role by means of a role attribute, this is the correct role to use in getByRole('spinbutton').

An input number is like a counter, so it is spinning its values up and down by clicking in the spin buttons on the right side or the keyboard arrows, (even its pseudo elements are ::-webkit-inner-spin-button, ::-webkit-outer-spin-button).

If this is surprising to you, that input type might not be the right choice for the form control. The documentation reads further:

If spinbutton is not an important feature for your form control, consider not using type="number". Instead, use inputmode="numeric" along with a pattern attribute that limits the characters to numbers and associated characters.

The number input has several accessibility and usability issues when used for anything that is not a floating point number.

Update (based on OP comment)

So would userEvent.type work on it since it is a spinbutton?

Yes it will work, here is a sandbox with a basic example

import { render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";

it("should type a number in input", () => {
  const { getByRole } = render(<input type="number" />);
  const input = getByRole("spinbutton");
  userEvent.type(input, "123456");
  waitFor(() => expect(input).toHaveValue("123456"));
});

So would `userEvent.type` work on it since it is a spinbutton? — SrdjaNo1, Jul 09 '22 at 15:57
Yes it works, I've a created a basic test for you in the answer — dippas, Jul 09 '22 at 19:00
How do I simulate clicking the up and down arrow rather than simulating typing? — whiteSkar, Jan 13 '23 at 03:02

score 2 · Answer 2 · answered Jan 31 '23 at 07:56

I will show you how to fish. If you write this in test file

 screen.logTestingPlaygroundURL();

this will generate a URL, if you paste this to the browser, you will see the rendered component on the page:

If you click on the element, it will generate the suggested query:

What is a role of input with type number

2 Answers2

Update (based on OP comment)