Bonjour à tous,
Je travaille actuellement sur un projet visant à afficher des extraits d’articles sous forme d’accordéon. Le système est déjà en place : il suffit de cliquer sur un article replié pour l’ouvrir, puis de cliquer à nouveau en dehors de cet article pour le refermer. La navigation entre les articles peut également se faire à l’aide des touches Tabulation et Majuscule+Tabulation.
Il reste cependant un défi à relever : les liens situés dans les sections repliées restent inactifs même lorsque l’article est déplié.
Je serais reconnaissant pour toute aide ou suggestion pour résoudre ce problème. Merci d’avance pour votre coopération.
Modifié par Pyanepsion (16 Jul 2024 - 13:44)
Je travaille actuellement sur un projet visant à afficher des extraits d’articles sous forme d’accordéon. Le système est déjà en place : il suffit de cliquer sur un article replié pour l’ouvrir, puis de cliquer à nouveau en dehors de cet article pour le refermer. La navigation entre les articles peut également se faire à l’aide des touches Tabulation et Majuscule+Tabulation.
Il reste cependant un défi à relever : les liens situés dans les sections repliées restent inactifs même lorsque l’article est déplié.
Je serais reconnaissant pour toute aide ou suggestion pour résoudre ce problème. Merci d’avance pour votre coopération.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test de focus</title>
<link rel="stylesheet" href="/css/screen.css">
</head>
<body>
<div class="colonne-principale vignettes longueur-30-lignes" role="region" aria-label="Test de focus">
<article class="vignette lire-la-suite-pourpre" tabindex="0">
<p>Lien : <a href="https://google.fr" class="" target="_blank" rel="noreferrer nofollow">Glop</a></p>
<p>Article 1</p>
<p>Lien : <a href="https://google.fr" class="" target="_blank" rel="noreferrer nofollow">Pas glop</a></p>
</article>
<article class="vignette lire-la-suite-pourpre" tabindex="0">
<p>Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2 Article 2</p>
</article>
<article class="vignette lire-la-suite-pourpre" tabindex="0">
<p>Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3 Article 3</p>
</article>
<article class="vignette lire-la-suite-pourpre" tabindex="0">
<p>Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4 Article 4</p>
</article>
</div>
<!-- Prise de focus des articles de proche en proche -->
<script src="/js/fonction-article-focus-seul.js"></script>
</body>
</html>
.colonne-principale {
display: block;
justify-content: space-between;
}
.colonne-principale.vignettes {
display: grid;
grid-template-columns: repeat(3), 1fr);
gap: var(--gouttiere);
}
.colonne-principale.vignettes article.vignette {
position: relative; /* Imposer l’article en position relative */
}
.longueur-30-lignes .vignette {max-height: calc(1.500em * 3);}
.longueur-40-lignes .vignette {max-height: calc(1.500em * 4);}
.longueur-30-lignes .vignette,
.longueur-40-lignes .vignette {
overflow: hidden;
transition: max-height 0.2s ease;
text-align: left;
}
.longueur-30-lignes .vignette::after,
.longueur-40-lignes .vignette::after {
content: "Lire la suite ?";
display: block;
width: calc(100% - 2 * 1);
height: calc(1.500em + 1);
background-color: red;
position: absolute;
bottom: 0;
left: 1;
text-align: left;
border-top: var(--lisere) solid rgba(black, 1);
box-sizing: border-box;
}
.longueur-30-lignes .vignette.depliage,
.longueur-40-lignes .vignette.depliage {
max-height: 100%;
}
.longueur-30-lignes .vignette.depliage::after,
.longueur-40-lignes .vignette.depliage::after {
display: none;
}document.addEventListener("DOMContentLoaded", function() {
const articles = document.querySelectorAll(".vignette");
// Fermer tous les articles
function fermerTousLesArticles() {
articles.forEach(article => article.classList.remove("depliage"));
}
// Ouvrir un article sans activer les focus internes
function ouvrirArticle(article) {
article.classList.add("depliage");
}
// Initialiser les articles pour désactiver le focus interne
articles.forEach(article => {
const focusableElements = article.querySelectorAll("a, button, input, textarea, select, [tabindex]");
focusableElements.forEach(element => element.setAttribute("tabindex", "-1"));
});
// Ajouter un gestionnaire de clic pour chaque article
articles.forEach(article => {
article.addEventListener("click", function(event) {
// Empêcher la propagation de l’événement de clic à l’élément parent
event.stopPropagation();
// Fermer tous les articles
fermerTousLesArticles();
// Ouvrir l'article cliqué
ouvrirArticle(article);
// Donner le focus à l'article
article.focus();
});
// Ajouter un gestionnaire de focus pour chaque article
article.addEventListener("focus", function(event) {
// Fermer tous les articles
fermerTousLesArticles();
// Ouvrir l’article qui reçoit le focus
ouvrirArticle(article);
});
// Ajouter un gestionnaire de blur pour chaque article
article.addEventListener("blur", function() {
// Fermer l’article lorsqu’il perd le focus
article.classList.remove("depliage");
});
});
// Ajouter un gestionnaire de clic pour fermer les articles en cliquant en dehors d’un article
document.addEventListener("click", function() {
fermerTousLesArticles();
});
});Modifié par Pyanepsion (16 Jul 2024 - 13:44)
