diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index b1b0fc53af68..942bc322b62c 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -287,6 +287,40 @@ describe("Toolbar general interaction", () => { cy.get("@popover") .should("have.prop", "open", false); }); + + it("Should focus on the last interactive element outside the overflow popover when overflow button disappears", () => { + // Mount the Toolbar with multiple buttons + cy.mount( + + + + + + + + ); + + // Set initial viewport size to ensure the overflow button is visible + cy.viewport(300, 1080); + + // Focus on the overflow button + cy.get("ui5-toolbar") + .shadow() + .find(".ui5-tb-overflow-btn") + .click() + .click() + .should("be.focused"); + + // Resize the viewport to make the overflow button disappear + cy.viewport(800, 1080); + + // Verify the focus shifts to the last interactive element outside the overflow popover + cy.get("ui5-toolbar") + .shadow() + .find(".ui5-tb-item") + .eq(3) + .should("be.focused"); + }); }); describe("Accessibility", () => { diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 62e9246c5f08..12a26824d191 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -34,6 +34,7 @@ import type ToolbarSeparator from "./ToolbarSeparator.js"; import type Button from "./Button.js"; import type Popover from "./Popover.js"; +import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; type ToolbarMinWidthChangeEventDetail = { minWidth: number, @@ -216,8 +217,8 @@ class Toolbar extends UI5Element { return this.itemsToOverflow.filter(item => !(item.ignoreSpace || item.isSeparator)).length === 0; } - get interactiveItemsCount() { - return this.items.filter((item: ToolbarItem) => item.isInteractive).length; + get interactiveItems() { + return this.items.filter((item: ToolbarItem) => item.isInteractive); } /** @@ -225,7 +226,7 @@ class Toolbar extends UI5Element { */ get hasAriaSemantics() { - return this.interactiveItemsCount > 1; + return this.interactiveItems.length > 1; } get accessibleRole() { @@ -288,6 +289,10 @@ class Toolbar extends UI5Element { onBeforeRendering() { this.detachListeners(); this.attachListeners(); + if (getActiveElement() === this.overflowButtonDOM?.getFocusDomRef() && this.hideOverflowButton) { + const lastItem = this.interactiveItems.at(-1); + lastItem?.focus(); + } } async onAfterRendering() {