search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

Investigate how to show focus on discrete slider #1588

Open gjdev opened 6 years ago

gjdev commented 6 years ago

This was reported before as one of several focus indicator problems in #1427, but that issue was closed with a solution with a fix only conforming for "non-discrete" sliders.

What MDC-Web Version are you using?

0.25.0

What browser(s) is this bug affecting?

Any browser

What OS are you using?

Any OS

What are the steps to reproduce the bug?

  1. Go to https://material-components-web.appspot.com/slider.html
  2. Focus (with keyboard input, eg. by using the tab key) one of the discrete sliders
  3. The slider gets a focus ring; using keyboard input to change the value keeps the focus ring. This is different from the material guidelines.
  4. Now use the mouse to change the value, in this case a drop shaped label with the value is shown. (This behavior is expected also for keyboard input.)

What is the expected behavior?

According to https://material.io/guidelines/components/sliders.html#sliders-discrete-slider a focused discrete slider should show the drop shaped label (same as in step 4 above), and should not show the focus ring (as in step 3 above). This doesn't happen, the discrete slider behaves as a non-discrete slider when controlled by keyboard.

kfranqueiro commented 6 years ago

Thanks for reporting this. Indeed, the previous fix was somewhat of a stop-gap so that there was at least some focus indication, and we need to update the behavior.