Slider thermostat update from focus group meeting results

.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi

.vnurc

@@ -20,3 +20,6 @@ The “row” role is unnecessary for element “tr”.
 Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”.
 # https://github.com/w3c/aria-practices/issues/1678
 Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.
+# https://github.com/validator/validator/issues/1096
+Bad value “none” for attribute “role” on element “svg”.
+Bad value “presentation” for attribute “role” on element “svg”.

aria-practices.html

@@ -2362,7 +2362,7 @@ <h3>Slider</h3>
         <h4>Examples</h4>
         <ul>
           <li><a href="examples/slider/slider-color-viewer.html">Color Viewer Slider Examples</a>: Demonstrates using three horizontally aligned sliders to make a color viewer.</li>
-          <li><a href="examples/slider/slider-2.html">Slider Examples with aria-orientation and aria-valuetext</a>: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.</li>
+          <li><a href="examples/slider/slider-thermostat.html">Slider Examples with aria-orientation and aria-valuetext</a>: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.</li>
         </ul>
       </section>
 

examples/index.html

@@ -147,6 +147,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
                 <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox  (Two State)</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
               </ul>
@@ -237,6 +238,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a></li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
               </ul>
             </td>
           </tr>
@@ -303,8 +305,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td>
               <ul>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
               </ul>
             </td>
           </tr>
@@ -588,6 +590,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="table/table.html">Table</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
@@ -625,6 +628,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
                 <li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
@@ -678,7 +682,7 @@ <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-2.html">Slider  with aria-orientation and aria-valuetext</a></td>
+            <td><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></td>
           </tr>
           <tr>
             <td><code>aria-owns</code></td>
@@ -767,8 +771,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
               </ul>
             </td>
@@ -779,8 +783,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -792,8 +796,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
               <ul>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
-                <li><a href="slider/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -804,7 +808,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/slider-2.html">Slider  with aria-orientation and aria-valuetext</a></li>
+                <li><a href="slider/slider-thermostat.html">Slider  with aria-orientation and aria-valuetext</a></li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>

examples/slider/css/slider-thermostat.css

@@ -0,0 +1,94 @@
+/* CSS Document */
+
+.thermostat h3 {
+  color: black;
+  font-weight: bold;
+  font-size: 150%;
+}
+
+.thermostat svg {
+  forced-color-adjust: auto;
+}
+
+.slider-thermostat text {
+  font-weight: bold;
+  fill: currentColor;
+  font-family: sans-serif;
+}
+
+.slider-thermostat-vertical .slider-group {
+  touch-action: pan-x;
+}
+
+.slider-thermostat-text .slider-group {
+  touch-action: pan-y;
+}
+
+.slider-thermostat {
+  margin-top: 1em;
+  padding: 6px;
+  width: 12em;
+  color: black;
+}
+
+.slider-thermostat .value {
+  position: relative;
+  top: 20px;
+  height: 1.5em;
+  font-size: 80%;
+}
+
+.slider-thermostat .temp-value {
+  padding-left: 24px;
+  font-size: 200%;
+}
+
+.slider-thermostat .rail {
+  stroke: currentColor;
+  stroke-width: 2px;
+  fill: currentColor;
+  fill-opacity: 25%;
+}
+
+.slider-thermostat .thumb {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+.slider-thermostat .focus {
+  stroke: currentColor;
+  stroke-opacity: 0;
+  fill-opacity: 0;
+  stroke-width: 3px;
+  display: none;
+}
+
+.slider-thermostat.text {
+  width: 14em;
+}
+
+.slider-thermostat.text .value-label rect {
+  fill-opacity: 0;
+  stroke-width: 2px;
+  stroke-opacity: 0;
+}
+
+/* Focus and hover styling */
+
+.slider-thermostat.focus [role="slider"] {
+  color: #005a9c;
+}
+
+.slider-thermostat [role="slider"]:focus {
+  outline: none;
+}
+
+.slider-thermostat [role="slider"]:focus .focus {
+  display: block;
+  stroke-opacity: 1;
+}
+
+.slider-thermostat.text .value-label:hover rect {
+  stroke-opacity: 1;
+  stroke: currentColor;
+}