Browse Source

Un peu d'accessibilité pour la faq selon les recommandations de https://www.aditus.io/patterns/accordion/

master
Eric Lupinacci 3 months ago
parent
commit
c4bc94aa96
  1. 3
      css/faq.css
  2. 12
      inclure/faq_dl.html
  3. 17
      js/faq.js

3
css/faq.css

@ -11,5 +11,8 @@ dl.faq dd a.retour { display: block; padding: .4em .5em 0 0; text-align: right;
dl.faq.js dt { padding-left: 1.5em; background-image: url(img/faq-open.svg); background-repeat: no-repeat; background-position: 0 0.25em; cursor: pointer; }
dl.faq.js dt.item-faq-closed { background-image: url(img/faq-close.svg); }
/* Dans la version accessible avec bouton, éviter des styles intempestifs */
dl.faq dt button { background: none; border: none; text-align: unset; }
/* Pour l'impression */
@media print { dl.faq dd { display: block !important; } }

12
inclure/faq_dl.html

@ -1,23 +1,23 @@
#SET{ancre, faq_#ENV{no_bloc}_#ENV{no_faq}}
#SET{id_faq, #ENV{no_bloc}_#ENV{no_faq}}
<B_faq>
[<h3 class="spip">
[<a class="ancre" href="##GET{ancre}" id="(#GET{ancre})"></a>]
[<a class="ancre" href="[#faq_(#GET{id_faq})]" id="faq_(#GET{id_faq})"></a>]
(#ENV**{titre})
</h3>]
<dl class="faq[ (#CONFIG{faq/charger_js}|et{#CONFIG{faq/iconifier_js}}|oui)js]">
<BOUCLE_faq(DATA){source table, #ENV{faq}}{par cle}>
<dt>[
[(#CONFIG{faq/ancrer_question}|oui)[<a class="ancre" href="##GET{ancre}_#CLE" id="(#GET{ancre})_#CLE"></a>]]
(#VALEUR{question})
[(#CONFIG{faq/ancrer_question}|oui)[<a class="ancre" href="[#faq_(#GET{id_faq})_#CLE]" id="faq_(#GET{id_faq})_#CLE"></a>]]
<button id="faq-header-#GET{id_faq}_#CLE" aria-controls="faq-panel-#GET{id_faq}_#CLE">(#VALEUR{question})</button>
]</dt>
<dd>
<dd id="faq-panel-#GET{id_faq}_#CLE" aria-labelledby="faq-header-#GET{id_faq}_#CLE">
<BOUCLE_tags(DATA){source table, #VALEUR{tags}}{par valeur}>
[(#COMPTEUR_BOUCLE|=={1}|oui)<ul class="liste-tags">]
<li class="tag">#VALEUR</li>
[(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)</ul>]
</BOUCLE_tags>
[(#VALEUR{reponse})][
(#CONFIG{faq/lier_faq}|oui)[<a class="retour" rel="nofollow" href="#(#GET{ancre})"><:faq:lien_debut_faq:></a>]
(#CONFIG{faq/lier_faq}|oui)[<a class="retour" rel="nofollow" href="#faq_(#GET{id_faq})"><:faq:lien_debut_faq:></a>]
]</dd>
</BOUCLE_faq>
</dl>

17
js/faq.js

@ -1,9 +1,25 @@
jQuery(function($){
function init_faq() {
$('dl.faq > dt').addClass("item-faq-closed").click(function(){
// Bascule de l'état ouvert/fermé sur la question
$(this).toggleClass("item-faq-closed").next().toggle('fast');
// Mise à jour de l'état ouvert/fermé sur le bouton
let bouton = $(this).find('> button');
if (bouton.attr('aria-expanded') === 'true') {
bouton.attr('aria-expanded', 'false');
} else {
bouton.attr('aria-expanded', 'true');
}
// Mise à jour de l'état ouvert/fermé sur la réponse
if ($(this).next().attr('hidden')) {
$(this).next().removeAttr('hidden');
} else {
$(this).next().attr('hidden', true);
}
return false;
}).next().hide();
$('dl.faq > dt button').attr('aria-expanded', 'false');
$('dl.faq > dd').attr('hidden', true);
}
init_faq();
// Relancer lors de rechargements ajax
@ -12,5 +28,4 @@ jQuery(function($){
onAjaxLoad(init_faq);
});
}
});
Loading…
Cancel
Save