[Résolu] Rendre accessible des Flip Cards au clavier

Bonjour,

Il y a quelques temps j'ai codé des flip cards et les ai intégré à la code base de mon petit CMS. Voici une version de démonstration en statique : https://scriptura.github.io/page/articles.html

Et surtout voici un Code Pen : https://codepen.io/olivier-c/pen/WNWBpMG

Ça fonctionne avec ou sans JavaScript :
- en CSS les flip cards feront le minimum syndical mais sont accessibles au clavier (désactivez JS pour voir),
- avec JS l'expérience est améliorée mais je perds la possibilité d'atteindre le verso des cards avec le clavier.

J'ai tenté tout un tas de trucs plus ou moins complexes... pas très concluants (puisque je suis là !). L'exemple exposé ici est épuré de mes tentatives infructueuses, j'ai rétrogradé à une version moins usine à gaz avant de venir vers vous.

Voilà donc, je suis ouvert à vos suggestions pour rendre accessible ce script au clavier. Merci.
____
Le HTML :

<div class="column-fix gap gap-bottom">
  <article class="flip card" tabindex="0">
    <section>
      <h2 class="h2">
        <a href="/page/article.html">Integer hendrerit</a>
      </h2>
      <p>Vivamus sodales eget eros ut euismod...</p>
    </section>
    <section>
      <h2 class="h2">
        <a href="/page/article.html">Integer hendrerit</a>
      </h2>
      <ul>
        <li>Auteur : Anonyme</li>
        <li>Créé le : 17/05/2024</li>
        <li>Modifié le : 26/06/2024</li>
        <li>Mots clés : Concombres, Carottes, Choux</li>
      </ul>
    </section>
  </article>
</div>

Le CSS :

.flip {
  display: grid;
  perspective: 60em;
  transform-style: preserve-3d; /* @note Utile pour les éléments enfants */
  outline: none;

  & > * {
    grid-area: 1/-1; /* @note Évite un position absolute, les 2 éléments enfants de .flip s'adaptent donc l'un à l'autre, selon le contenu le plus conséquent des 2. */
    backface-visibility: hidden;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: var(--flip-duration, 3s);
    transition-property: transform, opacity;
    cursor: pointer;
  }

  & > :last-child {
    transform: rotateY(-180deg);
  }

  &.active {
    & > * {
      transition-duration: 1s;
    }

    & > :first-child {
      transform: rotateY(180deg);
    }

    & > :last-child {
      transform: rotateY(0deg);
    }
  }
  @media (scripting: none) {
    &:focus,
    &:active {
      & > * {
        transition-duration: 1s;
      }

      & > :first-child {
        transform: rotateY(180deg);
      }

      & > :last-child {
        transform: rotateY(0deg);
      }
    }
  }
}

Le JS :

'use strict'

const flipList = document.querySelectorAll('.flip')
let autoFlipTimeout, autoUnflipTimeout
let isAutoFlipping = true // Variable de contrôle

/**
 * Script de démonstration permettant à l'utilisateur de comprendre qu'une action 
 * est possible sur la carte. Retourne automatiquement la première carte après n seconde 
 * et la remet à son état initial après n seconde.
 */
const autoFlipFirstCard = () => {
  if (flipList.length > 0) {
    autoFlipTimeout = setTimeout(() => {
      flipList[0].classList.add('active')
      autoUnflipTimeout = setTimeout(() => {
        flipList[0].classList.remove('active')
        isAutoFlipping = false // Processus automatique terminé
      }, 1500)
    }, 1000)
  }
}

/**
 * Gère l'événement de vue de page en mettant à jour le compteur de vues dans 
 * le stockage local et en retournant automatiquement la première carte si le 
 * compteur de vues est inférieur à n.
 *
 * @note Le compteur de vues est unique pour toutes les pages.
 */
const handlePageView = () => {
  const pageViewed = 'demoFlipCard' // @note Un unique compteur pour toutes les pages.
   
  let views = parseInt(localStorage.getItem(pageViewed)) || 0
  views++
  localStorage.setItem(pageViewed, views)

  if (views < 4) {
    autoFlipFirstCard()
  }
}

handlePageView()

/**
 * Ajoute un gestionnaire d'événements à chaque élément avec la classe 'flip'.
 * Lorsqu'un élément est cliqué, il vérifie s'il possède déjà la classe 'active'.
 * Si c'est le cas, il la supprime, sinon il l'ajoute.
 * Si un autre élément a déjà la classe 'active', elle lui est retirée après 3 secondes.
 * @param {NodeList} flipList Liste des éléments auxquels ajouter des gestionnaires d'événements.
 */
flipList.forEach(flip => {
  flip.addEventListener('click', () => {
    // Annuler le processus automatique si l'utilisateur clique sur la première carte flip
    if (flip === flipList[0] && isAutoFlipping) {
      clearTimeout(autoFlipTimeout)
      clearTimeout(autoUnflipTimeout)
      isAutoFlipping = false
    }

    if (flip.classList.contains('active')) {
      flip.classList.remove('active')
    } else {
      document.querySelectorAll('.flip').forEach(element => {
        if (element !== flip && element.classList.contains('active')) {
          setTimeout(() => {
            element.classList.remove('active')
          }, 3000)
        }
      })
      flip.classList.add('active')
    }
  })

  // Enlever la classe .active lorsqu'un élément prend le focus
  flip.addEventListener('focus', () => {
    flip.classList.remove('active')
  })
})

