Follow ups for accessibility of announcements slider (#2580)

* Stop auto-rotation after first interaction with an arrow button.

Prevent auto-rotation for mobile.

Change settings for auto-rotation.

* Change 'resize' to 'change' and max-width to min-width.

* Apply the current changes to the announcement bar only.

* Renaming variables in JS.

* Add a condition for the announcement bar for JS.

* Refactoring JS code.

* Refactor JS.

* Combine mediaQuery into array.

assets/global.js

@@ -712,10 +712,24 @@ class SlideshowComponent extends SliderComponent {
     this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
     this.setSlideVisibility();
 
-    this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-    this.reducedMotion.addEventListener('change', () => {
-      if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
-    });
+    if (this.querySelector('.announcement-bar-slider')) {
+      this.announcementBarArrowButtonWasClicked = false;
+
+      this.desktopLayout = window.matchMedia('(min-width: 750px)');
+      this.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+      [this.reducedMotion, this.desktopLayout].forEach((mediaQuery) => {
+        mediaQuery.addEventListener('change', () => {
+          if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
+        });
+      });
+
+      [this.prevButton, this.nextButton].forEach((button) => {
+        button.addEventListener('click', () => {
+          this.announcementBarArrowButtonWasClicked = true;
+        }, {once: true});
+      });
+    }
 
     if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
   }
@@ -733,7 +747,7 @@ class SlideshowComponent extends SliderComponent {
       this.autoplayButtonIsSetToPlay = true;
       this.play();
     } else {
-      this.reducedMotion.matches ? this.pause() : this.play();
+      this.reducedMotion.matches || this.announcementBarArrowButtonWasClicked || !this.desktopLayout.matches ? this.pause() : this.play();
     }
   }
 
@@ -782,7 +796,7 @@ class SlideshowComponent extends SliderComponent {
         event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
       if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
       this.play();
-    } else if (!this.reducedMotion.matches) {
+    } else if (!this.reducedMotion.matches && !this.announcementBarArrowButtonWasClicked && this.desktopLayout.matches) {
       this.play();
     }
   }

sections/announcement-bar.liquid

@@ -119,9 +119,9 @@
     {
       "type": "range",
       "id": "change_slides_speed",
-      "min": 3,
-      "max": 9,
-      "step": 2,
+      "min": 5,
+      "max": 10,
+      "step": 1,
       "unit": "s",
       "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
       "default": 5