From 17efe41db72c328492c41938db50785a81b5899a Mon Sep 17 00:00:00 2001
From: Ivan Nejezchleb <ivan.nejezchleb@gooddata.com>
Date: Thu, 6 Mar 2025 17:00:51 +0100
Subject: [PATCH] fix: distinguish focus and focus-active styles

JIRA: LX-727
risk: low
---
 libs/sdk-ui-kit/src/Header/HeaderAccount.tsx |  3 ++-
 libs/sdk-ui-kit/styles/scss/header.scss      | 23 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/libs/sdk-ui-kit/src/Header/HeaderAccount.tsx b/libs/sdk-ui-kit/src/Header/HeaderAccount.tsx
index b36abc48b38..faafe118a34 100644
--- a/libs/sdk-ui-kit/src/Header/HeaderAccount.tsx
+++ b/libs/sdk-ui-kit/src/Header/HeaderAccount.tsx
@@ -9,6 +9,7 @@ import { Button } from "../Button/index.js";
 import { IHeaderMenuItem, IHeaderAccountProps } from "./typings.js";
 import { UiFocusTrap } from "../@ui/UiFocusTrap/UiFocusTrap.js";
 import { useId } from "../utils/useId.js";
+import { isActionKey } from "../utils/events.js";
 
 export const HeaderAccount: React.FC<IHeaderAccountProps> = ({
     className = "",
@@ -120,7 +121,7 @@ const MenuItem: React.FC<{
 
     const handleKeyDown = useCallback(
         (e: React.KeyboardEvent): void => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (isActionKey(e)) {
                 e.preventDefault();
                 toggleMenu(false);
                 onMenuItemClick(item, e);
diff --git a/libs/sdk-ui-kit/styles/scss/header.scss b/libs/sdk-ui-kit/styles/scss/header.scss
index 93af491673f..ef48b170717 100644
--- a/libs/sdk-ui-kit/styles/scss/header.scss
+++ b/libs/sdk-ui-kit/styles/scss/header.scss
@@ -346,6 +346,20 @@ $button-normal-active-shadow: color.adjust($button-normal-active-border-color, $
         }
     }
 }
+a.gd-list-help-menu-item.gd-list-item {
+    &:focus-visible {
+        // disable outline and use box-shadow instead.
+        // outline highlights both element and ::after content added as divider
+        // needs to be rewriten in https: //gooddata.atlassian.net/browse/LX-769
+        outline: none;
+        box-shadow: 0 0 0 2px black;
+        text-decoration: none;
+    }
+
+    &:focus {
+        text-decoration: none;
+    }
+}
 
 .gd-header-menu-item {
     box-sizing: border-box;
@@ -943,6 +957,15 @@ $button-normal-active-shadow: color.adjust($button-normal-active-border-color, $
             font-family: variables.$gd-font-primary;
             font-weight: 400;
         }
+        a.gd-list-item {
+            &:focus-visible {
+                outline: auto;
+                text-decoration: none;
+            }
+            &:focus {
+                text-decoration: none;
+            }
+        }
     }
 }