Vertical Temperature Slider Example: Eliminate redundant AX tree rendering of value (pull #3258)

Fix issue #3257

Eliminate redundant announcement of the slider value by screen readers.
This commit moves the text node that visually displays the value above the slider.
It was previously outside the element with role slider.
It is now a child of the slider, making the text presentational.

Author: jongund

content/patterns/slider/examples/slider-temperature.html

@@ -62,9 +62,9 @@ <h2 id="ex_label">Example</h2>
             <div id="id-temp-label" class="label">Temperature</div>
 
             <svg role="none" class="slider-group" width="145" height="360">
-              <text class="temp-value" x="28" y="35">25°C</text>
-              <rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true" />
               <g role="slider" id="id-temp-slider" aria-orientation="vertical" tabindex="0" aria-valuemin="10.0" aria-valuenow="25.0" aria-valuetext="25.0 degrees Celsius" aria-valuemax="38.0" aria-labelledby="id-temp-label">
+                <text class="temp-value" x="28" y="35">25°C</text>
+                <rect class="rail" x="60" y="47" width="8" height="300" rx="5" aria-hidden="true" />
                 <text class="value" x="94" y="150">25°C</text>
                 <rect class="focus-ring" x="35" y="170" width="105" height="24" rx="12" />
                 <rect class="thumb" x="35" y="145" width="48" height="14" rx="5" />