From 7ab181383b1087f1bdf185b19e51657d8c0f1114 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 28 Nov 2022 12:20:18 +0200
Subject: [PATCH] [v9.3.x] OptionsUI: SliderValueEditor does not get auto
 focused on slider change (#59368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OptionsUI: SliderValueEditor does not get auto focused on slider change (#59209)

(cherry picked from commit 45d3125919f0bedb965316685af4723e0bfbb8d9)

Co-authored-by: Laura Fernández <laura.fernandez@grafana.com>
---
 .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>
   );
 };