From 11a9f059dd9c2eb530b8bd9be98a2ac4fac491bb Mon Sep 17 00:00:00 2001
From: Zoltan Hawryluk <zoltan.dulac@gmail.com>
Date: Mon, 3 Feb 2025 15:35:55 -0500
Subject: [PATCH] Fix slider updating via oninput event on input field.  Change
 CSS for slider.

---
 content/body/slider.php |  6 +++---
 css/search.css          | 13 ++++++++++++-
 less/search.less        | 16 +++++++++++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/content/body/slider.php b/content/body/slider.php
index 7ce71686..cf9074b7 100644
--- 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
index 272f9ad1..84cf8b09 100644
--- a/css/search.css
+++ b/css/search.css
@@ -16,11 +16,19 @@
 .search__term {
   width: 100%;
   border: 3px solid #4e7963;
-  border-right: none;
+  border-right-width: 0px;
   padding: 5px;
   height: 2.25rem;
   border-radius: 5px 0 0 5px;
   color: #000;
+  position: relative;
+}
+.enable__is-dark-mode .search__term {
+  border-right-width: 3px;
+}
+.search__term:focus {
+  z-index: 2;
+  outline-offset: 2px;
 }
 .search__button {
   width: 2.5rem;
@@ -33,6 +41,9 @@
   cursor: pointer;
   margin: 0 !important;
 }
+.search__button:focus {
+  outline-offset: 2px;
+}
 .search__icon {
   width: 1.25rem;
 }
diff --git a/less/search.less b/less/search.less
index a8706144..4f02d36f 100644
--- 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 {