From 45d3125919f0bedb965316685af4723e0bfbb8d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Thu, 24 Nov 2022 18:21:33 +0100
Subject: [PATCH] OptionsUI: SliderValueEditor does not get auto focused on
 slider change (#59209)

---
 .eslintrc                                       | 6 +++++-
 public/app/core/components/OptionsUI/slider.tsx | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 9535a971dd8..980edc7e524 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -87,7 +87,11 @@
             "ignoreNonDOM": true
           }
         ],
-        "jsx-a11y/no-static-element-interactions": "off"
+        "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/label-has-associated-control": [ "error", {
+          "controlComponents": ["NumberInput"],
+          "depth": 2
+        }]
       }
     }
   ]
diff --git a/public/app/core/components/OptionsUI/slider.tsx b/public/app/core/components/OptionsUI/slider.tsx
index be4d46de1fd..a668a66868e 100644
--- a/public/app/core/components/OptionsUI/slider.tsx
+++ b/public/app/core/components/OptionsUI/slider.tsx
@@ -96,7 +96,7 @@ export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFi
     <div className={cx(styles.container, styles.slider)}>
       {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
       <Global styles={styles.slider} />
-      <div className={cx(styles.sliderInput, ...sliderInputClassNames)}>
+      <label className={cx(styles.sliderInput, ...sliderInputClassNames)}>
         <Slider
           min={min}
           max={max}
@@ -113,7 +113,7 @@ export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFi
         <span className={stylesSlider.numberInputWrapper} ref={inputRef}>
           <NumberInput value={sliderValue} onChange={onSliderInputChange} max={max} min={min} step={step} />
         </span>
-      </div>
+      </label>
     </div>
   );
 };