From 14cfee2aeeb34bdb35f60dc25e36350034288e14 Mon Sep 17 00:00:00 2001
From: Adrian Rosin <adrian.rosin.etu@univ-lille.fr>
Date: Fri, 2 Feb 2024 11:03:55 +0100
Subject: [PATCH] feat: changed aria live attribute also if the prefers reduced
 motion is set to off and if the user clicks on the button to play/pause
 animations #30

---
 static/script-bon.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/static/script-bon.js b/static/script-bon.js
index 6d31de2..069bb06 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -1,4 +1,4 @@
-// Checks if the user enabled or not prefers-reduced-motion
+// Checks if the user enabled prefers-reduced-motion
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
 // Dictionary to keep track of animation intervals
@@ -10,19 +10,18 @@ let frames = {};
 // dictionary to keep track of frame count for each animation
 let frameCounts = {};
 
+const illustrationAccueil = document.getElementById('illustration-accueil');
+const rennes = document.getElementById('rennes');
+const orsay = document.getElementById('orsay');
+const parterre = document.getElementById('parterre');
+
 // Update ARIA live attributes based on prefers-reduced-motion
 function updateARIALiveAttributes() {
-  const illustrationAccueil = document.getElementById('illustration-accueil');
-  const rennes = document.getElementById('rennes');
-  const orsay = document.getElementById('orsay');
-  const parterre = document.getElementById('parterre');
-
   if (prefersReducedMotion) {
     illustrationAccueil.setAttribute('aria-live', 'off');
     rennes.setAttribute('aria-live', 'off');
     orsay.setAttribute('aria-live', 'off');
     parterre.setAttribute('aria-live', 'off');
-
   } else {
     illustrationAccueil.setAttribute('aria-live', 'polite');
     rennes.setAttribute('aria-live', 'polite');
@@ -95,12 +94,20 @@ function toggleAnimation() {
   const imgTopToggleable = document.querySelector('.img_top_toggleable');
   // Play the animations
   if (toggleable.style.display === 'none') {
+    illustrationAccueil.setAttribute('aria-live', 'polite');
+    rennes.setAttribute('aria-live', 'polite');
+    orsay.setAttribute('aria-live', 'polite');
+    parterre.setAttribute('aria-live', 'polite');
     toggleable.style.display = 'block';
     imgTopToggleable.style.display = 'none';
     Object.keys(animationIntervals).forEach(id => {
       animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
     });
   } else {  // Pause the animations
+    illustrationAccueil.setAttribute('aria-live', 'off');
+    rennes.setAttribute('aria-live', 'off');
+    orsay.setAttribute('aria-live', 'off');
+    parterre.setAttribute('aria-live', 'off');
     toggleable.style.display = 'none';
     imgTopToggleable.style.display = 'block';
     Object.keys(animationIntervals).forEach(id => {