[Slider] Keyboard controls nonfunctional in 4.9.10+

[davidcalhoun]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

After focusing on the Slider component by clicking into it (or tabbing into it), the user cannot change values with keyboard left and right arrow keys.

Expected Behavior 🤔

The user should be able to change the slider value with the keyboard arrow keys.

Steps to Reproduce 🕹

Video demo: https://youtu.be/idLtSp2EKXE

Gif demo:

Steps:

1. Open this forked Slider demo: https://codesandbox.io/s/material-demo-pqblh?file=/package.json
2. In package.json, change the version of @material-ui/core to 4.9.9 (the last release where keyboard controls function normally)
3. Click on the Temperature slider in the window on the right, then use the keyboard left/right arrow keys to change the values.
4. In package.json, change the version of @material-ui/core to 4.9.10 or latest
5. Try to perform Step 3 again.

Context 🔦

I have a map visualization tied to a slider, and it's handy to be able to hover over map features, revealing a map popup, while the Slider element still has focus. This allows the user to change the slider values (in this case a date slider, going back and forth through time) with the keyboard while the map popup is still visible. Basically an interaction where the mouse is hovered over a different element, while the Slider still has focus.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.11
React	16.13.0
Browser	Firefox 75.0, Chrome 80.0.3987.163
TypeScript
etc.

[marcosvega91]

Hi @davidcalhoun I think it's a problem with the configuration of your slider because with a simpler slider it works.

Try this
<Slider defaultValue={[20, 30]} />

I will check with yours

[oliviertassinari]

@davidcalhoun Thanks for the report, it's a regression from #17057.

[oliviertassinari]

@davidcalhoun What do you think of this fix?

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index 7bbccea06..ac6603f93 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -100,7 +100,7 @@ function focusThumb({ sliderRef, activeIndex, setActive }) {
     !sliderRef.current.contains(document.activeElement) ||
     Number(document.activeElement.getAttribute('data-index')) !== activeIndex
   ) {
-    sliderRef.current.querySelector(`[data-index="${activeIndex}"]`).focus();
+    sliderRef.current.querySelector(`[role="slider"][data-index="${activeIndex}"]`).focus();
   }

   if (setActive) {

Do you want to submit a pull request :)? We would also need a new test case that fire a click and that assert the activeElement.

[marcosvega91]

I can do It if @davidcalhoun don't want :)