From ce2829619eceb1dca26ca17b2b6d0ab253caf076 Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com>
Date: Mon, 8 Apr 2024 20:37:18 +0300
Subject: [PATCH] feat(ui5-checkbox): update focus handling (#8553)

Adjusted ui5-checkbox focus display rules. On desktop, focus outline is
always visible. For mobile, focus outline only appears with an external
keyboard, it remains hidden for touch focus.

Related to: #8320
---
 packages/main/src/CheckBox.ts                 |  6 +++++
 packages/main/src/themes/CheckBox.css         | 25 ++++++++-----------
 .../sap_horizon_dark/CheckBox-parameters.css  |  1 +
 .../sap_horizon_hcb/CheckBox-parameters.css   |  1 +
 .../sap_horizon_hcw/CheckBox-parameters.css   |  1 +
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
index 319cd0211393..02e19461f483 100644
--- a/packages/main/src/CheckBox.ts
+++ b/packages/main/src/CheckBox.ts
@@ -267,6 +267,12 @@ class CheckBox extends UI5Element implements IFormElement {
 		this._enableFormSupport();
 	}
 
+	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+	}
+
 	_enableFormSupport() {
 		const formSupport = getFeature<typeof FormSupport>("FormSupport");
 		if (formSupport) {
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
index d9b30976c711..40610527174e 100644
--- a/packages/main/src/themes/CheckBox.css
+++ b/packages/main/src/themes/CheckBox.css
@@ -61,7 +61,8 @@
 	align-self: center;
 }
 
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
+:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
+:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 
@@ -99,7 +100,6 @@
 	background: var(--_ui5_checkbox_inner_information_background_hover);
 }
 
-
 :host([value-state="Success"]) .ui5-checkbox-inner,
 :host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--sapField_SuccessBackground);
@@ -116,14 +116,6 @@
 	color: var(--_ui5_checkbox_checkmark_warning_color);
 }
 
-:host([text]) .ui5-checkbox-root {
-	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
-}
-
-:host([text]) .ui5-checkbox-root:focus::before {
-	inset-inline-end: 0;
-}
-
 .ui5-checkbox-root {
 	position: relative;
 	display: inline-flex;
@@ -141,7 +133,8 @@
 }
 
 /* focused */
-.ui5-checkbox-root:focus::before {
+:host([desktop]) .ui5-checkbox-root:focus-within::before,
+.ui5-checkbox-root:focus-visible::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
 	content: "";
 	position: absolute;
@@ -151,9 +144,13 @@
 	border-radius: var(--_ui5_checkbox_focus_border_radius);
 }
 
-:host .ui5-checkbox-root:focus {
-	border: var(--_ui5_checkbox_focus_border);
-	border-radius: 0.5rem;
+:host([text]) .ui5-checkbox-root {
+	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
+}
+
+:host([text]) .ui5-checkbox-root:focus-within::before,
+:host([text]) .ui5-checkbox-root:focus-visible::before {
+	inset-inline-end: 0;
 }
 
 /* hover */
diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css
index f55e190b54ea..f16fbe99648e 100644
--- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css
@@ -40,4 +40,5 @@
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_focus_border_radius: 0.5rem;
 	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
+	--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css
index a68df893dd86..4064bc4a9a2e 100644
--- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css
@@ -42,4 +42,5 @@
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_focus_border_radius: 0.5rem;
 	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
+	--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css
index a68df893dd86..4064bc4a9a2e 100644
--- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css
@@ -42,4 +42,5 @@
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_focus_border_radius: 0.5rem;
 	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
+	--_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem;
 }