Add temperature slider based on HTML range input

examples/index.html

@@ -717,7 +717,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
           </tr>
           <tr>
             <td><code>aria-orientation</code></td>
-            <td><a href="slider/slider-temperature.html">Vertical Temperature Slider</a></td>
+            <td>
+              <ul>
+                <li><a href="slider/range-temperature.html">HTML Range  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+              </ul>
+            </td>
           </tr>
           <tr>
             <td><code>aria-owns</code></td>
@@ -852,6 +857,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <ul>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
+                <li><a href="slider/range-temperature.html">HTML Range  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>

examples/slider/css/range-temperature.css

@@ -0,0 +1,95 @@
+/* CSS Document */
+
+.range-temperature {
+  touch-action: pan-x;
+  margin-top: 1em;
+  padding: 6px;
+  width: 15em;
+}
+
+.range-temperature label {
+  font-weight: bold;
+  display: block;
+}
+
+.range-temperature .range-value {
+  margin-left: 102px;
+  font-weight: bold;
+  font-size: 200%;
+  font-family: sans-serif;
+}
+
+/* Range Vertical Controls */
+
+.range-temperature input[type="range"] {
+  width: 280px;
+  height: 300px;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+  margin: 5px;
+  padding: 5px;
+}
+
+.range-temperature input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  background: #aaa;
+  border-radius: 5px;
+  border: 2px solid currentColor;
+}
+
+.range-temperature input[type="range"]::-webkit-slider-thumb {
+  border: 2px solid currentColor;
+  height: 40px;
+  width: 10px;
+  border-radius: 5px;
+  background: currentColor;
+  cursor: pointer;
+  -webkit-appearance: none;
+  position: relative;
+  margin-top: -17.5px;
+}
+
+.range-temperature input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
+  background: #aaa;
+  border-radius: 5px;
+  border: 2px solid currentColor;
+}
+
+.range-temperature input[type="range"]::-moz-range-thumb {
+  border: 2px solid currentColor;
+  height: 40px;
+  width: 10px;
+  border-radius: 5px;
+  background: currentColor;
+  cursor: pointer;
+}
+
+/* Focus and hover styling */
+
+.range-temperature input[type="range"]:focus {
+  outline: none;
+}
+
+.range-temperature input[type="range"]:hover::-webkit-slider-thumb,
+.range-temperature input[type="range"]:focus::-webkit-slider-thumb {
+  outline: 3px solid currentColor;
+  outline-offset: 3px;
+  background: #005a9c;
+}
+
+.range-temperature input[type="range"]:hover::-moz-range-thumb,
+.range-temperature input[type="range"]:focus::-moz-range-thumb {
+  outline: 3px solid currentColor;
+  outline-offset: 4px;
+  background: #005a9c;
+}

examples/slider/js/range-temperature.js

@@ -0,0 +1,40 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   File:   range-temperature.js
+ *
+ *   Desc:   Vertical range widget that uses aria-valuetext and aria-orientation
+ */
+
+'use strict';
+
+class RangeTemperature {
+  constructor(domNode) {
+    this.labelCelsiusAbbrev = '°C';
+    this.labelCelsius = ' degrees Celsius';
+
+    this.domNode = domNode;
+    this.rangeNode = domNode.querySelector('input[type="range"]');
+    this.valueNode = domNode.querySelector('.range-value');
+    this.rangeNode.addEventListener('input', this.handleInput.bind(this));
+  }
+
+  handleInput(event) {
+    if (this.domNode.contains(event.currentTarget)) {
+      let valuetext =
+        parseFloat(this.rangeNode.value).toFixed(1) + this.labelCelsiusAbbrev;
+      this.valueNode.textContent = valuetext;
+      this.rangeNode.setAttribute('aria-valuetext', valuetext);
+    }
+  }
+}
+
+// Initialize range temperature controls
+window.addEventListener('load', function () {
+  var rangesTemp = document.querySelectorAll('.range-temperature');
+
+  for (let i = 0; i < rangesTemp.length; i++) {
+    new RangeTemperature(rangesTemp[i]);
+  }
+});

