Merge pull request #1012 from dnum-mi/fix/on-transition-end-focus

fix: add capability to not auto focus for sidemenu

Author: laruiss

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -41,7 +41,7 @@ onMounted(() => {
 
 watch(isActive, (newValue, oldValue) => {
   /*
-  * @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js
+  * @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js
   */
   if (newValue !== oldValue) {
     doExpand(newValue)

src/components/DsfrSideMenu/DsfrSideMenu.types.ts

@@ -10,6 +10,7 @@ export type DsfrSideMenuProps = {
   menuItems?: DsfrSideMenuListItemProps[]
   headingTitle?: string
   titleTag?: string
+  focusOnExpanding?: boolean
 }
 
 export type DsfrSideMenuButtonProps = {
@@ -26,4 +27,5 @@ export type DsfrSideMenuListProps = {
     DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>
     & { menuItems?: (DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>)[] }
   )[]
+  focusOnExpanding?: boolean
 }

src/components/DsfrSideMenu/DsfrSideMenu.vue

@@ -18,6 +18,7 @@ withDefaults(defineProps<DsfrSideMenuProps>(), {
   menuItems: () => undefined,
   headingTitle: '',
   titleTag: 'h3',
+  focusOnExpanding: true,
 })
 
 defineEmits<{ (e: 'toggleExpand', payload: string): void }>()
@@ -64,7 +65,7 @@ watch(expanded, (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(expanded)"
+        @transitionend="onTransitionEnd(expanded, focusOnExpanding)"
       >
         <component
           :is="titleTag"

src/components/DsfrSideMenu/DsfrSideMenuList.vue

@@ -56,7 +56,7 @@ const linkProps = (to: string | RouteLocationRaw | undefined) => {
       'fr-collapsing': collapsing,
       'fr-collapse--expanded': cssExpanded,
     }"
-    @transitionend="onTransitionEnd(!!expanded)"
+    @transitionend="onTransitionEnd(!!expanded, focusOnExpanding)"
   >
     <ul
       class="fr-sidemenu__list"

src/composables/useCollapsable.ts

@@ -32,11 +32,11 @@ export const useCollapsable = () => {
     }
     if (newValue === true) {
       // unbound
-      // @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L33
+      // @see https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/collapse/collapse.js
       collapse.value.style.setProperty('--collapse-max-height', 'none')
     }
     // We need to wait for the next RAF to be sure the CSS variable will be set
-    // DSFR use RAF too https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/api/modules/render/renderer.js#L22
+    // DSFR use RAF too https://github.com/GouvernementFR/dsfr/blob/main/src/dsfr/core/script/api/modules/render/renderer.js#L22
     window.requestAnimationFrame(() => {
       collapsing.value = true
       adjust()
@@ -53,9 +53,9 @@ export const useCollapsable = () => {
    * @param {boolean} focusFirstAnchor
    * @return void
    */
-  const onTransitionEnd = (expanded: boolean, focusFirstAnchor: boolean = true): void => {
+  const onTransitionEnd = (expanded: boolean, autoFocus = true): void => {
     collapsing.value = false
-    if (focusFirstAnchor) {
+    if (autoFocus) {
       collapse.value?.querySelector('a')?.focus()
     }
     if (collapse.value && expanded === false) {