fix(ui5-segmented-button-item): prevent focus of disabled items (#9239)

fixes: #9236
SAP · Jun 21, 2024 · ca0509a · ca0509a
1 parent e7215e7
commit ca0509a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 5 deletions.
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
@@ -123,7 +123,7 @@ class SegmentedButton extends UI5Element {
 		super();
 
 		this._itemNavigation = new ItemNavigation(this, {
-			getItemsCallback: () => this.getSlottedNodes<SegmentedButtonItem>("items"),
+			getItemsCallback: () => this.navigatableItems,
 		});
 		this.hasPreviouslyFocusedItem = false;
 	}
@@ -251,6 +251,12 @@ class SegmentedButton extends UI5Element {
 		return this.items.filter(item => item.selected);
 	}
 
+	get navigatableItems() {
+		return this.getSlottedNodes<SegmentedButtonItem>("items").filter(item => {
+			return !item.disabled;
+		});
+	}
+
 	get ariaDescribedBy() {
 		return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY);
 	}

diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
@@ -163,7 +163,12 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 		super();
 	}
 
-	_onclick() {
+	_onclick(e: MouseEvent) {
+		if (this.disabled) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+
 		this.selected = !this.selected;
 	}
 
@@ -184,6 +189,10 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 	}
 
 	get tabIndexValue() {
+		if (this.disabled) {
+			return;
+		}
+
 		const tabindex = this.getAttribute("tabindex");
 
 		if (tabindex) {

diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
@@ -102,7 +102,8 @@
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
-:host([disabled]:active) {
+
+:host([disabled]) {
 	pointer-events: none;
 }
 

diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
@@ -157,8 +157,8 @@ <h3>Initial focus test</h3>
 		<ui5-button id="button1">Press</ui5-button>
 		<ui5-segmented-button id="testSB1">
 			<ui5-segmented-button-item id="testSB1ToggleBtn" icon="employee"></ui5-segmented-button-item>
-			<ui5-segmented-button-item icon="menu"></ui5-segmented-button-item>
-			<ui5-segmented-button-item icon="accept"></ui5-segmented-button-item>
+			<ui5-segmented-button-item disabled icon="menu"></ui5-segmented-button-item>
+			<ui5-segmented-button-item disabled icon="accept"></ui5-segmented-button-item>
 		</ui5-segmented-button>
 		<ui5-button id="button2">Press</ui5-button>
 		<ui5-segmented-button id="testSB2">

diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js
@@ -77,6 +77,18 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(await segmentedButtonItem2.matches(":focus"), "The selected SegmentedButtonItem should be focused.");
 	});
 
+	it("tests disabled focus", async () => {
+		const button1 =  await browser.$("#button1");
+		const segmentedButtonItem1 =  await browser.$("#testSB1ToggleBtn");
+
+		await button1.click();
+		await button1.keys("Tab");
+		assert.ok(await segmentedButtonItem1.matches(":focus"), "The first SegmentedButtonItem should be focused.");
+
+		await segmentedButtonItem1.keys("ArrowRight");
+		assert.ok(await segmentedButtonItem1.matches(":focus"), "The focus did not move to second item");
+	});
+
 	it("tests programatical item pressing", async () => {
 		const button1 =  await browser.$("#progSetButton1");
 		const button2 =  await browser.$("#progSetButton2");