Fix slider updating via oninput event on input field. Change CSS for …

…slider.
PublicisSapient · Feb 3, 2025 · 11a9f05 · 11a9f05
1 parent db6e297
commit 11a9f05
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/content/body/slider.php b/content/body/slider.php
@@ -49,7 +49,7 @@
     <div>
       <div class="html-slider__container">
         <input type="range" id="horizontal-slider" name="donationAmount" value="500" min="0" max="1000" step="50"
-        onchange="this.form.elements.myOutput.innerHTML = parseFloat(this.value);"       
+        oninput="this.form.elements.myOutput.innerHTML = parseFloat(this.value);"       
         >
       </div>
       <output class="html-slider__output" name="myOutput" role="presentation">500</output>
@@ -109,8 +109,8 @@
       "notes": "Just like any interactive component, it needs a label"
     },
     {
-      "label": "Set an onchange event to display current value.",
-      "highlight": "onchange=\"[^\"]*\" ||| id=\"myOutput\"",
+      "label": "Set an oninput event to display current value.",
+      "highlight": "oninput=\"[^\"]*\" ||| id=\"myOutput\"",
       "notes": [
         "<p>This is so sighted users can see the value of the slider.  Although I implemented this inline, you should use <code>.addEventListener</code> instead.</p>",
         "<p><strong>Note:</strong> Originally, I used an <code>oninput</code> event on the form element to do this, but this wasn't being captured by iOS with VoiceOver on, so I changed it to this.  Keep that in mind when you implement this yourself.</p>"

diff --git a/css/search.css b/css/search.css
diff --git a/less/search.less b/less/search.less
@@ -10,11 +10,21 @@
     &__term {
         width: 100%;
         border: 3px solid @search-color;
-        border-right: none;
+        border-right-width: 0px;
         padding: 5px;
         height: (36 / @px);
         border-radius: 5px 0 0 5px;
         color: #000;
+        position: relative;
+
+        .enable__is-dark-mode & {
+            border-right-width: 3px;
+        }
+
+        &:focus {
+            z-index: 2;
+            outline-offset: 2px;
+        }
     }
 
     &__button {
@@ -27,6 +37,10 @@
         border-radius: 0 5px 5px 0;
         cursor: pointer;
         margin: 0 !important;
+
+        &:focus {
+            outline-offset: 2px;
+        }
     }
 
     &__icon {