fixing aria expanded on filters

This commit is contained in:
Antoine M 2023-12-07 11:03:11 +01:00
parent d6b15ccbca
commit 903983812c
4 changed files with 19 additions and 10 deletions

View File

@ -130,7 +130,7 @@ function handleSubmenuToggle() {
submenuToggle.addEventListener('click', () => { submenuToggle.addEventListener('click', () => {
const isSubmenuOpen = submenuToggle.getAttribute('aria-expanded'); const isSubmenuOpen = submenuToggle.getAttribute('aria-expanded');
if (isSubmenuOpen != null) { if (isSubmenuOpen === 'true') {
return closeSubMenuFilters(); return closeSubMenuFilters();
} else { } else {
return openSubMenuFilters(); return openSubMenuFilters();
@ -162,8 +162,10 @@ function openSubMenuFilters() {
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list' '.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
); );
submenuFilters.removeAttribute('hidden'); submenuFilters.removeAttribute('hidden');
submenuFilters.removeAttribute('aria-hidden');
submenuToggle.setAttribute('active', ''); submenuToggle.setAttribute('active', '');
submenuToggle.setAttribute('aria-expanded', ''); submenuToggle.setAttribute('aria-expanded', 'true');
} }
function closeSubMenuFilters() { function closeSubMenuFilters() {
const submenuToggle = document.querySelector( const submenuToggle = document.querySelector(
@ -173,8 +175,11 @@ function closeSubMenuFilters() {
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list' '.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
); );
submenuFilters.setAttribute('hidden', ''); submenuFilters.setAttribute('hidden', '');
submenuFilters.setAttribute('aria-hidden', '');
submenuToggle.removeAttribute('active'); submenuToggle.removeAttribute('active');
submenuToggle.removeAttribute('aria-expanded'); submenuToggle.setAttribute('aria-expanded', 'false');
// submenuToggle.removeAttribute('aria-expanded');
} }
// ################################################# // #################################################

View File

@ -14,7 +14,7 @@ function handleSubmenuToggle() {
submenuToggle.addEventListener('click', () => { submenuToggle.addEventListener('click', () => {
const isSubmenuOpen = submenuToggle.getAttribute('aria-expanded'); const isSubmenuOpen = submenuToggle.getAttribute('aria-expanded');
if (isSubmenuOpen != null) { if (isSubmenuOpen === 'true') {
return closeSubMenuFilters(); return closeSubMenuFilters();
} else { } else {
return openSubMenuFilters(); return openSubMenuFilters();
@ -46,8 +46,10 @@ function openSubMenuFilters() {
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list' '.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
); );
submenuFilters.removeAttribute('hidden'); submenuFilters.removeAttribute('hidden');
submenuFilters.removeAttribute('aria-hidden');
submenuToggle.setAttribute('active', ''); submenuToggle.setAttribute('active', '');
submenuToggle.setAttribute('aria-expanded', ''); submenuToggle.setAttribute('aria-expanded', 'true');
} }
function closeSubMenuFilters() { function closeSubMenuFilters() {
const submenuToggle = document.querySelector( const submenuToggle = document.querySelector(
@ -57,8 +59,10 @@ function closeSubMenuFilters() {
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list' '.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
); );
submenuFilters.setAttribute('hidden', ''); submenuFilters.setAttribute('hidden', '');
submenuFilters.setAttribute('aria-hidden', '');
submenuToggle.removeAttribute('active'); submenuToggle.removeAttribute('active');
submenuToggle.removeAttribute('aria-expanded'); submenuToggle.setAttribute('aria-expanded', 'false');
} }
// ########################### // ###########################

View File

@ -112,8 +112,8 @@ FILTERS
<!-- THEMATIQUES FILTERS --> <!-- THEMATIQUES FILTERS -->
<div class="action-thematiques-filters-wrapper"> <div class="action-thematiques-filters-wrapper">
<div class="filters-toolbar__action-thematiques-filters"> <div class="filters-toolbar__action-thematiques-filters">
<button class="filter-by-thematiques-submenu-toggle"><?php echo __("Filtrer par catégories", "homegrade-theme__texte-fonctionnel") ?></button> <button class="filter-by-thematiques-submenu-toggle" aria-expanded="false"><?php echo __("Filtrer par catégories", "homegrade-theme__texte-fonctionnel") ?></button>
<ul class="action-thematiques-filters-list" hidden> <ul class="action-thematiques-filters-list" hidden aria-hidden>
<li> <li>
<input class="filters-toolbar__action-thematiques-filter--show-all" type="checkbox" id="all" name="all" value="all" checked> <input class="filters-toolbar__action-thematiques-filter--show-all" type="checkbox" id="all" name="all" value="all" checked>
<label for="all"><?php echo __("Tous", "homegrade-theme__texte-fonctionnel") ?></label> <label for="all"><?php echo __("Tous", "homegrade-theme__texte-fonctionnel") ?></label>

View File

@ -140,8 +140,8 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
?> ?>
<div class="filters-toolbar__action-thematiques-filters"> <div class="filters-toolbar__action-thematiques-filters">
<button class="filter-by-thematiques-submenu-toggle"><?php echo __("Filtrer par catégories", "homegrade-theme__texte-fonctionnel") ?></button> <button class="filter-by-thematiques-submenu-toggle" aria-expanded="false"><?php echo __("Filtrer par catégories", "homegrade-theme__texte-fonctionnel") ?></button>
<ul class="action-thematiques-filters-list" hidden> <ul class="action-thematiques-filters-list" hidden aria-hidden>
<li> <li>
<input class="filters-toolbar__action-thematiques-filter--show-all" type="checkbox" id="all" name="all" value="all" checked> <input class="filters-toolbar__action-thematiques-filter--show-all" type="checkbox" id="all" name="all" value="all" checked>
<label for="all"><?php echo __("Tous", "homegrade-theme__texte-fonctionnel") ?></label> <label for="all"><?php echo __("Tous", "homegrade-theme__texte-fonctionnel") ?></label>