VA-1495 Fix reduced motion is respected in single choice

scripts/single-choice-set.js

@@ -210,7 +210,8 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, ResultSlide, Sou
     if (!this.muted) {
       // Can't play it after the transition end is received, since this is not
       // accepted on iPad. Therefore we are playing it here with a delay instead
-      SoundEffects.play(this.lastAnswerIsCorrect ? 'positive-short' : 'negative-short', 700);
+      SoundEffects.play(this.lastAnswerIsCorrect ? 'positive-short' : 'negative-short',
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 700);
     }
 
     if (event.data.index + 1 >= self.choices.length) {
@@ -614,26 +615,38 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, ResultSlide, Sou
       return;
     }
 
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     const $previousSlide = self.$slides[self.currentIndex];
     const $currentChoice = self.choices[index];
     const $currentSlide = self.$slides[index];
     const isResultSlide = (index >= self.choices.length);
 
     self.toggleNextButton(false);
 
-    H5P.Transition.onTransitionEnd(self.$choices, () => {
+    const handleTransitionEnd = () => {
       $previousSlide.removeClass('h5p-sc-current-slide');
 
       // on slides with answers focus on first alternative
       // if content is root and not on result slide - always move focus
       if (!isResultSlide && (moveFocus || self.isRoot())) {
         $currentChoice.focusOnAlternative(0);
       }
-      // on last slide, focus on try again button
       else {
+        // on last slide, focus on try again button
         self.resultSlide.focusScore();
       }
-    }, 600);
+    };
+
+    if (prefersReducedMotion) {
+      handleTransitionEnd();
+    }
+    else {
+      H5P.Transition.onTransitionEnd(
+        self.$choices,
+        handleTransitionEnd,
+        600
+      );
+    }
 
     // if should show result slide
     if (isResultSlide) {
@@ -653,6 +666,11 @@ H5P.SingleChoiceSet = (function ($, UI, Question, SingleChoice, ResultSlide, Sou
     self.trigger('resize');
 
     self.currentIndex = index;
+
+    // Get focus on first alternative when reduced motion
+    if (prefersReducedMotion) {
+      requestAnimationFrame(handleTransitionEnd);
+    }
   };
 
   /**

scripts/single-choice.js

@@ -96,12 +96,18 @@ H5P.SingleChoiceSet.SingleChoice = (function ($, EventDispatcher, Alternative) {
         currentIndex: $element.index(),
       });
 
-      H5P.Transition.onTransitionEnd($element.find('.h5p-sc-progressbar'), () => {
+      $element.addClass('h5p-sc-selected').parent().addClass('h5p-sc-selected');
+
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
         $element.addClass('h5p-sc-drummed');
         self.showResult(correct, answerIndex);
-      }, 700);
-
-      $element.addClass('h5p-sc-selected').parent().addClass('h5p-sc-selected');
+      }
+      else {
+        H5P.Transition.onTransitionEnd($element.find('.h5p-sc-progressbar'), () => {
+          $element.addClass('h5p-sc-drummed');
+          self.showResult(correct, answerIndex);
+        }, 700);
+      }
 
       // indicate that this question is anwered
       this.setAnswered(true);

styles/single-choice-set.css

@@ -448,3 +448,21 @@ li.h5p-sc-alternative .h5p-sc-status {
   min-height: initial;
   max-height: none;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .h5p-single-choice-set .h5p-joubelui-progressbar-background,
+  .h5p-sc-set.h5p-sc-animate,
+  ul.h5p-sc-alternatives li.h5p-sc-alternative,
+  .h5p-sc-drummed .h5p-sc-progressbar {
+    transition: none !important;
+  }
+
+  ul.h5p-sc-alternatives li.h5p-sc-alternative.h5p-sc-reveal-wrong {
+    transform: none;
+  }
+
+  li.h5p-sc-alternative.h5p-sc-selected .h5p-sc-progressbar {
+    animation: none !important;
+    width: 100%;
+  }
+}