fix(ui5-toolbar): fix console warning in Toolbar (#11692)

* fix(ui5-toolbar): fix console warning in Toolbar

* fix(ui5-toolbar): fix console warning in Toolbar component

* fix(ui5-toolbar): fix console warning in Toolbar component

---------

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Author: Petya Markova

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(
+			<Toolbar>
+				<ToolbarButton text="Button 1" />
+				<ToolbarButton text="Button 2" />
+				<ToolbarButton text="Button 3" />
+				<ToolbarButton text="Button 4" />
+				<ToolbarButton text="Button 5" />
+			</Toolbar>
+		);
+
+		// 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", () => {

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,16 +217,16 @@ 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);
 	}
 
 	/**
 	 * Accessibility
 	 */
 
 	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() {