Rating Slider Example: Redesign as an input for 10-value satisfaction…

… scale (pull #2831) Resolves issue #2501 by modifying the rating slider example as follows: * Changes it to a 10-point scale from a 5-star scale that had half star ratings. * Changes the visual design to better represent common 10-point satisfaction sliders. * Improves the high contrast support. * Adds documentation that explains why the slider pattern is appropriate for this use case. --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Matt King <[email protected]>
w3c · Dec 18, 2023 · 7f54d96 · 7f54d96
1 parent 966c4ca
commit 7f54d96
Show file tree

Hide file tree

Showing 10 changed files with 440 additions and 244 deletions.
diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html
@@ -36,7 +36,7 @@ <h2>About This Example</h2>
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../slider/examples/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="../../slider/examples/slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="radio-activedescendant.html">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
           <li><a href="radio.html">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
         </ul>

diff --git a/content/patterns/slider/examples/css/slider-rating.css b/content/patterns/slider/examples/css/slider-rating.css
@@ -6,6 +6,7 @@
 
 .rating-slider {
   color: #005a9c;
+  user-select: none;
 }
 
 .rating-slider svg {
@@ -14,84 +15,88 @@
 }
 
 .rating-slider svg .focus-ring {
-  fill: #eee;
+  fill: currentcolor;
   stroke-width: 0;
   fill-opacity: 0;
 }
 
-.rating-slider svg .star {
+.rating-slider svg .target {
   stroke-width: 2px;
   stroke: currentcolor;
   fill-opacity: 0;
 }
 
-.rating-slider svg .fill-left,
-.rating-slider svg .fill-right {
-  stroke-width: 0;
-  fill-opacity: 0;
-}
-
-.rating-slider[aria-valuenow="5"] svg .star {
+.rating-slider svg .label {
+  font-size: 90%;
+  font-family: sans-serif;
   fill: currentcolor;
-  fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .description {
+  font-size: 90%;
+  fill: canvastext;
 }
 
-.rating-slider[aria-valuenow="1"] svg .star-1 .star {
+.rating-slider svg .current .target {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
-.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .current .label {
+  fill: white;
+  font-weight: bold;
 }
 
-.rating-slider[aria-valuenow="2"] svg .star-2 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
+/* focus styling */
 
-.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
-.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider:focus,
+.rating-slider:focus-visible {
+  outline: none !important;
 }
 
-.rating-slider[aria-valuenow="3"] svg .star-3 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .focus {
+  stroke-width: 0;
+  stroke: currentcolor;
+  fill-opacity: 0;
 }
 
-.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
-.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider:focus svg .focus-ring {
+  stroke-width: 2px;
+  stroke: currentcolor;
 }
 
-.rating-slider[aria-valuenow="4"] svg .star-4 .star {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
+@media (forced-colors: active) {
+  .rating-slider svg .focus-ring {
+    fill: linktext;
+  }
 
-.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
-.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
+  .rating-slider svg .target {
+    stroke: linktext;
+  }
 
-/* focus styling */
+  .rating-slider svg .label {
+    fill: linktext;
+  }
 
-.rating-slider:focus {
-  outline: none;
-}
+  .rating-slider svg .description {
+    fill: linktext;
+  }
 
-.rating-slider:focus svg .focus-ring {
-  stroke-width: 2px;
-  stroke: currentcolor;
+  .rating-slider svg .current .target {
+    fill: linktext;
+  }
+
+  .rating-slider svg .current .label {
+    fill: canvas;
+  }
+
+  /* focus styling */
+
+  .rating-slider svg .focus {
+    stroke: linktext;
+  }
+
+  .rating-slider:focus svg .focus-ring {
+    stroke: linktext;
+  }
 }