fix(ui5-button): remove focus on phone and tablet (#4746)

Focus outline removed on phone and tablet devices. Now "focused" attribute is placed only on Desktop devices.
SAP · Feb 15, 2022 · 31915d7 · 31915d7
1 parent a3bde22
commit 31915d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -9,6 +9,7 @@ import {
 	isPhone,
 	isTablet,
 	isCombi,
+	isDesktop,
 	isSafari,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
@@ -436,7 +437,9 @@ class Button extends UI5Element {
 			return;
 		}
 		this.active = false;
-		this.focused = false;
+		if (isDesktop()) {
+			this.focused = false;
+		}
 	}
 
 	_onfocusin(event) {
@@ -445,7 +448,9 @@ class Button extends UI5Element {
 		}
 
 		event.isMarked = "button";
-		this.focused = true;
+		if (isDesktop()) {
+			this.focused = true;
+		}
 	}
 
 	get hasButtonType() {

diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -301,6 +301,6 @@ bdi {
 	text-shadow: none;
 }
 
-:host([design="Transparent"]:not([active]):hover) {
+:host([design="Transparent"]:not([active]):not([_is-touch]):hover) {
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
 }