Skip to content

Commit 31915d7

Browse files
authored
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.
1 parent a3bde22 commit 31915d7

File tree

2 files changed

+8
-3
lines changed

2 files changed

+8
-3
lines changed

packages/main/src/Button.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
isPhone,
1010
isTablet,
1111
isCombi,
12+
isDesktop,
1213
isSafari,
1314
} from "@ui5/webcomponents-base/dist/Device.js";
1415
import ButtonDesign from "./types/ButtonDesign.js";
@@ -436,7 +437,9 @@ class Button extends UI5Element {
436437
return;
437438
}
438439
this.active = false;
439-
this.focused = false;
440+
if (isDesktop()) {
441+
this.focused = false;
442+
}
440443
}
441444

442445
_onfocusin(event) {
@@ -445,7 +448,9 @@ class Button extends UI5Element {
445448
}
446449

447450
event.isMarked = "button";
448-
this.focused = true;
451+
if (isDesktop()) {
452+
this.focused = true;
453+
}
449454
}
450455

451456
get hasButtonType() {

packages/main/src/themes/Button.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,6 @@ bdi {
301301
text-shadow: none;
302302
}
303303

304-
:host([design="Transparent"]:not([active]):hover) {
304+
:host([design="Transparent"]:not([active]):not([_is-touch]):hover) {
305305
border-color: var(--sapButton_Lite_Hover_BorderColor);
306306
}

0 commit comments

Comments
 (0)