diff --git a/packages/fiori/cypress/specs/ProductSwitch.cy.tsx b/packages/fiori/cypress/specs/ProductSwitch.cy.tsx new file mode 100644 index 000000000000..16f1a40e1fab --- /dev/null +++ b/packages/fiori/cypress/specs/ProductSwitch.cy.tsx @@ -0,0 +1,51 @@ +import ProductSwitch from "../../src/ProductSwitch.js"; +import ProductSwitchItem from "../../src/ProductSwitchItem.js"; +import type UI5Element from "@ui5/webcomponents-base"; + +describe("List - getFocusDomRef Method", () => { + it("should return undefined when the ProductSwitch is empty", () => { + cy.mount(); + + cy.get("[ui5-product-switch]") + .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-product-switch], #psi1") + .then(($el) => { + const ps = $el[0]; + const psItem = $el[1]; + + expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef()); + }); + }); + + it("should return last focused item in the ProductSwitch", () => { + cy.mount( + + + + + ); + + cy.get("#psi2").click(); + cy.get("#psi2").should("be.focused"); + + cy.get("[ui5-product-switch], #psi2") + .then(($el) => { + const ps = $el[0]; + const psItem = $el[1]; + + expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef()); + }); + }); +}); \ No newline at end of file diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index 6ac3461b0789..4f3583fdd5a3 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -177,6 +177,10 @@ class ProductSwitch extends UI5Element { e.stopPropagation(); } } + + getFocusDomRef() { + return this._itemNavigation._getCurrentItem(); + } } ProductSwitch.define(); diff --git a/packages/main/cypress/specs/AvatarGroup.cy.tsx b/packages/main/cypress/specs/AvatarGroup.cy.tsx index 0919ff327bdf..696b5dd19a6f 100644 --- a/packages/main/cypress/specs/AvatarGroup.cy.tsx +++ b/packages/main/cypress/specs/AvatarGroup.cy.tsx @@ -1,5 +1,6 @@ import Avatar from "../../src/Avatar.js"; import AvatarGroup from "../../src/AvatarGroup.js"; +import type UI5Element from "@ui5/webcomponents-base"; describe("Overflow", () => { it("checks if overflow button is hiding properly", () => { @@ -68,7 +69,7 @@ describe("Avatars", () => { describe("Accessibility", () => { it("checks if accessibleName is properly set and applied as aria-label", () => { const customLabel = "Development Team Members"; - + cy.mount( @@ -91,7 +92,7 @@ describe("Accessibility", () => { it("checks if accessibleNameRef is properly set and applied as aria-label", () => { const labelId = "team-header"; - + cy.mount( <>

Quality Assurance Team

@@ -102,24 +103,72 @@ describe("Accessibility", () => {
); - + cy.get("#ag") .should("have.attr", "accessible-name-ref", labelId) .then(($el) => { const avatarGroup = $el.get(0) as AvatarGroup; expect(avatarGroup.accessibleNameRef).to.equal(labelId); }); - + cy.get("#ag") .shadow() .find(".ui5-avatar-group-items") .should("have.attr", "aria-label", "Quality Assurance Team"); - + cy.get("#ag") .shadow() .find(".ui5-avatar-group-items") .should("not.have.attr", "aria-labelledby"); - + cy.get(`#${labelId}`).should("exist"); }); + + describe("AvatarGroup - getFocusDomRef Method", () => { + it("should return undefined when the AvatarGroup is empty", () => { + cy.mount(); + + cy.get("[ui5-avatar-group]") + .then(($el) => { + expect($el[0].getFocusDomRef()).to.be.undefined; + }); + }); + + it("should return first avatar if no item was focused before", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-avatar-group], #av1") + .then(($el) => { + const avGroup = $el[0]; + const avatar = $el[1]; + + expect(avGroup.getFocusDomRef()).to.equal(avatar.getFocusDomRef()); + }); + }); + + it("should return last focused avatar in the AvatarGroup", () => { + cy.mount( + + + + + ); + + cy.get("#av2").click(); + cy.get("#av2").should("be.focused"); + + cy.get("[ui5-avatar-group], #av2") + .then(($el) => { + const avGroup = $el[0]; + const avatar = $el[1]; + + expect(avGroup.getFocusDomRef()).to.equal(avatar.getFocusDomRef()); + }); + }); +}); }); \ No newline at end of file diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 24a9cc2aeba8..896a51114e25 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -499,6 +499,10 @@ class AvatarGroup extends UI5Element { this._itemNavigation.setCurrentItem(e.target as IAvatarGroupItem); } + getFocusDomRef() { + return this._itemNavigation._getCurrentItem(); + } + /** * Returns the total width to item excluding the item width * RTL/LTR aware