fix(ui5-checkbox): ensure consistent focus behavior (#10639)

Ensure focus is applied consistently around the checkbox container and respective text, aligning behavior with other components.
SAP · Feb 13, 2025 · a73c8d8 · a73c8d8
1 parent 13d068b
commit a73c8d8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
@@ -115,7 +115,7 @@
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	width: 100%;
+	max-width: 100%;
 	min-height: var(--_ui5_checkbox_width_height);
 	min-width: var(--_ui5_checkbox_width_height);
 	padding: 0 var(--_ui5_checkbox_wrapper_padding);

diff --git a/packages/main/test/pages/CheckBox.html b/packages/main/test/pages/CheckBox.html
@@ -82,6 +82,17 @@
 		<input type="hidden" id="cbFormSubmitted" value="false" />
 	</form>
 
+	<br />
+	<div style="width: 300px; border: 1px solid black; padding: 1rem;">
+		<ui5-checkbox style="width: 100%; border: 1px solid red;"></ui5-checkbox>
+		<ui5-radio-button style="width: 100%; border: 1px solid red;"></ui5-radio-button>
+		<ui5-switch style="width: 100%; border: 1px solid red;"></ui5-switch>
+		<hr />
+		<ui5-checkbox style="width: 100%; border: 1px solid red;" text="Some text"></ui5-checkbox>
+		<ui5-radio-button style="width: 100%; border: 1px solid red;" text="Some text"></ui5-radio-button>
+		<ui5-switch style="width: 100%; border: 1px solid red;"></ui5-switch>
+	</div>
+
 	<script>
 		var hcb = false;
 		var cbForm = document.querySelector("#cbForm");

diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js
@@ -315,34 +315,36 @@ describe("Items selection", () => {
 	});
 
 	it("should select all items when clicking select all", async () => {
-		const cb = await $("#mcb-select-all-vs");
+		const cb = await browser.$("#mcb-select-all-vs");
 		const popover = await cb.shadow$("ui5-responsive-popover");
-		const spanRef = await $("#select-all-event");
+		const selectAllCheckbox = await popover.$(".ui5-mcb-select-all-checkbox");
+		const selectAllCheckboxRoot = await selectAllCheckbox.shadow$(".ui5-checkbox-root");
+		const spanRef = await browser.$("#select-all-event");
 
 		await cb.click();
-
-		await popover.$(".ui5-mcb-select-all-checkbox").click();
+		await selectAllCheckboxRoot.click();
 		// ok button
 		await popover.$(".ui5-responsive-popover-footer").$("ui5-button").click();
 		assert.strictEqual(await spanRef.getText(), "Selected items count: 27");
 
 		await cb.click();
-		await popover.$(".ui5-mcb-select-all-checkbox").click();
+		await selectAllCheckboxRoot.click();
 		// ok button
 		await popover.$(".ui5-responsive-popover-footer").$("ui5-button").click();
 		assert.strictEqual(await spanRef.getText(), "Selected items count: 0");
 	});
 
 
 	it("select all should not be checked if all items are not selected", async () => {
-		const mcb = await $("#mcb-select-all-vs");
+		const mcb = await browser.$("#mcb-select-all-vs");
 		const popover = await mcb.shadow$("ui5-responsive-popover");
 		const closeIcon = await popover.$(".ui5-responsive-popover-close-btn");
 		const selectAllCheckbox = await popover.$(".ui5-mcb-select-all-checkbox");
+		const selectAllCheckboxRoot = await selectAllCheckbox.shadow$(".ui5-checkbox-root");
 
 		await mcb.click();
 
-		await selectAllCheckbox.click();
+		await selectAllCheckboxRoot.click();
 		await closeIcon.click();
 		await mcb.click();