From 7c1b44bd293b44c73745e85f8be5c2306dbfc50f Mon Sep 17 00:00:00 2001
From: Adrian Rosin <adrian.rosin.etu@univ-lille.fr>
Date: Fri, 2 Feb 2024 10:59:02 +0100
Subject: [PATCH] added aria region live attribute on each region which
 animates according to prefers-reduced-motion option selected #30

---
 static/index.html    |  2 +-
 static/script-bon.js | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/static/index.html b/static/index.html
index a1ce300..c8df13a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -121,7 +121,7 @@
 
     <main aria-label="contenu de la page web">
         <div id="jardin">
-            <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées" tabindex="0">
+            <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées">
                 <!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
                 <pre class="center" aria-label="Animation de texte de bienvenue">
                                          '\ ; /'
diff --git a/static/script-bon.js b/static/script-bon.js
index c14fa34..6d31de2 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -10,6 +10,27 @@ let frames = {};
 // dictionary to keep track of frame count for each animation
 let frameCounts = {};
 
+// 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');
+    orsay.setAttribute('aria-live', 'polite');
+    parterre.setAttribute('aria-live', 'polite');
+  }
+}
+
 
 function animate(id, delay) {
 
@@ -30,6 +51,9 @@ function animate(id, delay) {
   frames[id] = framesList;
   delays[id] = delay;
 
+  // Update ARIA live attributes
+  updateARIALiveAttributes();
+
   // Start the animation if prefers-reduced-motion is not enabled
   if (!prefersReducedMotion) {
     animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);