[a11y]: [Range] With small step prop, right arrow key stops working after a few presses

[mrbisson-ibm]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v1.61.0

React version

v18.2.0

Automated testing tool and ruleset

Manual testing / Bug logged against our product

Assistive technology

No response

Description

When a <Range> control has a step <= 0.2, the keyboard right arrow only works for small number of presses.

For example, when the step is 0.1 and the value is 0, I can press the right arrow key three times and the value correctly three times and the value increases each of those times; the fourth time has no effect.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-l6xz9dat?file=package.json

Steps to reproduce

1. Create a <Range> component with these props:

• min: 0
• max: 1
• step: 0.1
• value: 0

2. Tab to the slider thumb.
3. Press the right arrow key. The value increments to 0.1. (Correct behaviour.)
4. Repeat step 3 two more times. The value continues to successfully increment to 0.2 then 0.3.
5. Repeat step 3 one more time. The value does not change.

Through experimentation, it seems the max value does not have an effect, and this bug can be reproduced so long as step is 0.2 or less.

I was also able to reproduce this on the React demo page for the Range filter, using the above props.

In addition to seeing this issue on Chrome (132.0.6834.112), I've also been able to reproduce it on Firefox (128.7.0esr) and Safari (17.4) - all on Mac OS X (14.4).

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems