Slider: Updated multithumb slider based on slider focus group meeting

.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

aria-practices.html

@@ -2430,7 +2430,7 @@ <h3>Slider (Multi-Thumb)</h3>
 
       <section class="notoc">
         <h4>Example</h4>
-        <p><a href="examples/slider/multithumb-slider.html">Multi-Thumb Slider Examples</a>: Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.</p>
+        <p><a href="examples/slider/slider-multithumb.html">Multi-Thumb Slider Examples</a>: Demonstrates a two-thumb slider for picking a price range for a hotel reservation.</p>
       </section>
 
       <section id="slidertwothumb_kbd_interaction" class="notoc">

examples/index.html

@@ -342,7 +342,6 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td><code>slider</code></td>
             <td>
               <ul>
-                <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</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>
@@ -625,7 +624,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="link/link.html">Link</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
-                <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</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>
@@ -810,7 +808,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <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-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</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>
@@ -824,7 +821,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <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-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</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>
@@ -838,7 +834,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td>
               <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-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</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>
@@ -851,7 +846,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
             <td><code>aria-valuetext</code></td>
             <td>
               <ul>
-                <li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</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/slider-multithumb.css

@@ -0,0 +1,88 @@
+/* CSS Document */
+
+.slider-multithumb {
+  padding: 6px;
+  width: 350px;
+  touch-action: pan-y;
+}
+
+.slider-multithumb svg {
+  forced-color-adjust: auto;
+}
+
+.slider-multithumb .slider-group {
+  color: black;
+}
+
+.slider-multithumb .slider-group .value {
+  font-size: 80%;
+  color: currentColor;
+  fill: currentColor;
+}
+
+.slider-multithumb .slider-group .rail {
+  stroke: currentColor;
+  stroke-width: 2px;
+  fill-opacity: 0;
+}
+
+.slider-multithumb .slider-group .range {
+  fill: currentColor;
+  opacity: 0.4;
+}
+
+.slider-multithumb .slider-group .thumb {
+  stroke-opacity: 0;
+  stroke-width: 2px;
+  fill: currentColor;
+}
+
+.slider-multithumb .slider-group .focus-ring {
+  stroke-opacity: 0;
+  fill-opacity: 0;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Focus and hover styling */
+
+.slider-multithumb .slider-group g.rail,
+.slider-multithumb .slider-group g.focus {
+  color: currentColor;
+}
+
+.slider-multithumb .slider-group.active g.rail {
+  opacity: 0.8;
+}
+
+.slider-multithumb .slider-group.active g.range {
+  fill: #005a9c;
+  fill-opacity: 1;
+}
+
+.slider-multithumb .slider-group [role="slider"]:focus {
+  outline: none;
+  color: #005a9c;
+}
+
+.slider-multithumb .slider-group [role="slider"]:hover .focus-ring {
+  stroke: currentColor;
+  stroke-width: 1px;
+  stroke-opacity: 0.8;
+}
+
+.slider-multithumb [role="slider"]:focus:hover .focus-ring,
+.slider-multithumb [role="slider"]:focus .focus-ring {
+  stroke: currentColor;
+  stroke-opacity: 1;
+  stroke-width: 3px;
+}
+
+.slider-multithumb [role="slider"]:focus .thumb {
+  stroke: currentColor;
+}
+
+.slider-multithumb [role="slider"]:focus .value {
+  color: currentColor;
+  font-weight: bold;
+}