Follow ups for accessibility of announcements slider (Shopify#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.
fp-trading · Jun 6, 2023 · af83afd · af83afd
1 parent 150da65
commit af83afd
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -722,10 +722,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();
   }
@@ -743,7 +757,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();
     }
   }
 
@@ -792,7 +806,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();
     }
   }

diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
@@ -27,6 +27,36 @@
   "name": "t:sections.announcement-bar.name",
   "max_blocks": 12,
   "class": "announcement-bar-section",
+  "settings": [
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "accent-1"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_line_separator",
+      "default": true,
+      "label": "t:sections.header.settings.show_line_separator.label"
+    },
+    {
+      "type": "checkbox",
+      "id": "auto_rotate",
+      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
+      "default": false
+    },
+    {
+      "type": "range",
+      "id": "change_slides_speed",
+      "min": 5,
+      "max": 10,
+      "step": 1,
+      "unit": "s",
+      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
+      "default": 5
+    }
+  ],
   "blocks": [
     {
       "type": "announcement",