From e515ec96d1925ff1a3f979093440f095d1aa2349 Mon Sep 17 00:00:00 2001 From: Trystan EVENO Date: Mon, 6 Jan 2025 19:09:46 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20DsfrAccordion=20shouldn't?= =?UTF-8?q?=20focus=20on=20toggle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DsfrAccordion/DsfrAccordion.vue | 2 +- src/composables/useCollapsable.ts | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/DsfrAccordion/DsfrAccordion.vue b/src/components/DsfrAccordion/DsfrAccordion.vue index 2c32c127..82214826 100644 --- a/src/components/DsfrAccordion/DsfrAccordion.vue +++ b/src/components/DsfrAccordion/DsfrAccordion.vue @@ -76,7 +76,7 @@ watch(isActive, (newValue, oldValue) => { 'fr-collapse--expanded': cssExpanded, // Need to use a separate data to add/remove the class after a RAF 'fr-collapsing': collapsing, }" - @transitionend="onTransitionEnd(isActive)" + @transitionend="onTransitionEnd(isActive, false)" > diff --git a/src/composables/useCollapsable.ts b/src/composables/useCollapsable.ts index 965d692b..342c3331 100644 --- a/src/composables/useCollapsable.ts +++ b/src/composables/useCollapsable.ts @@ -48,13 +48,16 @@ export const useCollapsable = () => { } /** - * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L25 + * @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js#L25 * @param {boolean} expanded + * @param {boolean} focusFirstAnchor * @return void */ - const onTransitionEnd = (expanded: boolean): void => { + const onTransitionEnd = (expanded: boolean, focusFirstAnchor: boolean = true): void => { collapsing.value = false - collapse.value?.querySelector('a')?.focus() + if (focusFirstAnchor) { + collapse.value?.querySelector('a')?.focus() + } if (collapse.value && expanded === false) { collapse.value.style.removeProperty('--collapse-max-height') }