feat(ui5-avatar-group, ui5-product-switch): getFocusDomRef added

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(<ProductSwitch></ProductSwitch>);
+
+		cy.get<ProductSwitch>("[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(
+		<ProductSwitch>
+			<ProductSwitchItem id="psi1" titleText="Item 1"></ProductSwitchItem>
+			<ProductSwitchItem titleText="Item 2"></ProductSwitchItem>
+		</ProductSwitch>
+		);
+
+		cy.get<UI5Element>("[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(
+		<ProductSwitch>
+			<ProductSwitchItem titleText="Item 1"></ProductSwitchItem>
+			<ProductSwitchItem id="psi2" titleText="Item 2"></ProductSwitchItem>
+		</ProductSwitch>
+		);
+
+		cy.get("#psi2").click();
+		cy.get("#psi2").should("be.focused");
+
+		cy.get<UI5Element>("[ui5-product-switch], #psi2")
+			.then(($el) => {
+				const ps = $el[0];
+				const psItem = $el[1];
+
+				expect(ps.getFocusDomRef()).to.equal(psItem.getFocusDomRef());
+			});
+	});
+});

packages/fiori/src/ProductSwitch.ts

@@ -177,6 +177,10 @@ class ProductSwitch extends UI5Element {
 			e.stopPropagation();
 		}
 	}
+
+	getFocusDomRef() {
+		return this._itemNavigation._getCurrentItem();
+	}
 }
 
 ProductSwitch.define();

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(<AvatarGroup id="ag" accessible-name={customLabel}>
 			<Avatar initials="JD"></Avatar>
 			<Avatar initials="SM"></Avatar>
@@ -91,7 +92,7 @@ describe("Accessibility", () => {
 
 	it("checks if accessibleNameRef is properly set and applied as aria-label", () => {
 		const labelId = "team-header";
-		
+
 		cy.mount(
 			<>
 				<h3 id={labelId}>Quality Assurance Team</h3>
@@ -102,24 +103,72 @@ describe("Accessibility", () => {
 				</AvatarGroup>
 			</>
 		);
-	
+
 		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(<AvatarGroup></AvatarGroup>);
+
+		cy.get<AvatarGroup>("[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(
+			<AvatarGroup type="Individual">
+				<Avatar id="av1" initials="II"></Avatar>
+				<Avatar initials="II"></Avatar>
+			</AvatarGroup>
+		);
+
+		cy.get<UI5Element>("[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(
+			<AvatarGroup type="Individual">
+				<Avatar initials="II"></Avatar>
+				<Avatar id="av2" initials="II"></Avatar>
+			</AvatarGroup>
+		);
+
+		cy.get("#av2").click();
+		cy.get("#av2").should("be.focused");
+
+		cy.get<UI5Element>("[ui5-avatar-group], #av2")
+			.then(($el) => {
+				const avGroup = $el[0];
+				const avatar = $el[1];
+
+				expect(avGroup.getFocusDomRef()).to.equal(avatar.getFocusDomRef());
+			});
+	});
+});
 });

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