From a53ef794e64f28d75a83e100d3c32a44632647cb Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Tue, 17 Feb 2026 09:39:32 +0200 Subject: [PATCH 1/3] fix(ui5-panel): remove focus outline on mobile devices JIRA: BGSOFUIRILA-4208 --- packages/main/src/Panel.ts | 10 ++++++++++ packages/main/src/PanelTemplate.tsx | 1 + packages/main/src/themes/Panel.css | 6 +++++- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index ff9ebba59eb9..606851597e03 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -10,6 +10,7 @@ import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js"; import { isSpace, isEnter, isEscape } from "@ui5/webcomponents-base/dist/Keys.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; +import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type { UI5CustomEvent } from "@ui5/webcomponents-base"; @@ -199,6 +200,9 @@ class Panel extends UI5Element { @property({ type: Boolean, noAttribute: true }) _pendingToggle = false; + @property({ type: Boolean }) + _touched = false; + /** * Defines the component header area. * @@ -232,6 +236,12 @@ class Panel extends UI5Element { return this.noAnimation || getAnimationMode() === AnimationMode.None; } + _isMobile() { + if (supportsTouch()) { + this._touched = true; + } + } + _headerClick(e: MouseEvent) { if (!this.shouldToggle(e.target as HTMLElement)) { return; diff --git a/packages/main/src/PanelTemplate.tsx b/packages/main/src/PanelTemplate.tsx index c6c845e9541d..2194bd192b3e 100644 --- a/packages/main/src/PanelTemplate.tsx +++ b/packages/main/src/PanelTemplate.tsx @@ -26,6 +26,7 @@ export default function PanelTemplate(this: Panel) { onClick={this._headerClick} onKeyDown={this._headerKeyDown} onKeyUp={this._headerKeyUp} + onTouchStart={this._isMobile} class="ui5-panel-header" tabindex={this.headerTabIndex} role={this.accInfo.role} diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index 7b4ba576cb99..59485534514b 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -59,10 +59,14 @@ right: var(--_ui5_panel_focus_offset); } -:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus:after { +:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus::after { border-radius: var(--_ui5_panel_border_radius_expanded); } +:host([_touched]:not([_has-header]):not([fixed])) .ui5-panel-header:focus::after { + display: none; +} + :host(:not([collapsed])) .ui5-panel-header-button:not(.ui5-panel-header-button-with-icon), :host(:not([collapsed])) .ui5-panel-header-icon-wrapper [ui5-icon] { transform: var(--_ui5_panel_toggle_btn_rotation); From 10982a233c954f46e3342e3a57b7ddb528b63bfb Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Tue, 17 Feb 2026 17:07:41 +0200 Subject: [PATCH 2/3] fix(ui5-panel): remove focus outline on mobile devices restore focus outline when tabbing on mobile devices --- packages/main/src/Panel.ts | 6 ++++++ packages/main/src/PanelTemplate.tsx | 1 + 2 files changed, 7 insertions(+) diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index 606851597e03..7fc665ea8690 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -242,6 +242,12 @@ class Panel extends UI5Element { } } + _headerFocusOut() { + // Reset touched state when focus leaves, so next focus can be properly detected + // as either touch-initiated or keyboard-initiated + this._touched = false; + } + _headerClick(e: MouseEvent) { if (!this.shouldToggle(e.target as HTMLElement)) { return; diff --git a/packages/main/src/PanelTemplate.tsx b/packages/main/src/PanelTemplate.tsx index 2194bd192b3e..3cfcb34e6de0 100644 --- a/packages/main/src/PanelTemplate.tsx +++ b/packages/main/src/PanelTemplate.tsx @@ -27,6 +27,7 @@ export default function PanelTemplate(this: Panel) { onKeyDown={this._headerKeyDown} onKeyUp={this._headerKeyUp} onTouchStart={this._isMobile} + onFocusOut={this._headerFocusOut} class="ui5-panel-header" tabindex={this.headerTabIndex} role={this.accInfo.role} From 609a11d6b2935df5f3ed22e554e6571350dc9f1a Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Tue, 17 Feb 2026 17:32:01 +0200 Subject: [PATCH 3/3] fix(ui5-panel): remove focus outline on mobile devices JIRA: BGSOFUIRILA-4208 --- packages/main/src/Panel.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts index 7fc665ea8690..3a13401b7f7d 100644 --- a/packages/main/src/Panel.ts +++ b/packages/main/src/Panel.ts @@ -243,8 +243,6 @@ class Panel extends UI5Element { } _headerFocusOut() { - // Reset touched state when focus leaves, so next focus can be properly detected - // as either touch-initiated or keyboard-initiated this._touched = false; }