examples/slider/range-temperature.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML Range Examples with aria-orientation and aria-valuetext | WAI-ARIA Authoring Practices 1.2</title>
+
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  <link rel="stylesheet" href="css/range-temperature.css">
+  <script src="js/range-temperature.js"></script>
+</head>
+<body>
+  <nav aria-label="Related Links" class="feedback">
+    <ul>
+      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/projects/3">Related Issues</a></li>
+      <li><a href="../../#slider">Design Pattern</a></li>
+    </ul>
+  </nav>
+  <main>
+    <h1>HTML Range Examples with aria-orientation and aria-valuetext</h1>
+    <p>
+      The following example of a temperature range slider demonstrating the using <code>aria-valuetext</code> and <code>aria-orientation</code> on an <code>input[type="range"]</code> control.
+      The desired temperature is set with the range control, which is vertically oriented.
+      The range control illustrate how to use <code>aria-valuetext</code> to provide assistive technologies with meaningful names for numeric values.
+    </p>
+    <p>Similar examples include: </p>
+    <ul>
+      <li><a href="slider-color-viewer.html">Color Viewer Slider Example</a>: Basic  horizontal sliders that illustrate setting numeric values for a color picker.</li>
+      <li><a href="examples/slider/slider-temperature.html">Temperature Selector Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
+      <li><a href="slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+      <li><a href="multithumb-slider.html">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for  numeric ranges, such as for searching in a price range.</li>
+    </ul>
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1"
+        class="example">
+          <div class="range-temperature">
+            <label for="id-temp-range">
+              Temperature
+            </label>
+            <div class="range-value">25.0°C</div>
+            <input type="range"
+              id="id-temp-range"
+              class="veritcal"
+              min="10.0"
+              value="25.0"
+              aria-valuetext="25.0°C"
+              max="38.0"
+              step="0.1"
+              aria-orientation="vertical">
+          </div>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+      <section>
+        <h2>Accessibility Features</h2>
+        <ul>
+          <li>
+            The accessible name for the temperature control is defined using the <code>label</code> element with the <code>for</code> attribute referencing the <code>id</code> of the range control.</li>
+          <li>
+            A border around the thumb is used for indicating the range control with keyboard focus using browser specific CSS properties.
+          </li>
+          <li>
+            The width of the rail is increased to provide a larger target for changing the value using a pointing device.
+          </li>
+        </ul>
+      </section>
+
+    <section>
+      <h2 id="kbd_label">Keyboard Support</h2>
+      <p>Keyboard support for the temperature control is provided by the native browser support for the <code>input[type=&quot;range&quot;]</code> element.</p>
+      <table aria-labelledby="kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="key-right-arrow">
+            <th>
+              <kbd>Right Arrow</kbd>
+            </th>
+            <td>Increases slider value one step.</td>
+          </tr>
+          <tr data-test-id="key-up-arrow">
+            <th>
+              <kbd>Up Arrow</kbd>
+            </th>
+            <td>Increases slider value one step.</td>
+          </tr>
+          <tr data-test-id="key-left-arrow">
+            <th>
+              <kbd>Left Arrow</kbd>
+            </th>
+            <td>Decreases slider value one step.</td>
+          </tr>
+          <tr data-test-id="key-down-arrow">
+            <th>
+              <kbd>Down Arrow</kbd>
+            </th>
+            <td>Decreases slider value one step.</td>
+          </tr>
+          <tr data-test-id="key-page-up">
+            <th>
+              <kbd>Page Up</kbd>
+            </th>
+            <td>Increases temperature slider value multiple steps. In this slider, jumps 18 steps (e.g. 1.8°C) on most browsers.</td>
+          </tr>
+          <tr data-test-id="key-page-down">
+            <th>
+              <kbd>Page Down</kbd>
+            </th>
+            <td>Decreases temperature slider value multiple steps. In this slider, jumps 18 steps (e.g. 1.8°C) on most browsers.</td>
+          </tr>
+          <tr data-test-id="key-home">
+            <th>
+              <kbd>Home</kbd>
+            </th>
+            <td>Sets slider to its minimum value.</td>
+          </tr>
+          <tr data-test-id="key-end">
+            <th>
+              <kbd>End</kbd>
+            </th>
+            <td>Sets slider to its maximum value.</td>
+          </tr>
+        </tbody>
+      </table>
+
+    </section>
+
+      <section>
+      <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
+
+      <table aria-labelledby="rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="range-aria-valuetext">
+            <td></td>
+            <th scope="row">
+              <code>aria-valuetext</code>
+            </th>
+            <td>
+              <code>input[type=&quot;range&quot;]</code>
+            </td>
+            <td>
+              <ul>
+                <li>A string value that provides a user-friendly name for the current value of the range.</li>
+                <li>For the temperature range, is the value of the range appended with the text &quot;°C&quot;.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="range-aria-orientation">
+            <td></td>
+            <th scope="row">
+              <code>aria-orientation=&quot;vertical&quot;</code>
+            </th>
+            <td>
+              <code>input[type=&quot;range&quot;]</code>
+            </td>
+            <td>
+              <ul>
+                <li>Indicates the orientation of the <code>input</code> element.</li>
+                <li>Set to <code>vertical</code> for the temperature range control.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h2>Javascript and CSS Source Code</h2>
+      <ul id="css_js_files">
+        <li>CSS: <a href="css/range-temperature.css" type="text/css">range-temperature.css</a></li>
+        <li>Javascript: <a href="js/range-temperature.js" type="text/javascript">range-temperature.js</a></li>
+      </ul>
+    </section>
+
+    <section>
+      <h2 id="sc1_label">HTML Source Code</h2>
+      <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+      <pre><code id="sc1"></code></pre>
+      <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+      <script>
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+        sourceCode.make();
+      </script>
+    </section>
+  </main>
+  <nav>
+    <a href="../../#slider">Slider Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
+  </nav>
+</body>
+</html>