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

WIP: feat/PausePlayButton closes #16, #30 #34

Draft
adrian wants to merge 16 commits from adrian/site:feat/PausePlayButton into feat/a11y
pull from: adrian/site:feat/PausePlayButton
merge into: Deuxfleurs:feat/a11y
Conversation 1 Commits 16 Files changed 4 +14 -7
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 14cfee2aee - Show all commits

15
static/script-bon.js
View file

@ -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; const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Dictionary to keep track of animation intervals // Dictionary to keep track of animation intervals
@ -10,19 +10,18 @@ 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 illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes'); const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay'); const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre'); const parterre = document.getElementById('parterre');
// Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() {
if (prefersReducedMotion) { if (prefersReducedMotion) {
illustrationAccueil.setAttribute('aria-live', 'off'); illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off'); rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off'); orsay.setAttribute('aria-live', 'off');
parterre.setAttribute('aria-live', 'off'); parterre.setAttribute('aria-live', 'off');
} else { } else {
illustrationAccueil.setAttribute('aria-live', 'polite'); illustrationAccueil.setAttribute('aria-live', 'polite');
rennes.setAttribute('aria-live', 'polite'); rennes.setAttribute('aria-live', 'polite');
@ -95,12 +94,20 @@ function toggleAnimation() {
const imgTopToggleable = document.querySelector('.img_top_toggleable'); const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations // Play the animations
if (toggleable.style.display === 'none') { 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'; toggleable.style.display = 'block';
imgTopToggleable.style.display = 'none'; imgTopToggleable.style.display = 'none';
Object.keys(animationIntervals).forEach(id => { Object.keys(animationIntervals).forEach(id => {
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length); animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
}); });
} else { // Pause the animations } 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'; toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block'; imgTopToggleable.style.display = 'block';
Object.keys(animationIntervals).forEach(id => { Object.keys(animationIntervals).forEach(id => {