diff --git a/packages/fiori/cypress/specs/MediaGallery.cy.tsx b/packages/fiori/cypress/specs/MediaGallery.cy.tsx new file mode 100644 index 000000000000..a0054d5b24ad --- /dev/null +++ b/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(); + + cy.get("[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( + + + + + + + + + + + ); + + cy.get("[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( + + + + + + + + + + + ); + + cy.get("#item2").click(); + cy.get("#item2").should("be.focused"); + + cy.get("[ui5-media-gallery], #item2") + .then(($el) => { + const mg = $el[0]; + const item = $el[1]; + + expect(mg.getFocusDomRef()).to.equal(item.getFocusDomRef()); + }); + }); +}); \ No newline at end of file diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index c6fc30846aa8..33fda32f95bb 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/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; diff --git a/packages/main/cypress/specs/Breadcrumbs.cy.tsx b/packages/main/cypress/specs/Breadcrumbs.cy.tsx index 86543355ce6d..49e1c424a498 100644 --- a/packages/main/cypress/specs/Breadcrumbs.cy.tsx +++ b/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 }); -}); \ No newline at end of file +}); + +describe("Breadcrumbs - getFocusDomRef Method", () => { + it("should return undefined when the Breadcrumbs is empty", () => { + cy.mount(); + + cy.get("[ui5-breadcrumbs]") + .then(($el) => { + expect($el[0].getFocusDomRef()).to.be.undefined; + }); + }); + + it("should return first item if no item was focused before", () => { + cy.mount( + + Link1 + Link2 + + ); + + cy.get("[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( + + Link1 + Link2 + Link1 + Link1 + + ); + + cy.get("#breadcrumbs") + .shadow() + .find("ui5-link") + .eq(1) + .as("second"); + + cy.get("@second").click(); + + cy.get("[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); + }); + }); +}); diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index 79ba6a860f33..bd23b8976380 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/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