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 => {