From 0bf6783d00ea8c12343517b4cfd83a98447a0dd4 Mon Sep 17 00:00:00 2001
From: Alexey <wrouds@gmail.com>
Date: Fri, 27 Sep 2024 00:46:23 +0800
Subject: [PATCH] CB-5446 chore: keyboard navigation improvements (#2935)

* chore: keyboard navigation improvements

* CB-5446 chore: use theme color for outline

---------

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../packages/core-blocks/src/IconButton.tsx   |   2 +-
 webapp/packages/core-blocks/src/Menu/Menu.tsx |   2 +
 .../core-blocks/src/TextPlaceholder.tsx       |   7 +-
 .../core-blocks/src/ToolsPanel/ToolsPanel.tsx |  10 +-
 .../src/Tree/TreeNode/TreeNodeControl.tsx     |   3 +-
 webapp/packages/core-blocks/src/index.ts      |   1 +
 .../src/useListKeyboardNavigation.ts          | 100 ++++++++++++++++++
 .../src/styles/main/normalize.pure.css        |  45 +++++---
 .../src/ContextMenu/MenuBar/MenuBar.tsx       |   6 +-
 .../src/ContextMenu/MenuBar/MenuBarItem.tsx   |   8 +-
 .../core-ui/src/Tabs/Tab/Tab.module.css       |   3 +-
 .../src/Tabs/Tab/TabUnderline.module.css      |   1 -
 .../core-ui/src/Tabs/TabList.module.css       |   1 -
 .../src/Tabs/TabListVertical.module.css       |   1 -
 .../Tabs/TabListVerticalRotated.module.css    |   1 -
 .../core-ui/src/Tabs/TabPanel.module.css      |   1 -
 .../core-ui/src/Tabs/TabsBox/TabsBox.tsx      |   2 +-
 .../TabsBox/shared/TabsBoxTabPanel.module.css |   1 -
 .../core-view/src/View/CaptureView.module.css |   2 +-
 .../src/DataGrid/DataGridTable.tsx            |   5 +-
 .../src/DataPresentationService.ts            |   4 +-
 .../src/TableViewer/DataPresentation.tsx      |   9 +-
 .../TableViewer/TableFooter/TableFooter.tsx   |   7 +-
 .../TableFooterMenu/TableFooterMenu.tsx       |   6 +-
 .../TableViewer/TableHeader/TableHeader.tsx   |   6 +-
 .../TablePresentationBar.tsx                  |   6 +-
 .../src/TableViewer/TableStatistics.tsx       |   7 +-
 .../src/TableViewer/TableViewer.module.css    |  10 ++
 .../src/TableViewer/TableViewer.tsx           |  18 +++-
 .../NavigationTabsBar/NavigationTabsBar.tsx   |   1 -
 .../ElementsTree/ElementsTree.tsx             |   6 +-
 .../TreeNodeMenu/TreeNodeMenu.module.css      |   1 +
 .../src/TopNavBar/shared/TopMenu.module.css   |   2 +-
 .../shared/TopMenuBarItem.module.css          |   2 +-
 .../TopNavBar/shared/TopMenuItem.module.css   |   2 +-
 35 files changed, 227 insertions(+), 62 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/useListKeyboardNavigation.ts

diff --git a/webapp/packages/core-blocks/src/IconButton.tsx b/webapp/packages/core-blocks/src/IconButton.tsx
index 06e673a620..c246243b63 100644
--- a/webapp/packages/core-blocks/src/IconButton.tsx
+++ b/webapp/packages/core-blocks/src/IconButton.tsx
@@ -30,7 +30,7 @@ export const IconButton: React.FC<IconButtonProps> = observer(function IconButto
   const Button = tag ?? ReakitButton;
 
   return (
-    <Button {...rest} className={s(styles, { iconButton: true }, className)}>
+    <Button tabIndex={0} {...rest} className={s(styles, { iconButton: true }, className)}>
       <div className={s(styles, { iconBox: true })}>
         {img && <StaticImage className={s(styles, { staticImage: true })} icon={name} />}
         {!img && <Icon className={s(styles, { icon: true })} name={name} viewBox={viewBox} />}
diff --git a/webapp/packages/core-blocks/src/Menu/Menu.tsx b/webapp/packages/core-blocks/src/Menu/Menu.tsx
index 810b4ca9bb..c9249f46d5 100644
--- a/webapp/packages/core-blocks/src/Menu/Menu.tsx
+++ b/webapp/packages/core-blocks/src/Menu/Menu.tsx
@@ -134,6 +134,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
             <MenuButton
               key={relativePosition ? 'link' : 'main'}
               ref={combinedRef}
+              tabIndex={0}
               className={s(styles, { menuButton: true }, className)}
               {...menu}
               visible={menuVisible}
@@ -168,6 +169,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
           <MenuButton
             key={relativePosition ? 'link' : 'main'}
             ref={combinedRef}
+            tabIndex={0}
             className={s(styles, { menuButton: true }, className)}
             {...menu}
             visible={menuVisible}
diff --git a/webapp/packages/core-blocks/src/TextPlaceholder.tsx b/webapp/packages/core-blocks/src/TextPlaceholder.tsx
index 19c4499e66..94841136e6 100644
--- a/webapp/packages/core-blocks/src/TextPlaceholder.tsx
+++ b/webapp/packages/core-blocks/src/TextPlaceholder.tsx
@@ -6,21 +6,22 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { s } from './s.js';
 import style from './TextPlaceholder.module.css';
 import { useS } from './useS.js';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   children?: React.ReactNode;
 }
 
-export const TextPlaceholder = observer<Props>(function TextPlaceholder({ className, children }) {
+export const TextPlaceholder = observer<Props>(function TextPlaceholder({ className, children, ...rest }) {
   const styles = useS(style);
 
   return (
-    <div className={s(styles, { container: true })}>
+    <div {...rest} className={s(styles, { container: true })}>
       <span className={s(styles, { content: true }, className)}>{children}</span>
     </div>
   );
diff --git a/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx
index c4905c8a49..00658776c5 100644
--- a/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx
+++ b/webapp/packages/core-blocks/src/ToolsPanel/ToolsPanel.tsx
@@ -6,13 +6,14 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { s } from '../s.js';
 import { useS } from '../useS.js';
 import style from './ToolsPanel.module.css';
 
 type TType = 'primary' | 'secondary';
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   type?: TType;
   center?: boolean;
@@ -29,8 +30,13 @@ export const ToolsPanel: React.FC<React.PropsWithChildren<Props>> = observer(fun
   minHeight,
   type = 'primary',
   bottomBorder = false,
+  ...rest
 }) {
   const styles = useS(style);
 
-  return <div className={s(styles, { toolsPanel: true, [type]: true, bottomBorder, minHeight, center, rounded }, className)}>{children}</div>;
+  return (
+    <div {...rest} className={s(styles, { toolsPanel: true, [type]: true, bottomBorder, minHeight, center, rounded }, className)}>
+      {children}
+    </div>
+  );
 });
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
index 4ee480680e..1872691793 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
@@ -112,10 +112,11 @@ export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElem
     return (
       <div
         ref={ref}
-        tabIndex={0}
+        tabIndex={context.selected ? 0 : -1}
         title={title}
         aria-selected={context.selected}
         className={s(styles, { treeNodeControl: true }, className)}
+        data-tree-node-control
         onClick={handleClick}
         onMouseDown={handleMouseDown}
         onKeyDown={handleEnter}
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 262666d64e..9cce50bbdc 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -244,6 +244,7 @@ export * from './Snackbars/Snackbar.js';
 export * from './Snackbars/ActionSnackbar.js';
 export * from './Snackbars/ProcessSnackbar.js';
 export * from './useUserData.js';
+export * from './useListKeyboardNavigation.js';
 export * from './useMergeRefs.js';
 export * from './usePasswordValidation.js';
 export * from './manifest.js';
diff --git a/webapp/packages/core-blocks/src/useListKeyboardNavigation.ts b/webapp/packages/core-blocks/src/useListKeyboardNavigation.ts
new file mode 100644
index 0000000000..04fe0f8e2c
--- /dev/null
+++ b/webapp/packages/core-blocks/src/useListKeyboardNavigation.ts
@@ -0,0 +1,100 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { useEffect, useState } from 'react';
+
+import { EventContext } from '@cloudbeaver/core-events';
+
+export const EventKeyboardNavigationFlag = EventContext.create('useListKeyboardNavigation');
+
+export function useListKeyboardNavigation<T extends HTMLElement>(elementsSelector = '[tabindex]:not(:disabled)'): (obj: T | null) => void {
+  const [ref, setRef] = useState<T | null>(null);
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+
+    const getFocusableElements = () => {
+      const allFocusableElements = Array.from(ref.querySelectorAll(elementsSelector)) as HTMLElement[];
+      return allFocusableElements;
+    };
+
+    // Function to reset tabindex on all elements and set it to 0 on aria-selected="true"
+    const resetTabindex = () => {
+      const focusableElements = getFocusableElements();
+      focusableElements.forEach(el => {
+        if (el.getAttribute('aria-selected') === 'true') {
+          el.setAttribute('tabindex', '0');
+        } else {
+          el.setAttribute('tabindex', '-1');
+        }
+      });
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (EventContext.has(e, EventKeyboardNavigationFlag) || !['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
+        return;
+      }
+
+      const focusableElements = getFocusableElements();
+      let currentIndex = focusableElements.findIndex(el => el === document.activeElement);
+
+      if (document.activeElement !== ref && currentIndex === -1) {
+        return;
+      }
+
+      let newIndex = currentIndex;
+
+      EventContext.set(e, EventKeyboardNavigationFlag);
+      e.preventDefault();
+
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          newIndex = (currentIndex + 1) % focusableElements.length; // Move to next element
+
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          if (currentIndex === -1) {
+            currentIndex = 0;
+          }
+          newIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length; // Move to previous element
+
+          break;
+        default:
+          return;
+      }
+
+      // // Reset all tabindex to -1
+      focusableElements.forEach(el => el.setAttribute('tabindex', '-1'));
+
+      // Set the new element's tabindex to 0 and focus it
+      const nextElement = focusableElements[newIndex];
+      nextElement?.setAttribute('tabindex', '0');
+      nextElement?.focus();
+    };
+
+    const handleFocusOut = (e: FocusEvent) => {
+      // Check if the focus moved outside the container
+      if (!ref.contains(e.relatedTarget as Node)) {
+        resetTabindex();
+      }
+    };
+
+    ref.addEventListener('keydown', handleKeyDown);
+    ref.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      ref.removeEventListener('keydown', handleKeyDown);
+      ref.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [ref, elementsSelector]);
+
+  return setRef;
+}
diff --git a/webapp/packages/core-theming/src/styles/main/normalize.pure.css b/webapp/packages/core-theming/src/styles/main/normalize.pure.css
index 9b76547f4b..7e4765beb9 100644
--- a/webapp/packages/core-theming/src/styles/main/normalize.pure.css
+++ b/webapp/packages/core-theming/src/styles/main/normalize.pure.css
@@ -1,3 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -216,9 +223,9 @@ select {
  */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
 }
 
@@ -227,9 +234,9 @@ button,
  */
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -239,9 +246,9 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -296,8 +303,8 @@ textarea {
  * 2. Remove the padding in IE 10.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box;
   /* 1 */
   padding: 0;
@@ -308,8 +315,8 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -318,18 +325,26 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
   /* 2 */
 }
 
+/**
+ * outline styles
+ */
+
+:focus-visible {
+  outline-offset: -1px;
+}
+
 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBar.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBar.tsx
index 3ebb4b4a3a..b5648564d4 100644
--- a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBar.tsx
+++ b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBar.tsx
@@ -18,6 +18,8 @@ import {
   SContext,
   type StyleRegistry,
   useAutoLoad,
+  useListKeyboardNavigation,
+  useMergeRefs,
   useS,
 } from '@cloudbeaver/core-blocks';
 import { type IDataContext, useDataContextLink } from '@cloudbeaver/core-data-context';
@@ -52,6 +54,8 @@ const styleRegistry: StyleRegistry = [
 
 export const MenuBar = observer<IMenuBarProps, HTMLDivElement>(
   forwardRef(function MenuBar({ menu, nestedMenuSettings, rtl, className, ...props }, ref) {
+    const refNav = useListKeyboardNavigation();
+    const mergedRef = useMergeRefs(ref, refNav);
     const styles = useS(style);
     const items = menu.items;
     useAutoLoad(MenuBar, menu.loaders);
@@ -62,7 +66,7 @@ export const MenuBar = observer<IMenuBarProps, HTMLDivElement>(
 
     return (
       <SContext registry={styleRegistry}>
-        <div ref={ref} className={s(styles, { menuBar: true }, className)} {...props}>
+        <div ref={mergedRef} className={s(styles, { menuBar: true }, className)} tabIndex={0} {...props}>
           <Loader suspense small>
             {items.map(item => (
               <MenuBarElement key={item.id} item={item} menuData={menu} nestedMenuSettings={nestedMenuSettings} rtl={rtl} />
diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx
index b611a599bf..cf884780b5 100644
--- a/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx
+++ b/webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.tsx
@@ -36,13 +36,17 @@ export const MenuBarItem = registry(
 
       const title = translate(rest.title);
       const Submenu = submenu;
+      const selected = rest['aria-selected'] === 'true';
+      const disabled = rest.disabled;
+      const tabIndex = selected ? 0 : -1;
+
       return (
         <div
-          className={s(styles, { menuBarItemGroup: true, hidden, disabled: rest.disabled }, className)}
+          className={s(styles, { menuBarItemGroup: true, hidden, disabled }, className)}
           aria-selected={rest['aria-selected']}
           aria-disabled={rest['aria-disabled']}
         >
-          <button ref={ref} className={s(styles, { menuBarItem: true })} {...rest} title={title} aria-label={title}>
+          <button ref={ref} className={s(styles, { menuBarItem: true })} tabIndex={tabIndex} {...rest} title={title} aria-label={title}>
             <div className={s(styles, { menuBarItemBox: true })}>
               {loading ? (
                 <div className={s(styles, { menuBarItemIcon: true })}>
diff --git a/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css b/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css
index a75d5d9e2e..fce572857d 100644
--- a/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css
+++ b/webapp/packages/core-ui/src/Tabs/Tab/Tab.module.css
@@ -12,7 +12,6 @@
 
 .tab {
   position: relative;
-  outline: none;
   font-weight: normal;
   cursor: pointer;
   padding: 0;
@@ -28,7 +27,7 @@
     border-top-color: var(--theme-negative);
     opacity: 1;
 
-    &:before {
+    &:not(:focus-visible):before {
       display: none;
     }
   }
diff --git a/webapp/packages/core-ui/src/Tabs/Tab/TabUnderline.module.css b/webapp/packages/core-ui/src/Tabs/Tab/TabUnderline.module.css
index 5d4d9703b4..bc3f9172a1 100644
--- a/webapp/packages/core-ui/src/Tabs/Tab/TabUnderline.module.css
+++ b/webapp/packages/core-ui/src/Tabs/Tab/TabUnderline.module.css
@@ -15,7 +15,6 @@
     color: inherit;
     border: none;
     border-bottom: 2px solid var(--theme-primary);
-    outline: none;
     opacity: 1;
     border-top: none;
     font-weight: normal;
diff --git a/webapp/packages/core-ui/src/Tabs/TabList.module.css b/webapp/packages/core-ui/src/Tabs/TabList.module.css
index 4efc908985..f6d05424ea 100644
--- a/webapp/packages/core-ui/src/Tabs/TabList.module.css
+++ b/webapp/packages/core-ui/src/Tabs/TabList.module.css
@@ -9,7 +9,6 @@
 .tabList {
   display: flex;
   box-sizing: border-box;
-  outline: none;
 }
 
 .underline {
diff --git a/webapp/packages/core-ui/src/Tabs/TabListVertical.module.css b/webapp/packages/core-ui/src/Tabs/TabListVertical.module.css
index 64e1a102ff..2938cf8c1e 100644
--- a/webapp/packages/core-ui/src/Tabs/TabListVertical.module.css
+++ b/webapp/packages/core-ui/src/Tabs/TabListVertical.module.css
@@ -12,5 +12,4 @@
   flex: 0 0 auto;
   min-width: 150px;
   overflow: auto;
-  outline: none;
 }
diff --git a/webapp/packages/core-ui/src/Tabs/TabListVerticalRotated.module.css b/webapp/packages/core-ui/src/Tabs/TabListVerticalRotated.module.css
index f8ef5e818e..abadaa4eca 100644
--- a/webapp/packages/core-ui/src/Tabs/TabListVerticalRotated.module.css
+++ b/webapp/packages/core-ui/src/Tabs/TabListVerticalRotated.module.css
@@ -9,7 +9,6 @@
 .vertical.rotated.tabList {
   display: flex;
   gap: 4px;
-  outline: none;
   max-width: 32px;
   overflow: hidden;
   flex-direction: column;
diff --git a/webapp/packages/core-ui/src/Tabs/TabPanel.module.css b/webapp/packages/core-ui/src/Tabs/TabPanel.module.css
index 85708e2813..fe59718e15 100644
--- a/webapp/packages/core-ui/src/Tabs/TabPanel.module.css
+++ b/webapp/packages/core-ui/src/Tabs/TabPanel.module.css
@@ -7,7 +7,6 @@
  */
 
 .tabPanel {
-  outline: none;
   position: relative;
 
   &:not(.contents) {
diff --git a/webapp/packages/core-ui/src/Tabs/TabsBox/TabsBox.tsx b/webapp/packages/core-ui/src/Tabs/TabsBox/TabsBox.tsx
index b3476bcf38..b6c1913004 100644
--- a/webapp/packages/core-ui/src/Tabs/TabsBox/TabsBox.tsx
+++ b/webapp/packages/core-ui/src/Tabs/TabsBox/TabsBox.tsx
@@ -58,7 +58,7 @@ export const TabsBox = forwardRef<HTMLDivElement, TabsBoxProps>(function TabsBox
         enabledBaseActions={enabledBaseActions}
         onChange={onChange}
       >
-        <div ref={ref} className={s(style, { tabsBox: true }, className)} tabIndex={tabIndex}>
+        <div ref={ref} className={s(style, { tabsBox: true }, className)} tabIndex={tabIndex ?? -1}>
           {tabs && <div className={s(style, { tabs: true }, tabsClassName)}>{tabs}</div>}
           <div className={s(style, { tabPanels: true })}>{children}</div>
         </div>
diff --git a/webapp/packages/core-ui/src/Tabs/TabsBox/shared/TabsBoxTabPanel.module.css b/webapp/packages/core-ui/src/Tabs/TabsBox/shared/TabsBoxTabPanel.module.css
index 7cdb7c6e4c..8cdf752f9e 100644
--- a/webapp/packages/core-ui/src/Tabs/TabsBox/shared/TabsBoxTabPanel.module.css
+++ b/webapp/packages/core-ui/src/Tabs/TabsBox/shared/TabsBoxTabPanel.module.css
@@ -10,6 +10,5 @@
   flex: 1;
   display: flex;
   overflow: hidden;
-  outline: none;
   position: relative;
 }
diff --git a/webapp/packages/core-view/src/View/CaptureView.module.css b/webapp/packages/core-view/src/View/CaptureView.module.css
index de5ca4948e..53d59b62ce 100644
--- a/webapp/packages/core-view/src/View/CaptureView.module.css
+++ b/webapp/packages/core-view/src/View/CaptureView.module.css
@@ -5,6 +5,6 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.container {
+.container:not(:focus-visible) {
   outline: none;
 }
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
index 31f1b5cd8a..07057d8a7c 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx
@@ -60,7 +60,7 @@ const rowHeight = 25;
 const headerHeight = 28;
 const MAX_CELL_TEXT_SIZE = 100 * 1024;
 
-export const DataGridTable = observer<IDataPresentationProps>(function DataGridTable({ model, actions, resultIndex, simple, className }) {
+export const DataGridTable = observer<IDataPresentationProps>(function DataGridTable({ model, actions, resultIndex, simple, className, ...rest }) {
   const translate = useTranslate();
   const styles = useS(classes);
 
@@ -456,8 +456,9 @@ export const DataGridTable = observer<IDataPresentationProps>(function DataGridT
           <TableDataContext.Provider value={tableData}>
             <div
               ref={setContainersRef}
-              className={s(styles, { container: true }, className)}
               tabIndex={-1}
+              {...rest}
+              className={s(styles, { container: true }, className)}
               onKeyDown={handleKeyDown}
               onMouseDown={onMouseDownHandler}
               onMouseMove={onMouseMoveHandler}
diff --git a/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts b/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
index f6b287a231..2a543d3d1a 100644
--- a/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
+++ b/webapp/packages/plugin-data-viewer/src/DataPresentationService.ts
@@ -5,6 +5,8 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import type { HTMLAttributes } from 'react';
+
 import { injectable } from '@cloudbeaver/core-di';
 import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
 import type { TabProps } from '@cloudbeaver/core-ui';
@@ -12,7 +14,7 @@ import type { TabProps } from '@cloudbeaver/core-ui';
 import type { IDatabaseDataModel } from './DatabaseDataModel/IDatabaseDataModel.js';
 import type { IDataTableActions } from './TableViewer/IDataTableActions.js';
 
-export interface IDataPresentationProps {
+export interface IDataPresentationProps extends HTMLAttributes<HTMLDivElement> {
   dataFormat: ResultDataFormat;
   model: IDatabaseDataModel;
   actions: IDataTableActions;
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/DataPresentation.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/DataPresentation.tsx
index 36433921a3..b8a3e15432 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/DataPresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/DataPresentation.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { s, TextPlaceholder } from '@cloudbeaver/core-blocks';
 import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
@@ -16,7 +17,7 @@ import styles from './DataPresentation.module.css';
 import type { IDataTableActions } from './IDataTableActions.js';
 import { TableStatistics } from './TableStatistics.js';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   model: IDatabaseDataModel;
   actions: IDataTableActions;
   dataFormat: ResultDataFormat;
@@ -34,6 +35,7 @@ export const DataPresentation = observer<Props>(function DataPresentation({
   resultIndex,
   simple,
   isStatistics,
+  ...rest
 }) {
   if ((presentation.dataFormat !== undefined && dataFormat !== presentation.dataFormat) || !model.source.hasResult(resultIndex)) {
     if (model.isLoading()) {
@@ -41,13 +43,13 @@ export const DataPresentation = observer<Props>(function DataPresentation({
     }
 
     // eslint-disable-next-line react/no-unescaped-entities
-    return <TextPlaceholder>Current data can't be displayed by selected presentation</TextPlaceholder>;
+    return <TextPlaceholder {...rest}>Current data can't be displayed by selected presentation</TextPlaceholder>;
   }
 
   const Presentation = presentation.getPresentationComponent();
 
   if (isStatistics) {
-    return <TableStatistics model={model} resultIndex={resultIndex} />;
+    return <TableStatistics {...rest} model={model} resultIndex={resultIndex} />;
   }
 
   return (
@@ -58,6 +60,7 @@ export const DataPresentation = observer<Props>(function DataPresentation({
       resultIndex={resultIndex}
       simple={simple}
       className={s(styles, { presentation: true })}
+      {...rest}
     />
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
index 0d0d703d4c..d9dd475b21 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { Container, Fill, s, ToolsPanel, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
@@ -13,18 +14,18 @@ import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataMo
 import styles from './TableFooter.module.css';
 import { TableFooterMenu } from './TableFooterMenu/TableFooterMenu.js';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   resultIndex: number;
   model: IDatabaseDataModel;
   simple: boolean;
 }
 
-export const TableFooter = observer<Props>(function TableFooter({ resultIndex, model, simple }) {
+export const TableFooter = observer<Props>(function TableFooter({ resultIndex, model, simple, ...rest }) {
   const translate = useTranslate();
   const style = useS(styles);
 
   return (
-    <ToolsPanel type="secondary" center minHeight>
+    <ToolsPanel type="secondary" role="toolbar" center minHeight {...rest}>
       <TableFooterMenu model={model} resultIndex={resultIndex} simple={simple} />
       {model.source.requestInfo.requestMessage && (
         <>
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx
index 6cc8f11177..d86808b495 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterMenu/TableFooterMenu.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { CRegistry, s, useS } from '@cloudbeaver/core-blocks';
 import { useDataContextLink } from '@cloudbeaver/core-data-context';
@@ -24,9 +25,10 @@ interface Props {
   model: IDatabaseDataModel;
   simple: boolean;
   className?: string;
+  role?: HTMLAttributes<HTMLDivElement>['role'];
 }
 
-export const TableFooterMenu = observer<Props>(function TableFooterMenu({ resultIndex, model, simple, className }) {
+export const TableFooterMenu = observer<Props>(function TableFooterMenu({ resultIndex, model, simple, role, className }) {
   const styles = useS(MenuBarStyles, MenuBarItemStyles);
   const menu = useMenu({ menu: DATA_VIEWER_DATA_MODEL_ACTIONS_MENU });
 
@@ -38,7 +40,7 @@ export const TableFooterMenu = observer<Props>(function TableFooterMenu({ result
 
   return (
     <CRegistry registry={REFRESH_MENU_ITEM_REGISTRY}>
-      <MenuBar menu={menu} className={s(styles, { floating: true, withLabel: true }, className)} />
+      <MenuBar menu={menu} className={s(styles, { floating: true, withLabel: true }, className)} role={role} />
     </CRegistry>
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
index 43d8efe713..dc53645fed 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx
@@ -19,14 +19,16 @@ interface Props {
   resultIndex: number;
   simple: boolean;
   className?: string;
+  tabIndex?: number;
+  'data-table-header'?: boolean;
 }
 
-export const TableHeader = observer<Props>(function TableHeader({ model, resultIndex, simple, className }) {
+export const TableHeader = observer<Props>(function TableHeader({ model, resultIndex, simple, className, ...rest }) {
   const styles = useS(classes);
   const service = useService(TableHeaderService);
 
   return (
-    <header className={s(styles, { tableHeader: true }, className)}>
+    <header {...rest} className={s(styles, { tableHeader: true }, className)}>
       <Placeholder container={service.tableHeaderPlaceholder} model={model} resultIndex={resultIndex} simple={simple} />
     </header>
   );
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
index 27cddf42dd..89251c505a 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TablePresentationBar/TablePresentationBar.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -19,7 +20,7 @@ import styles from './shared/TablePresentationBar.module.css';
 import TablePresentationBarTab from './shared/TablePresentationBarTab.module.css';
 import TablePresentationBarTabList from './shared/TablePresentationBarTabList.module.css';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   type: DataPresentationType;
   presentationId: string | null | undefined;
   dataFormat: ResultDataFormat;
@@ -46,6 +47,7 @@ export const TablePresentationBar = observer<Props>(function TablePresentationBa
   className,
   onPresentationChange,
   onClose,
+  ...rest
 }) {
   const style = useS(styles);
   const dataPresentationService = useService(DataPresentationService);
@@ -66,7 +68,7 @@ export const TablePresentationBar = observer<Props>(function TablePresentationBa
   }
 
   return (
-    <div className={s(style, { tableLeftBar: true }, className)}>
+    <div {...rest} className={s(style, { tableLeftBar: true }, className)}>
       <TabsState currentTabId={presentationId} autoSelect={main}>
         <SContext registry={tablePresentationBarRegistry}>
           <TabList className={s(style, { tabListFlexible: main })} aria-label="Data Presentations" vertical rotated>
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.tsx
index b8c312cc78..de6a607309 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes } from 'react';
 
 import { s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
@@ -14,12 +15,12 @@ import { type IDatabaseResultSet } from '../DatabaseDataModel/IDatabaseResultSet
 import { isResultSetDataSource, ResultSetDataSource } from '../ResultSet/ResultSetDataSource.js';
 import classes from './TableStatistics.module.css';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   model: IDatabaseDataModel;
   resultIndex: number;
 }
 
-export const TableStatistics = observer<Props>(function TableStatistics({ model, resultIndex }) {
+export const TableStatistics = observer<Props>(function TableStatistics({ model, resultIndex, ...rest }) {
   const styles = useS(classes);
   const translate = useTranslate();
   const source = model.source;
@@ -31,7 +32,7 @@ export const TableStatistics = observer<Props>(function TableStatistics({ model,
   }
 
   return (
-    <div className={s(styles, { statistics: true })}>
+    <div {...rest} className={s(styles, { statistics: true })}>
       {translate('data_viewer_statistics_status')} {translate(source.requestInfo.requestMessage)}
       <br />
       {translate('data_viewer_statistics_duration')} {source.requestInfo.requestDuration} {translate('ui_ms')}
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.module.css b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.module.css
index 1822a00754..e90a7df12f 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.module.css
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.module.css
@@ -51,6 +51,16 @@
   flex-direction: column;
   overflow: hidden;
 }
+.paneContent.grid:focus-visible::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  outline-offset: -1px;
+  outline: var(--theme-primary) auto 1px;
+}
 .pane {
   &:first-child {
     position: relative;
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
index 94006ea567..6a3ecc1d11 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
@@ -17,6 +17,8 @@ import {
   s,
   Split,
   TextPlaceholder,
+  useListKeyboardNavigation,
+  useMergeRefs,
   useObjectRef,
   useObservableRef,
   useS,
@@ -69,6 +71,10 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
     const loading = dataModel?.isLoading() ?? true;
     const dataFormat = result?.dataFormat || ResultDataFormat.Resultset;
     const splitState = useSplitUserState('table-viewer');
+    const navRef = useListKeyboardNavigation(
+      '[data-presentation][tabindex]:not(:disabled), [data-presentation-tools][tabindex]:not(:disabled), [data-presentation-header][tabindex]:not(:disabled), [data-presentation-bar][tabindex]:not(:disabled)',
+    );
+    const mergedRef = useMergeRefs(ref, navRef);
 
     const localActions = useObjectRef({
       clearConstraints() {
@@ -201,7 +207,7 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
 
     return (
       <CaptureView className={s(styles, { captureView: true })} view={dataViewerView}>
-        <div ref={ref} className={s(styles, { tableViewer: true }, className)}>
+        <div ref={mergedRef} tabIndex={0} className={s(styles, { tableViewer: true }, className)}>
           <div className={s(styles, { tableContent: true })}>
             {!isStatistics && (
               <TablePresentationBar
@@ -212,11 +218,13 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
                 supportedDataFormat={dataModel.supportedDataFormats}
                 model={dataModel}
                 resultIndex={resultIndex}
+                tabIndex={0}
+                data-presentation-bar
                 onPresentationChange={dataTableActions.setPresentation}
               />
             )}
             <div className={s(styles, { tableData: true })}>
-              <TableHeader model={dataModel} resultIndex={resultIndex} simple={simple} />
+              <TableHeader model={dataModel} resultIndex={resultIndex} simple={simple} tabIndex={0} data-presentation-header />
               <Split
                 className={s(styles, { split: true, disabled: !valuePanelDisplayed })}
                 {...splitState}
@@ -227,7 +235,7 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
                 disableAutoMargin
               >
                 <Pane className={s(styles, { pane: true })}>
-                  <div className={s(styles, { paneContent: true, grid: true })}>
+                  <div className={s(styles, { paneContent: true, grid: true })} tabIndex={0} data-presentation>
                     <Loader className={s(styles, { loader: true })} suspense>
                       <DataPresentation
                         model={dataModel}
@@ -276,12 +284,14 @@ export const TableViewer = observer<TableViewerProps, HTMLDivElement>(
                 supportedDataFormat={[dataFormat]}
                 model={dataModel}
                 resultIndex={resultIndex}
+                tabIndex={0}
+                data-presentation-bar
                 onPresentationChange={dataTableActions.setValuePresentation}
                 onClose={dataTableActions.closeValuePresentation}
               />
             )}
           </div>
-          <TableFooter model={dataModel} resultIndex={resultIndex} simple={simple} />
+          <TableFooter model={dataModel} resultIndex={resultIndex} simple={simple} tabIndex={0} data-presentation-tools />
         </div>
       </CaptureView>
     );
diff --git a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
index 2a60729e76..8ccc26e106 100644
--- a/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
+++ b/webapp/packages/plugin-navigation-tabs/src/NavigationTabs/NavigationTabsBar/NavigationTabsBar.tsx
@@ -97,7 +97,6 @@ export const NavigationTabsBar = observer<Props>(function NavigationTabsBar({ cl
             </SContext>
           }
           tabList={navigation.tabIdList}
-          tabIndex={0}
           autoSelect
           enabledBaseActions
           onChange={handleTabChange}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
index 53c1935788..06713feb7f 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
@@ -19,6 +19,8 @@ import {
   Translate,
   TreeNodeNested,
   TreeNodeNestedMessage,
+  useListKeyboardNavigation,
+  useMergeRefs,
   useS,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -89,6 +91,8 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   const navNodeInfoResource = useService(NavNodeInfoResource);
   const [treeRootRef, setTreeRootRef] = useState<HTMLDivElement | null>(null);
   const folderExplorer = useElementsTreeFolderExplorer(baseRoot, settings);
+  const listRef = useListKeyboardNavigation('[data-tree-node-control][tabindex]:not(:disabled)');
+  const treeMergedRef = useMergeRefs<HTMLDivElement>(setTreeRootRef, listRef);
 
   const root = folderExplorer.state.folder;
 
@@ -162,7 +166,7 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   return (
     <>
       <ElementsTreeTools tree={tree} settingsElements={settingsElements} />
-      <div ref={setTreeRootRef} className={s(styles, { treeBox: true })}>
+      <div ref={treeMergedRef} className={s(styles, { treeBox: true })}>
         <ElementsTreeContext.Provider value={context}>
           <div className={s(styles, { box: true }, className)}>
             <FolderExplorer state={folderExplorer}>
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.module.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.module.css
index 606542bb53..1c07d4cae4 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.module.css
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/TreeNodeMenu/TreeNodeMenu.module.css
@@ -8,6 +8,7 @@
 .contextMenu {
   padding: 0;
   height: 16px;
+  width: 16px;
 
   &:before {
     display: none;
diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenu.module.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenu.module.css
index 9ee121c235..1155b579b3 100644
--- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenu.module.css
+++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenu.module.css
@@ -11,7 +11,7 @@
   &:global([aria-expanded='true']) {
     background: #338ecc;
   }
-  &:before {
+  &:not(:focus-visible):before {
     display: none;
   }
   &:disabled,
diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBarItem.module.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBarItem.module.css
index 304632a4de..9c8035d70b 100644
--- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBarItem.module.css
+++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuBarItem.module.css
@@ -70,7 +70,7 @@
   &:global([aria-expanded='true']) {
     background: #338ecc;
   }
-  &:before {
+  &:not(:focus-visible):before {
     display: none;
   }
 
diff --git a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuItem.module.css b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuItem.module.css
index 5accd9130f..455c7bbc30 100644
--- a/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuItem.module.css
+++ b/webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuItem.module.css
@@ -17,7 +17,7 @@
   &:global([aria-expanded='true']) {
     background: #236ea0;
   }
-  &:before {
+  &:not(:focus-visible):before {
     display: none;
   }
 }