From e1c7466c713009124c37723bd63c21f92ec28f71 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Mon, 27 Jul 2026 17:35:17 +0200 Subject: [PATCH 1/2] fix: Do not open side navigation from close button --- .../__tests__/navigation-collapsed.test.tsx | 37 +++++++++++++++++++ .../navigation/index.tsx | 2 +- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/app-layout/__tests__/navigation-collapsed.test.tsx b/src/app-layout/__tests__/navigation-collapsed.test.tsx index 45729689ee..62497220ba 100644 --- a/src/app-layout/__tests__/navigation-collapsed.test.tsx +++ b/src/app-layout/__tests__/navigation-collapsed.test.tsx @@ -52,6 +52,43 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => const closeButton = wrapper.findNavigationClose().getElement(); expect(closeButton.querySelector(`.${iconStyles['name-angle-left']}`)).not.toBeNull(); }); + + test('close button opens navigation when collapsed (navigationCloseBehavior="collapse")', () => { + const onNavigationChange = jest.fn(); + const { wrapper } = renderComponent( + Nav content} + /> + ); + wrapper.findNavigationClose().click(); + expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: true } })); + }); + + test('close button closes navigation when open (navigationCloseBehavior="collapse")', () => { + const onNavigationChange = jest.fn(); + const { wrapper } = renderComponent( + Nav content} + /> + ); + wrapper.findNavigationClose().click(); + expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: false } })); + }); + + test('close button does not open non-collapsible navigation when already closed', () => { + const onNavigationChange = jest.fn(); + const { wrapper } = renderComponent( + Nav content} /> + ); + wrapper.findNavigationClose().click(); + expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: false } })); + }); }); describe('aria-expanded', () => { diff --git a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx index 759387fc12..3150d0a41b 100644 --- a/src/app-layout/visual-refresh-toolbar/navigation/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/navigation/index.tsx @@ -91,7 +91,7 @@ export function AppLayoutNavigationImplementation({ } ariaExpanded={navigationCollapsible && !isMobile ? navigationOpen : undefined} iconName={navigationCollapsed ? 'angle-right' : isMobile ? 'close' : 'angle-left'} - onClick={() => onNavigationToggle(!navigationOpen)} + onClick={() => onNavigationToggle(navigationCollapsible ? !navigationOpen : false)} variant="icon" formAction="none" className={testutilStyles['navigation-close']} From 42faea8a11312e348b8e980eff077ef785ea0ce3 Mon Sep 17 00:00:00 2001 From: Joan Perals Tresserra Date: Mon, 27 Jul 2026 17:48:13 +0200 Subject: [PATCH 2/2] Refactor tests --- .../__tests__/app-layout-navigation.test.tsx | 9 +++++ .../__tests__/navigation-collapsed.test.tsx | 36 +++---------------- 2 files changed, 14 insertions(+), 31 deletions(-) diff --git a/src/app-layout/__tests__/app-layout-navigation.test.tsx b/src/app-layout/__tests__/app-layout-navigation.test.tsx index 470d5c2880..cbba909c0f 100644 --- a/src/app-layout/__tests__/app-layout-navigation.test.tsx +++ b/src/app-layout/__tests__/app-layout-navigation.test.tsx @@ -63,6 +63,15 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => expect(wrapper.findOpenNavigationPanel()).toBeTruthy(); }); + test('close button does not open navigation when already closed', () => { + const { wrapper } = renderComponent(Mock Navigation} />); + expect(wrapper.findOpenNavigationPanel()).toBeTruthy(); + wrapper.findNavigationToggle().click(); + expect(wrapper.findOpenNavigationPanel()).toBeFalsy(); + wrapper.findNavigationClose().click(); + expect(wrapper.findOpenNavigationPanel()).toBeFalsy(); + }); + test(`Sets aria-expanded=false on toggle when navigation is closed`, () => { const { wrapper } = renderComponent( Mock Navigation} navigationOpen={false} content={<>Content} /> diff --git a/src/app-layout/__tests__/navigation-collapsed.test.tsx b/src/app-layout/__tests__/navigation-collapsed.test.tsx index 62497220ba..077278d37e 100644 --- a/src/app-layout/__tests__/navigation-collapsed.test.tsx +++ b/src/app-layout/__tests__/navigation-collapsed.test.tsx @@ -53,41 +53,15 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => expect(closeButton.querySelector(`.${iconStyles['name-angle-left']}`)).not.toBeNull(); }); - test('close button opens navigation when collapsed (navigationCloseBehavior="collapse")', () => { - const onNavigationChange = jest.fn(); + test('close button toggles navigation open and closed when collapsible', () => { const { wrapper } = renderComponent( - Nav content} - /> - ); - wrapper.findNavigationClose().click(); - expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: true } })); - }); - - test('close button closes navigation when open (navigationCloseBehavior="collapse")', () => { - const onNavigationChange = jest.fn(); - const { wrapper } = renderComponent( - Nav content} - /> + Nav content} /> ); + expect(wrapper.findOpenNavigationPanel()).toBeTruthy(); wrapper.findNavigationClose().click(); - expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: false } })); - }); - - test('close button does not open non-collapsible navigation when already closed', () => { - const onNavigationChange = jest.fn(); - const { wrapper } = renderComponent( - Nav content} /> - ); + expect(wrapper.findOpenNavigationPanel()).toBeFalsy(); wrapper.findNavigationClose().click(); - expect(onNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: false } })); + expect(wrapper.findOpenNavigationPanel()).toBeTruthy(); }); });