fixed validation errors

w3c · Oct 8, 2023 · cf67540 · cf67540
1 parent bf46ad4
commit cf67540
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/content/patterns/slider/examples/js/slider-rating.js b/content/patterns/slider/examples/js/slider-rating.js
@@ -224,9 +224,9 @@ class RatingSlider {
   onRailClick(event) {
     const x = this.getSVGPoint(event).x;
     const diffX = x - this.railOffset;
-    const fract =
+    const rating =
       0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
-    const value = Math.round(fract);
+    const value = Math.round(rating);
 
     this.moveSliderTo(value);
 

diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html
@@ -44,7 +44,7 @@ <h3>Warning!</h3>
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../radio/examples/radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a eleve point rating scale.</li>
+          <li><a href="../../radio/examples/radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a eleven point rating scale.</li>
           <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="slider-temperature.html">Vertical Temperature 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-seek.html">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -129,7 +129,7 @@ <h2 id="ex_label">Example</h2>
                 <circle class="focus" cx="340" cy="20" r="14"/>
                 <text class="label" x="332" y="50">10</text>
                 <text class="description"  x="310" y="65">Completely</text>
-                <text class="description"  x="315" y="80">Satisified</text>
+                <text class="description"  x="315" y="80">Satisfied</text>
                </g>
             </svg>
           </div>