fixing aria expanded on filters
This commit is contained in:
parent
d6b15ccbca
commit
903983812c
|
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
||||||
// #################################################
|
// #################################################
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
||||||
// ###########################
|
// ###########################
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user