Merge pull request #6027 from gooddata/ine-lx-727-3

fix: distinguish focus and focus-active styles
gooddata · Mar 6, 2025 · 02528c9 · 02528c9
2 parents 1543922 + 17efe41
commit 02528c9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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;
+            }
+        }
     }
 }