fix(ui5-breadcrumbs): show all items in popover on mobile (#11138)

The changes improve the mobile user experience by ensuring all
navigation items are accessible from the dropdown menu when on mobile
devices.

Fixes: #9697

Author: kgogov

packages/main/cypress/specs/Breadcrumbs.mobile.cy.tsx

@@ -0,0 +1,53 @@
+import Breadcrumbs from "../../src/Breadcrumbs.js";
+import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
+
+describe("Breadcrumbs mobile behavior", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("displays all items in the popover on mobile", () => {
+        const breadcrumbItems = [
+            "Products",
+            "Categories",
+            "Laptops",
+            "Gaming Laptops",
+            "XPS Pro"
+        ];
+
+        cy.mount(
+            <Breadcrumbs>
+                {breadcrumbItems.map((item, index) => (
+                    <BreadcrumbsItem key={index} href={`#${item}`}>{item}</BreadcrumbsItem>
+                ))}
+            </Breadcrumbs>
+        );
+
+        // Open the overflow popover by clicking on the dropdown arrow within shadow DOM
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link")
+            .click();
+
+        // Wait for the popover to be fully open
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover")
+            .shadow()
+            .find("ui5-dialog")
+            .should("be.visible");
+
+        // Verify that all items are displayed in the popover
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .should("have.length", breadcrumbItems.length);
+
+        // Verify the items are in the correct order (reversed)
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .eq(0)
+            .should("contain.text", breadcrumbItems[breadcrumbItems.length - 1]);
+    });
+});

packages/main/src/Breadcrumbs.ts

@@ -554,6 +554,16 @@ class Breadcrumbs extends UI5Element {
 			.reverse();
 	}
 
+	/**
+	 * Returns all items that should be displayed in the popover on mobile devices
+	 * @private
+	 */
+	get _mobilePopoverItems() {
+		return this._getItems()
+			.filter(item => this._isItemVisible(item))
+			.reverse();
+	}
+
 	/**
 	 * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
 	 */

packages/main/src/BreadcrumbsPopoverTemplate.tsx

@@ -1,10 +1,15 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type Breadcrumbs from "./Breadcrumbs.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import ListItemStandard from "./ListItemStandard.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 
 export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+	const itemsToDisplay = isPhone()
+		? this._mobilePopoverItems
+		: this._overflowItemsData;
+
 	return (
 		<ResponsivePopover
 			class="ui5-breadcrumbs-popover"
@@ -21,7 +26,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
 				separators="None"
 				onSelectionChange={this._onOverflowListItemSelect}
 			>
-				{this._overflowItemsData.map(item =>
+				{itemsToDisplay.map(item =>
 					<ListItemStandard
 						id={`${item._id}-li`}
 						accessibleName={item.accessibleName}