feat(ui5-breadcrumbs, ui5-meadia-gallery): getFocusDomRef added (#11869)

Fixes #11483

Author: yanaminkova

packages/fiori/cypress/specs/MediaGallery.cy.tsx

@@ -0,0 +1,62 @@
+import MediaGallery from "../../src/MediaGallery.js";
+import MediaGalleryItem from "../../src/MediaGalleryItem.js";
+import type UI5Element from "@ui5/webcomponents-base";
+
+describe("MediaGallery - getFocusDomRef Method", () => {
+	it("should return undefined when the MediaGallery is empty", () => {
+		cy.mount(<MediaGallery></MediaGallery>);
+
+		cy.get<MediaGallery>("[ui5-media-gallery]")
+			.then(($el) => {
+				expect($el[0].getFocusDomRef()).to.be.undefined;
+			});
+	});
+
+	it("should return first item if no item was focused before", () => {
+		cy.mount(
+			<MediaGallery showAllThumbnails>
+				<MediaGalleryItem id="item1">
+				<img src="./img/HT-1000.jpg"/>
+				<img src="./img/HT-1000.jpg" slot="thumbnail"/>
+				</MediaGalleryItem>
+				<MediaGalleryItem id="item2">
+				<img src="./img/HT-1000.jpg"/>
+				<img src="./img/HT-1000.jpg" slot="thumbnail"/>
+				</MediaGalleryItem>
+			</MediaGallery>
+		);
+
+		cy.get<UI5Element>("[ui5-media-gallery], #item1")
+		.then(($el) => {
+			const mg = $el[0];
+			const item = $el[1];
+			expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef());
+		});
+	});
+
+	it("should return last focused item in the MediaGallery", () => {
+		cy.mount(
+			<MediaGallery>
+				<MediaGalleryItem id="item1">
+					 <img src="./img/HT-1000.jpg"/>
+					 <img src="./img/HT-1000.jpg" slot="thumbnail"/>
+				</MediaGalleryItem>
+				<MediaGalleryItem id="item2">
+					 <img src="./img/HT-1000.jpg"/>
+					 <img src="./img/HT-1000.jpg" slot="thumbnail"/>
+				</MediaGalleryItem>
+			</MediaGallery>
+		);
+
+		cy.get("#item2").click();
+		cy.get("#item2").should("be.focused");
+
+		cy.get<UI5Element>("[ui5-media-gallery], #item2")
+			.then(($el) => {
+				const mg = $el[0];
+				const item = $el[1];
+
+				expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef());
+		});
+	});
+});

packages/fiori/src/MediaGallery.ts

@@ -377,6 +377,10 @@ class MediaGallery extends UI5Element {
 		return items;
 	}
 
+	getFocusDomRef() {
+		return this._itemNavigation._getCurrentItem();
+	}
+
 	_selectItem(item: IMediaGalleryItem, userInteraction = false) {
 		if (item === this._selectedItem) {
 			return;

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

@@ -1,6 +1,7 @@
 import Breadcrumbs from "../../src/Breadcrumbs.js";
 import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import type UI5Element from "@ui5/webcomponents-base";
 
 describe("breadcrumbs navigation", () => {
 
@@ -32,4 +33,65 @@ describe("breadcrumbs navigation", () => {
         })
         .should("equal", 0); // index is back to 0 after arrow up
     });
-});
+});
+
+describe("Breadcrumbs - getFocusDomRef Method", () => {
+	it("should return undefined when the Breadcrumbs is empty", () => {
+		cy.mount(<Breadcrumbs design="NoCurrentPage"></Breadcrumbs>);
+
+		cy.get<Breadcrumbs>("[ui5-breadcrumbs]")
+			.then(($el) => {
+				expect($el[0].getFocusDomRef()).to.be.undefined;
+			});
+	});
+
+	it("should return first item if no item was focused before", () => {
+		cy.mount(
+            <Breadcrumbs>
+                <BreadcrumbsItem id="first">Link1</BreadcrumbsItem>
+                <BreadcrumbsItem>Link2</BreadcrumbsItem>
+            </Breadcrumbs>
+		);
+
+		cy.get<UI5Element>("[ui5-breadcrumbs], #first")
+		.then(($el) => {
+			const breadcrumbs = $el[0];
+			const item = $el[1];
+
+			const breadcrumbsAnchor = breadcrumbs.getFocusDomRef();
+			const itemAnchor = item.getFocusDomRef().shadowRoot.querySelector("a");
+
+			expect(breadcrumbsAnchor.textContent).to.equal(itemAnchor.textContent);
+		});
+	});
+
+	it("should return last focused item in the Breadcrumbs", () => {
+		cy.mount(
+            <Breadcrumbs id="breadcrumbs">
+                <BreadcrumbsItem>Link1</BreadcrumbsItem>
+                <BreadcrumbsItem id="second">Link2</BreadcrumbsItem>
+                <BreadcrumbsItem>Link1</BreadcrumbsItem>
+                <BreadcrumbsItem>Link1</BreadcrumbsItem>
+            </Breadcrumbs>
+		);
+
+		cy.get("#breadcrumbs")
+			.shadow()
+			.find("ui5-link")
+			.eq(1)
+			.as("second");
+
+		cy.get("@second").click();
+
+		cy.get<UI5Element>("[ui5-breadcrumbs], #second")
+		.then(($el) => {
+			const breadcrumbs = $el[0];
+			const item = $el[1];
+
+			const breadcrumbsAnchor = breadcrumbs.getFocusDomRef();
+			const itemAnchor = item.getFocusDomRef().shadowRoot.querySelector("a");
+
+			expect(breadcrumbsAnchor.textContent).to.equal(itemAnchor.textContent);
+		});
+	});
+});

packages/main/src/Breadcrumbs.ts

@@ -249,6 +249,10 @@ class Breadcrumbs extends UI5Element {
 		return items;
 	}
 
+	getFocusDomRef() {
+		return this._itemNavigation._getCurrentItem();
+	}
+
 	/**
 	 * Returns the translatable accessible name for the popover
 	 * @private