From 544e33ffcf7d45dc4ed797029c446e119d0a4091 Mon Sep 17 00:00:00 2001
From: Tomas Psota <to.psota@gmail.com>
Date: Mon, 10 Oct 2022 16:36:11 +0200
Subject: [PATCH] fix(Slider): correct tab order when input is above thumb

---
 .../src/components/Slider/Slider.tsx          |  6 ++---
 .../__snapshots__/Slider.test.tsx.snap        | 22 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index ff0e97f8787..1c78edf5335 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -416,6 +416,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
             {buildSteps()}
           </div>
         )}
+        {isInputVisible && inputPosition === 'aboveThumb' && (
+          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
+        )}
         {hasTooltipOverThumb ? (
           <Tooltip entryDelay={0} content={findAriaTextValue()}>
             {thumbComponent}
@@ -423,9 +426,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
         ) : (
           thumbComponent
         )}
-        {isInputVisible && inputPosition === 'aboveThumb' && (
-          <div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
-        )}
       </div>
       {isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
       {rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}
diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index 92bb864cc01..ee3e42150d9 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -475,17 +475,6 @@ exports[`slider renders slider with input above thumb 1`] = `
           </div>
         </div>
       </div>
-      <div
-        aria-disabled="false"
-        aria-label="Value"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow="50"
-        aria-valuetext="50"
-        class="pf-c-slider__thumb"
-        role="slider"
-        tabindex="0"
-      />
       <div
         class="pf-c-slider__value pf-m-floating"
       >
@@ -509,6 +498,17 @@ exports[`slider renders slider with input above thumb 1`] = `
           </span>
         </div>
       </div>
+      <div
+        aria-disabled="false"
+        aria-label="Value"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50"
+        class="pf-c-slider__thumb"
+        role="slider"
+        tabindex="0"
+      />
     </div>
   </div>
 </DocumentFragment>