From db37cf81bd1951ff280b6f682fd5784877cae5ca Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com>
Date: Tue, 16 Apr 2024 15:25:16 +0300
Subject: [PATCH] chore(ui5-icon): update focus handling (#8773)

Adjusted `ui5-icon` 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/Icon.hbs        |  2 --
 packages/main/src/Icon.ts         | 29 +++++++----------------------
 packages/main/src/themes/Icon.css |  3 ++-
 3 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/packages/main/src/Icon.hbs b/packages/main/src/Icon.hbs
index f61e443d878d..07a98c2da017 100644
--- a/packages/main/src/Icon.hbs
+++ b/packages/main/src/Icon.hbs
@@ -10,8 +10,6 @@
 	aria-label="{{effectiveAccessibleName}}"
 	aria-hidden={{effectiveAriaHidden}}
 	xmlns="http://www.w3.org/2000/svg"
-	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 >
diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
index c008d1431577..9310f9101488 100644
--- a/packages/main/src/Icon.ts
+++ b/packages/main/src/Icon.ts
@@ -6,6 +6,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { getIconData, getIconDataSync, IconData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
@@ -208,12 +209,6 @@ class Icon extends UI5Element implements IIcon {
 	@property({ type: Object, defaultValue: undefined, noAttribute: true })
 	accData?: I18nText;
 
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	focused!: boolean;
-
 	/**
 	* @private
 	*/
@@ -231,19 +226,6 @@ class Icon extends UI5Element implements IIcon {
 	viewBox?: string;
 	customSvg?: object;
 
-	_onfocusout?: ((event: FocusEvent) => void);
-	_onfocusin?: ((event: FocusEvent) => void);
-
-	_onFocusInHandler() {
-		if (this.interactive) {
-			this.focused = true;
-		}
-	}
-
-	_onFocusOutHandler() {
-		this.focused = false;
-	}
-
 	_onkeydown(e: KeyboardEvent) {
 		if (!this.interactive) {
 			return;
@@ -303,6 +285,12 @@ class Icon extends UI5Element implements IIcon {
 		return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
 	}
 
+	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+	}
+
 	async onBeforeRendering() {
 		const name = this.name;
 		if (!name) {
@@ -341,9 +329,6 @@ class Icon extends UI5Element implements IIcon {
 		this.ltr = iconData.ltr;
 		this.packageName = iconData.packageName;
 
-		this._onfocusout = this.interactive ? this._onFocusOutHandler.bind(this) : undefined;
-		this._onfocusin = this.interactive ? this._onFocusInHandler.bind(this) : undefined;
-
 		if (this.accessibleName) {
 			this.effectiveAccessibleName = this.accessibleName;
 		} else if (this.accData) {
diff --git a/packages/main/src/themes/Icon.css b/packages/main/src/themes/Icon.css
index e9296cf8b6b7..612dfd3277a8 100644
--- a/packages/main/src/themes/Icon.css
+++ b/packages/main/src/themes/Icon.css
@@ -50,7 +50,8 @@
 	color: var(--sapPositiveElementColor);
 }
 
-:host([interactive][focused]) .ui5-icon-root {
+:host([interactive][desktop]) .ui5-icon-root:focus-within,
+:host([interactive]) .ui5-icon-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);
 }