fix(ui5-segmented-button): hidden items do not take space (#12210)

Until now, when an `ui-segmented-button-item` was `hidden`, it still took place and `ui5-segmented-button` was wider than sum of widths of all visible items. Also, the `aria-setsize` and `aria-posinset` values didn't respect the count of the visible items.

This PR fixes these issues.

**JIRA: BGSOFUIBALKAN-9029, case 4**

Author: NHristov-sap

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

@@ -232,6 +232,52 @@ describe("SegmentedButton - getFocusDomRef", () => {
 	});
 });
 
+describe("SegmentedButtonItems appearance", () => {
+	it("should not render items with hidden property and set correct aria-posinset and aria-setsize", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem hidden>Second</SegmentedButtonItem>
+				<SegmentedButtonItem>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+
+		cy.get("[ui5-segmented-button]")
+			.as("segmentedButton");
+
+		cy.get("@segmentedButton")
+			.find("[ui5-segmented-button-item]:not([hidden])")
+			.as("visibleItems");
+
+		cy.get("@segmentedButton")
+			.find("[ui5-segmented-button-item][hidden]")
+			.as("hiddenItems");
+
+		// Only visible items should be counted by SegmentedButton
+		cy.get("@segmentedButton")
+			.invoke("attr", "style")
+			.should("satisfy", style => style.slice(-9) === "count: 2;");
+
+		// Assert aria-posinset and aria-setsize for visible items
+		cy.get("@visibleItems")
+			.shadow()
+			.find("li")
+			.each(($el, index, $list) => {
+				cy.wrap($el).should("have.attr", "aria-posinset", `${index + 1}`);
+				cy.wrap($el).should("have.attr", "aria-setsize", `${$list.length}`);
+			});
+
+		// Assert hidden item does not have aria-posinset and aria-setsize
+		cy.get("@hiddenItems")
+			.shadow()
+			.find("li")
+			.each(($el) => {
+				cy.wrap($el).should("not.have.attr", "aria-posinset");
+				cy.wrap($el).should("not.have.attr", "aria-setsize");
+			});
+	});
+});
+
 describe("SegmentedButton Accessibility", () => {
 	it("segmented button should have correct aria label when accessibleName is set", () => {
 		const LABEL = "Label";
@@ -408,4 +454,4 @@ describe("SebmentedButtonItem Accessibility", () => {
 			.find("li")
 			.should("have.attr", "aria-description", REF_DESCRIPTION);
 	});
-});
+});

packages/main/src/SegmentedButton.ts

@@ -161,15 +161,17 @@ class SegmentedButton extends UI5Element {
 
 	onBeforeRendering() {
 		const items = this.getSlottedNodes<SegmentedButtonItem>("items");
+		const visibleItems = items.filter(item => !item.hidden);
+		let index = 1;
 
-		items.forEach((item, index, arr) => {
-			item.posInSet = index + 1;
-			item.sizeOfSet = arr.length;
+		items.forEach(item => {
+			item.posInSet = item.hidden ? undefined : index++;
+			item.sizeOfSet = item.hidden ? undefined : visibleItems.length;
 		});
 
 		this.normalizeSelection();
 
-		this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${items.length}`);
+		this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${visibleItems.length}`);
 	}
 
 	normalizeSelection() {

packages/main/src/SegmentedButtonItem.ts

@@ -152,15 +152,21 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 	 * @private
 	 */
 	@property({ type: Number })
-	posInSet = 0;
+	posInSet? = 0;
 
 	/**
 	 * Defines how many items are inside of the SegmentedButton.
 	 * @default 0
 	 * @private
 	 */
 	@property({ type: Number })
-	sizeOfSet = 0;
+	sizeOfSet? = 0;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	hidden = false;
 
 	/**
 	 * Defines the text of the component.