Add stepUp and stepDown actions for input elements

[spookylukey]

trafficstars

See:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown

The idea is that with this in place, we could easily create more visually appealing (and accessible) versions of <input type=number> without any javascript.

For example, the number widgets in this shopping basket from https://abilitynet.org.uk/training/how-use-screen-reader-accessibility-testing?utm_source=Intro-Screen-Readers&utm_medium=Factsheet-Highlights&utm_campaign=2023-Training-Promo

It also requires some CSS to hide the native spinners - https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box

[lukewarlow]

Have you got any thoughts on what the aria -mapping for these would look like.

Afaik the default number input stepper buttons aren't keyboard navigable and so probably don't have any inherent aria relationship.

[spookylukey]

Have you got any thoughts on what the aria -mapping for these would look like.

Afaik the default number input stepper buttons aren't keyboard navigable and so probably don't have any inherent aria relationship.

I don't have ideas on that front, I'm afraid, I'm not hugely knowledgeable about this.

[gregwhitworth]

@lukewarlow correct that most do not allow you to tab into shadow DOM and thus you can use the up or down keys to increment the value. However, there is still value here from a usecase perspective. These would be buttons although I probably wouldn't use accessible name that results in step. I would expect something along the lines of increment or decrement for the button title respectively.

Akin to what we're doing with others; I would prefer to introduce a new element that contains these parts that have the wiring already in place as I'm unsure how we would retrofit them onto number. Technically speaking this is already possible today but the invoker to increment/decrement doesn't exist.

Another usecase that is similar to this are carousels where they often have related buttons that invoke a next and previous "card". I'm not implying they should have the same invoker but the a11y paradigms will be of similar nature.

[gregwhitworth]

@spookylukey can you please complete the IPR contribution requirements

[ryantownsend]

Came to this repo to make this suggestion – so just here adding a +1 to having a mechanism for incrementing/decrementing number inputs. I'm manually patching this behaviour in myself at the moment.

[lukewarlow]

I'm gonna go ahead and close this and replace it by https://github.com/openui/open-ui/pull/1029 it's effectively the same and I've included you as the commit co-author @spookylukey just deals with the IPR problems as I'd like to get these included.

One difference is for now I've specified this just for number input, which is I think where the most utility comes from. If there's other input types where this would be useful raise an issue and we can definitely consider them.