diff --git a/src/gui/src/UI/Dashboard/AppBrowser.browser.test.js b/src/gui/src/UI/Dashboard/AppBrowser.browser.test.js index f80afcde5..5660ec3b7 100644 --- a/src/gui/src/UI/Dashboard/AppBrowser.browser.test.js +++ b/src/gui/src/UI/Dashboard/AppBrowser.browser.test.js @@ -267,6 +267,22 @@ describe('embedded toolbar', () => { } finally { await context.close(); } }); + it('leaves focus on the host page that closed the menu, and returns it to the toggle on Escape', async () => { + const { context, page, toolbar } = await openToolbar(); + try { + await toolbar.getByRole('button', { name: 'Account', exact: true }).click(); + await toolbar.locator('.toolbar-panel').waitFor(); + await page.locator('#outside').click(); + await toolbar.locator('.toolbar-panel').waitFor({ state: 'detached' }); + await page.waitForTimeout(100); + expect(await page.evaluate(() => document.activeElement.id)).toBe('outside'); + await toolbar.getByRole('button', { name: 'Account', exact: true }).click(); + await toolbar.locator('.toolbar-close').press('Escape'); + await toolbar.locator('.toolbar-panel').waitFor({ state: 'detached' }); + expect(await toolbar.locator('body').evaluate(() => document.activeElement.dataset.panel)).toBe('account'); + } finally { await context.close(); } + }); + it('labels controls with translated text encoded once', async () => { const { context, toolbar } = await openToolbar(undefined, sessionToken, [{ name: 'user_preferences', value: '{"language":"de"}' }]); try { diff --git a/src/gui/src/toolbarEmbed.js b/src/gui/src/toolbarEmbed.js index 8d80c7459..3dff7ad95 100644 --- a/src/gui/src/toolbarEmbed.js +++ b/src/gui/src/toolbarEmbed.js @@ -50,7 +50,8 @@ function closePanel () { panel = null; $root.find('.toolbar-panel').remove(); $root.find('[aria-expanded]').attr('aria-expanded', 'false'); - if ( previous ) $root.find(`[data-panel="${previous}"]`)[0]?.focus({ preventScroll: true }); + // A close the host started by focusing its own page must not pull focus back. + if ( previous && document.hasFocus() ) $root.find(`[data-panel="${previous}"]`)[0]?.focus({ preventScroll: true }); notify('panel', { panel }); }