From f2479f24b48e35b0bcebb86be3f10536b02e907b Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Fri, 19 Jul 2024 10:14:47 -0400
Subject: [PATCH 1/3] add functionality fro prefers-reduce-motion to the
 timeline next/prev buttons

---
 src/js/timeline/Timeline.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/js/timeline/Timeline.js b/src/js/timeline/Timeline.js
index 97106097..881ff0f5 100644
--- a/src/js/timeline/Timeline.js
+++ b/src/js/timeline/Timeline.js
@@ -462,6 +462,18 @@ class Timeline {
 
     }
 
+    //Check prefered-reduced-motion - Accessibility to reduce motion if enabled in Operationg System
+    reducedMotionEnabled() {
+        const isReduced = 
+            window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
+            window.matchMedia(`(prefers-reduced-motion: reduce)`).matches ===
+                true
+        // Change duration for speed in which slides move
+        if(isReduced){
+            this._updateDisplay(this._timenav.options.height, true, 1);
+        }
+    }
+
     _initEvents() {
         // TimeNav Events
         this._timenav.on('change', this._onTimeNavChange, this);
@@ -555,10 +567,12 @@ class Timeline {
     }
 
     _onStorySliderNext(e) {
+        this.reducedMotionEnabled()
         this.fire("nav_next", e);
     }
 
     _onStorySliderPrevious(e) {
+        this.reducedMotionEnabled()
         this.fire("nav_previous", e);
     }
 

From 23732d2a731271d04800ace80388e95d8156863e Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Mon, 22 Jul 2024 14:00:23 -0400
Subject: [PATCH 2/3] updated timenav duration to match the slider

---
 src/js/timeline/Timeline.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/js/timeline/Timeline.js b/src/js/timeline/Timeline.js
index 881ff0f5..a9240576 100644
--- a/src/js/timeline/Timeline.js
+++ b/src/js/timeline/Timeline.js
@@ -468,9 +468,14 @@ class Timeline {
             window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
             window.matchMedia(`(prefers-reduced-motion: reduce)`).matches ===
                 true
-        // Change duration for speed in which slides move
+        // Change duration for speed in which slides/timenav move
         if(isReduced){
             this._updateDisplay(this._timenav.options.height, true, 1);
+            this._timenav.options.duration = 1
+        }
+        else {
+            // revert time nav option duration back to 1000
+            this._timenav.options.duration = 1000
         }
     }
 
@@ -479,6 +484,7 @@ class Timeline {
         this._timenav.on('change', this._onTimeNavChange, this);
         this._timenav.on('zoomtoggle', this._onZoomToggle, this);
         this._timenav.on('visible_ticks_change', this._onVisibleTicksChange, this);
+        this._timenav.on('visible_ticks_change', this.reducedMotionEnabled, this);
 
         // StorySlider Events
         this._storyslider.on('change', this._onSlideChange, this);

From c4faf8486fdc4eb090ae05b6c06bc1c0f71fb452 Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Mon, 22 Jul 2024 14:18:29 -0400
Subject: [PATCH 3/3] changed location where reducedMotionEnabled is checked

---
 src/js/timeline/Timeline.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/timeline/Timeline.js b/src/js/timeline/Timeline.js
index a9240576..37e0dbd2 100644
--- a/src/js/timeline/Timeline.js
+++ b/src/js/timeline/Timeline.js
@@ -484,7 +484,6 @@ class Timeline {
         this._timenav.on('change', this._onTimeNavChange, this);
         this._timenav.on('zoomtoggle', this._onZoomToggle, this);
         this._timenav.on('visible_ticks_change', this._onVisibleTicksChange, this);
-        this._timenav.on('visible_ticks_change', this.reducedMotionEnabled, this);
 
         // StorySlider Events
         this._storyslider.on('change', this._onSlideChange, this);
@@ -505,6 +504,7 @@ class Timeline {
     }
 
     _onSlideChange(e) {
+        this.reducedMotionEnabled()
         if (this.current_id != e.unique_id) {
             this.current_id = e.unique_id;
             this._timenav.goToId(this.current_id);
@@ -513,6 +513,7 @@ class Timeline {
     }
 
     _onTimeNavChange(e) {
+        this.reducedMotionEnabled()
         if (this.current_id != e.unique_id) {
             this.current_id = e.unique_id;
             this._storyslider.goToId(this.current_id);