Deuxfleurs/site
20
2
Fork 6
Code Issues 4 Pull requests 7 Releases Wiki Activity

added aria region live attribute on each region which animates according to prefers-reduced-motion option selected #30

Browse source
This commit is contained in:
Adrian Rosin 2024-02-02 10:59:02 +01:00
parent 632986b36b
commit 7c1b44bd29
2 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/index.html
View file

@ -121,7 +121,7 @@
<main aria-label="contenu de la page web"> <main aria-label="contenu de la page web">
<div id="jardin"> <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 --> <!-- 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"> <pre class="center" aria-label="Animation de texte de bienvenue">
'\ ; /' '\ ; /'

24
static/script-bon.js
View file

@ -10,6 +10,27 @@ let frames = {};
// dictionary to keep track of frame count for each animation // dictionary to keep track of frame count for each animation
let frameCounts = {}; 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) { function animate(id, delay) {
@ -30,6 +51,9 @@ function animate(id, delay) {
frames[id] = framesList; frames[id] = framesList;
delays[id] = delay; delays[id] = delay;
// Update ARIA live attributes
updateARIALiveAttributes();
// Start the animation if prefers-reduced-motion is not enabled // Start the animation if prefers-reduced-motion is not enabled
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length); animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);