seb-oss / green

Green is an open-source design system built by SEB.
https://storybook.seb.io/
Apache License 2.0
37 stars 56 forks source link

Slider: The inputs are not synced #1843

Open chijun950314 opened 4 days ago

chijun950314 commented 4 days ago

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

Bug already 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. image

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 commented 4 days ago

Maybe for your references:

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