Slider: The inputs are not synced

[chijun950314]

Slider: different value read by screen reader when step is not 1 and hasTextbox is true

Bug already reported?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

React, Angular

Component name

slider

Description

During the step is set as value other than 1 and with input text box being activated, direct change on input text box will actually causing the reader has two different value, if the value entered by the user is not able to get using the slider.

Steps To Reproduce

1. Set the step attribute to 1000, hasTextbox to true
2. Change input text value to 1500.
3. Open screen reader and tab through the text box and slider.
4. Screen reader will read 1500 for the input but 1600 for the slider.

Current Behaviour

Wrong value spoke from the screen reader.

Expected Behaviour

The screen reader shall read the same value for both the input box and slider.

[chijun950314]

Maybe for your references:

https://www.w3.org/WAI/ARIA/apg/patterns/slider/

[EldRoos]

I cannot reproduce this error on storybook with NVDA: https://storybook.seb.io/latest/react/?path=/story/components-slider--textbox https://storybook.seb.io/latest/angular/?path=/story/components-slider--textbox

What screenreader shows this differently and what code example? @chijun950314

[chijun950314]

So sorry that I lost track of this issue.

Here is one example in the storybook you can test it out:

https://storybook.seb.io/latest/react/?path=/story/components-slider--unit-textbox&args=value:49;min:0;max:100000;step:1000

I try to create an example with the angular storybook, but fail to do so, so I did it in the react storybook.

I tested this with NVDA in my window OS.