Modifié par Olivier C (30 Jun 2024 - 23:18)

Alors... j'ai trouvé une solution qui consiste à désactiver le script lorsqu'une touche de contrôle est enfoncée :

// Détecte les interactions au clavier pour désactiver le flip automatique et les classes 'active'
const handleKeyboardNavigation = (event) => {
  // Liste des touches de navigation clavier
  const navigationKeys = ['Tab'];

  if (navigationKeys.includes(event.key)) {
    clearTimeout(autoFlipTimeout);
    clearTimeout(autoUnflipTimeout);
    isAutoFlipping = false;

    // Retirer toutes les classes 'active' des cartes
    flipList.forEach(flip => flip.classList.remove('active'));
  }
};

document.addEventListener('keydown', handleKeyboardNavigation);

Mais après il faut surtout reproduire le comportement du CSS via JS, ça marche mais bof bof bof pour ce dernier point :

flipList.forEach(flip => {
  flip.addEventListener('click', () => {

  // [ici le code vu précédemment]

  // Gérer les événements focus et blur pour appliquer les transformations CSS
  flip.addEventListener('focus', () => applyKeyboardStyles(flip), true);
  flip.addEventListener('blur', () => removeKeyboardStyles(flip), true);
  flip.addEventListener('keydown', (event) => {
    if (event.key === ' ') {
      event.preventDefault(); // Empêcher le comportement par défaut de la touche
      applyKeyboardStyles(flip);
    }
  });
});

/**
 * Applique les styles de transformation pour la navigation au clavier.
 * @param {HTMLElement} flip L'élément flip auquel appliquer les styles.
 */
const applyKeyboardStyles = (flip) => {
  clearTimeout(autoFlipTimeout);
  clearTimeout(autoUnflipTimeout);
  isAutoFlipping = false;

  flip.children[0].style.transitionDuration = '1s';
  flip.children[0].style.transform = 'rotateY(180deg)';
  flip.children[flip.children.length - 1].style.transitionDuration = '1s';
  flip.children[flip.children.length - 1].style.transform = 'rotateY(0deg)';
};

/**
 * Supprime les styles de transformation appliqués pour la navigation au clavier.
 * @param {HTMLElement} flip L'élément flip auquel supprimer les styles.
 */
const removeKeyboardStyles = (flip) => {
  flip.children[0].style.transitionDuration = '';
  flip.children[0].style.transform = '';
  flip.children[flip.children.length - 1].style.transitionDuration = '';
  flip.children[flip.children.length - 1].style.transform = '';
};

Si quelqu'un avait une solution pour zapper de manière élégante ce dernier point je suis preneur.
Modifié par Olivier C (30 Jun 2024 - 23:19)

Je vais tenter une modification de mon CSS avec des variables que je récupérerai en JS. Comme ça, si modification du CSS le JS le prendra en compte :

:root {
  --flip-duration: 3s;
  --transition-duration: 1s;
  --rotate-first-child: rotateY(180deg);
  --rotate-last-child: rotateY(0deg);
}

const transitionDuration = getComputedStyle(flip).getPropertyValue('--transition-duration');
const rotateFirstChild = getComputedStyle(flip).getPropertyValue('--rotate-first-child');
const rotateLastChild = getComputedStyle(flip).getPropertyValue('--rotate-last-child');

C'est un compromis acceptable j'imagine...

En attendant, si vous avez une approche plus élégante/optimisée je suis preneur...
Modifié par Olivier C (30 Jun 2024 - 11:07)

Bonsoir Gcyrillus,


Merci pour ton intervention. J'avais tenté cette voie mais j'avais eu des problèmes de scope. Mais du coup ta remarque ça m'a obligé à retourner voir mes styles - au cas où - et de là je me suis reposé la question de la pertinence de mes attributs tabindex dans mon HTML : de leurs utilisations provenait le mal ! Ils sont intéressants pour la navigation sans JavaScript (notion de persistance contrairement à :focus-within) mais parasitaient l'expérience utilisateur en CSS only. Il fallait donc les désactiver si JS :

flip.removeAttribute('tabindex')

Une fois le bug enfin trouvé mon CSS a coulé de source, avec l'utilisation de :focus-within on en vient à réduire la totalité du CSS à ceci :

.flip {
  display: grid;
  perspective: 60em;
  transform-style: preserve-3d; /* Utile pour les éléments enfants */
  outline: none;

  & > * {
    grid-area: 1/-1; /* Évite un position absolute, les 2 éléments enfants de .flip s'adaptent donc l'un à l'autre, selon le contenu le plus conséquent des 2. */
    backface-visibility: hidden;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: var(--flip-transition-duration, 3s);
    transition-property: transform, opacity;
    cursor: pointer;
  }

  & > :last-child {
    transform: rotateY(-180deg);
  }

  &:focus-within,
  &:active,
  &.active {
    & > * {
      --flip-transition-duration: 1s;
    }

    & > :first-child {
      transform: rotateY(180deg);
    }

    & > :last-child {
      transform: rotateY(0deg);
    }
  }
}

Avec un dernier petit ajustement côté JS :

flip.addEventListener('focusin', () => {
  flip.classList.remove('active')
})

Et maintenant tout est OK !
Merci infiniment.
Modifié par Olivier C (01 Jul 2024 - 11:46)