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

View File

@ -112,8 +112,8 @@ FILTERS
<!-- THEMATIQUES FILTERS -->
<div class="action-thematiques-filters-wrapper">
<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>
<ul class="action-thematiques-filters-list" hidden>
<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 aria-hidden>
<li>
<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>

View File

@ -140,8 +140,8 @@ $total_posts_found = $brochuresPosts->found_posts + $fichesInfosPosts->found_pos
?>
<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>
<ul class="action-thematiques-filters-list" hidden>
<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 aria-hidden>
<li>
<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>