[ic-text-field] - Investigate increment/decrement arrows for numerical input

[lz405]

Summary

Investigate replicating the increment and decrement buttons present in the standard html numerical input

💬 Description

Example image taken from the Mozilla web documentation

Component consists of two buttons, vertically stacked, inside of the text field.

This functionality already exists on the html input element with a 'type' of 'number'. The buttons only show when hovered

💰 User value

Provide an easy way to adjust numbers, especially those that need to be manually increased and decreased

📚 User Stories

A user would currently, to change '999' to '1000', would have to delete all of the characters and retype. A built in increment button would reduce this to a single button click.

[mi6-577]

Not convinced how accessible this solution would be (albeit widely used).

Consider keyboard interaction only;

• user tabs onto the field
• field gains focus state
• user can type a value into the input field
• user tabs again and the focus moves to the next field, it doesn't move to the up/down buttons inside the input field

Also, the buttons are incredibly small, for users with manual dexterity or eyesight challenges clicking precisely on one of those buttons will be difficult.