fix: 🐛 DsfrAccordion shouldn't focus on toggle

dnum-mi · Jan 6, 2025 · e515ec9 · e515ec9
1 parent 236d118
commit e515ec9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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)"
     >
       <!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
       <slot />

diff --git 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')
     }