fix(ui5-checkbox): ensure consistent focus behavior

Ensure focus is applied consistently around the checkbox container and respective text, aligning behavior with other components. Fixes #10566
SAP · Jan 23, 2025 · 4af25be · 4af25be
1 parent d0d3cc5
commit 4af25be
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
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");