From 0c165380eb6d830299fc22d9663b57cee068d6ca Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Mon, 9 Jun 2025 09:51:14 +0300 Subject: [PATCH 1/3] fix(ui5-toolbar): fix console warning in Toolbar --- packages/main/src/Toolbar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 69c17625a085..7ea40bb76d83 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -388,6 +388,7 @@ class Toolbar extends UI5Element { let index = 0; let currentItem = movableItems[index]; + this.overflowButtonDOM?.blur(); this.itemsToOverflow = []; // distribute items that always overflow From 6a173eeabc48c88e532810112f920673f100a62d Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 11 Jul 2025 15:18:28 +0300 Subject: [PATCH 2/3] fix(ui5-toolbar): fix console warning in Toolbar component --- packages/main/cypress/specs/Toolbar.cy.tsx | 34 ++++++++++++++++++++++ packages/main/src/Toolbar.ts | 11 ++++--- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 350b98e245f6..abd294749903 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -285,6 +285,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 7ea40bb76d83..b9271010d504 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,9 @@ class Toolbar extends UI5Element { onBeforeRendering() { this.detachListeners(); this.attachListeners(); + if (getActiveElement() === this.overflowButtonDOM?.getFocusDomRef() && this.hideOverflowButton) { + this.interactiveItems.filter(item => !item.isOverflowed).at(-1)?.focus(); + } } async onAfterRendering() { @@ -388,7 +392,6 @@ class Toolbar extends UI5Element { let index = 0; let currentItem = movableItems[index]; - this.overflowButtonDOM?.blur(); this.itemsToOverflow = []; // distribute items that always overflow From 04cef65c6f53fceacbf2993f6b8921a5fff1de72 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 25 Jul 2025 16:00:21 +0300 Subject: [PATCH 3/3] fix(ui5-toolbar): fix console warning in Toolbar component --- packages/main/src/Toolbar.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 56ccd6e7e1da..12a26824d191 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -290,7 +290,8 @@ class Toolbar extends UI5Element { this.detachListeners(); this.attachListeners(); if (getActiveElement() === this.overflowButtonDOM?.getFocusDomRef() && this.hideOverflowButton) { - this.interactiveItems.filter(item => !item.isOverflowed).at(-1)?.focus(); + const lastItem = this.interactiveItems.at(-1); + lastItem?.focus(); } }