diff --git a/src/components/DsfrAccordion/DsfrAccordion.vue b/src/components/DsfrAccordion/DsfrAccordion.vue index 82214826..c4203d10 100644 --- a/src/components/DsfrAccordion/DsfrAccordion.vue +++ b/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) diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.types.ts b/src/components/DsfrSideMenu/DsfrSideMenu.types.ts index 30e33764..86f6b704 100644 --- a/src/components/DsfrSideMenu/DsfrSideMenu.types.ts +++ b/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 & { menuItems?: (DsfrSideMenuListItemProps & Partial)[] } )[] + focusOnExpanding?: boolean } diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.vue b/src/components/DsfrSideMenu/DsfrSideMenu.vue index 5d72d83c..069e57e6 100644 --- a/src/components/DsfrSideMenu/DsfrSideMenu.vue +++ b/src/components/DsfrSideMenu/DsfrSideMenu.vue @@ -18,6 +18,7 @@ withDefaults(defineProps(), { 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)" > { 'fr-collapsing': collapsing, 'fr-collapse--expanded': cssExpanded, }" - @transitionend="onTransitionEnd(!!expanded)" + @transitionend="onTransitionEnd(!!expanded, focusOnExpanding)" >
    { } 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) {