Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions packages/main/cypress/specs/Toolbar.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
11 changes: 8 additions & 3 deletions packages/main/src/Toolbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
Loading