fix(ui5-slider, ui5-range-slider): render only one top level element (#3115)

Author: fifoosid

packages/main/src/SliderBase.hbs

@@ -26,9 +26,10 @@
 
 		{{> handles}}
 	</div>
+
+	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>
 
-<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 
 {{#*inline "progressBar"}}{{/inline}}
 {{#*inline "handles"}}{{/inline}}

packages/main/test/specs/ColorPalette.spec.js

@@ -88,6 +88,8 @@ describe("ColorPalette interactions", () => {
 		colorPicker.setProperty("color", "#fafafa");
 
 		// The initial focus is on the HEX input
+		browser.keys("Tab"); // Slider 1
+		browser.keys("Tab"); // Slider 2
 		browser.keys("Tab"); // Red
 		browser.keys("Tab"); // Green
 		browser.keys("Tab"); // Blue