dbeaver/pro#8422 feat: add keyboard navigation

webapp/common-react/@dbeaver/ui-kit/src/Composite/Composite.tsx

@@ -10,6 +10,7 @@
     Composite as AriakitComposite,
     CompositeItem as AriakitCompositeItem,
     CompositeProvider as AriakitCompositeProvider,
+    useCompositeContext,
     useCompositeStore,
     type CompositeProps,
     type CompositeItemProps,
@@ -17,16 +18,23 @@
     type CompositeStore,
 } from '@ariakit/react';
 
 export function CompositeProvider({ children, ...props }: CompositeProviderProps) {
     return <AriakitCompositeProvider {...props}>{children}</AriakitCompositeProvider>;
 }
 
 export function Composite({ children, ...props }: CompositeProps) {
     return <AriakitComposite {...props}>{children}</AriakitComposite>;
 }
 
 export function CompositeItem({ children, ...props }: CompositeItemProps) {
     return <AriakitCompositeItem {...props}>{children}</AriakitCompositeItem>;
 }
 
-export { useCompositeStore, type CompositeProps, type CompositeItemProps, type CompositeProviderProps, type CompositeStore };
+export {
+    useCompositeContext,
+    useCompositeStore,
+    type CompositeProps,
+    type CompositeItemProps,
+    type CompositeProviderProps,
+    type CompositeStore,
+};

webapp/common-react/@dbeaver/ui-kit/src/index.ts

@@ -21,22 +21,22 @@
   type FocusTrapRegionProps,
 } from '@ariakit/react';
 
 export { Button, ButtonBase, type ButtonProps, ButtonIcon, type ButtonIconProps, UnstyledButton, type UnstyledButtonProps } from './Button/Button.js';
 export { IconButton, IconButtonBase, type IconButtonProps } from './IconButton/IconButton.js';
 export { Checkbox, CheckboxBase, type CheckboxProps } from './Checkbox/Checkbox.js';
 export { CheckboxIndicator, type ICheckboxIndicatorProps } from './Checkbox/CheckboxIndicator.js';
 export { ColorPicker } from './ColorPicker/ColorPicker.js';
 export { ColorIndicator } from './ColorPicker/ColorIndicator.js';
 export { ColorPickerBase, type ColorPickerProps } from './ColorPicker/ColorPickerBase.js';
 export { normalizeColorToRgb } from './ColorPicker/colorUtils.js';
 export { Input, InputBase, type InputProps } from './Input/Input.js';
 export {
   SearchPanel,
   type SearchPanelProps,
   type SearchPanelRef,
   type SearchPanelQuery,
   type SearchPanelStrings,
 } from './SearchPanel/SearchPanel.js';
 export {
   Select,
   useSelectContext,
@@ -46,7 +46,7 @@
   type SelectLabelProps,
   type SelectPopoverProps,
   type SelectItemProps,
 } from './Select/Select.js';
 export * from './Combobox/Combobox.js';
 export * from './Command/Command.js';
 export { Popover, usePopoverStore, type PopoverStore } from './Popover/Popover.js';
@@ -71,6 +71,7 @@
   Composite,
   CompositeItem,
   CompositeProvider,
+  useCompositeContext,
   useCompositeStore,
   type CompositeProps,
   type CompositeItemProps,

webapp/packages/core-blocks/src/Split/SplitControls.module.css

@@ -1,10 +1,3 @@
-/*
- * 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.
- */
 .container {
   position: absolute;
   display: flex;
@@ -20,7 +13,8 @@
   }
 }
 
-.container:hover .resizeButton {
+.container:hover .resizeButton,
+.container:focus-within .resizeButton {
   opacity: 1;
 }
 

webapp/packages/core-blocks/src/Table/TableBody.tsx

@@ -1,15 +1,11 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
 
-interface Props {
-  className?: string;
-}
-
-export const TableBody: React.FC<React.PropsWithChildren<Props>> = function TableBody({ children, className }) {
-  return <tbody className={className}>{children}</tbody>;
+export const TableBody: React.FC<React.ComponentProps<'tbody'>> = function TableBody(props) {
+  return <tbody {...props} />;
 };

webapp/packages/core-blocks/src/Table/TableItem.tsx

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -26,7 +26,7 @@
   onClose: () => void;
 }
 
-interface Props<T> extends React.PropsWithChildren {
+interface Props<T> extends Omit<React.ComponentProps<'tr'>, 'onClick' | 'onDoubleClick'> {
   item: T;
   expandElement?: React.FunctionComponent<TableItemExpandProps<T>>;
   selectOnItem?: boolean;
@@ -39,7 +39,7 @@
 }
 
 interface ITableItemComponent {
   <T>(props: Props<T>): React.ReactElement<any, any> | null;
 }
 
 export const TableItem: ITableItemComponent = observer(function TableItem({
@@ -53,6 +53,7 @@
   className,
   onClick,
   onDoubleClick,
+  ...rest
 }) {
   const context = useContext(TableContext);
   const props = useObjectRef({ selectOnItem });
@@ -77,7 +78,7 @@
       isSelected: () => !!context.selectedItems.get(item),
       isExpanded: () => !!context.expandedItems.get(item),
     }),
     [item, selectionDisabled],
   );
 
   const isSelected = itemContext.isSelected();
@@ -95,10 +96,10 @@
     if (onClick) {
       onClick();
     }
   }, []);
 
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent<HTMLTableRowElement>) => {
       if (onDoubleClick) {
         onDoubleClick();
       }
@@ -117,6 +118,7 @@
       <tr
         title={title}
         className={s(styles, { selected: isSelected, expanded: isExpanded, disabled, row: true }, className)}
+        {...rest}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
       >

webapp/packages/plugin-sql-editor-execution-plan/package.json

@@ -35,6 +35,7 @@
     "@cloudbeaver/core-utils": "workspace:*",
     "@cloudbeaver/core-view": "workspace:*",
     "@cloudbeaver/plugin-sql-editor": "workspace:*",
+    "@dbeaver/ui-kit": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",

webapp/packages/plugin-sql-editor-execution-plan/src/ExecutionPlanTreeBlock.tsx

@@ -23,6 +23,7 @@ import {
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import type { SqlExecutionPlanNode } from '@cloudbeaver/core-sdk';
+import { Composite, CompositeProvider } from '@dbeaver/ui-kit';
 
 import style from './ExecutionPlanTreeBlock.module.css';
 import { NestedNode } from './NestedNode.js';
@@ -57,11 +58,13 @@ export const ExecutionPlanTreeBlock = observer<Props>(function ExecutionPlanTree
                 );
               })}
             </TableHeader>
-            <TableBody>
-              {state.nodes.map(node => (
-                <NestedNode key={node.id} columns={state.columns} node={node} depth={0} />
-              ))}
-            </TableBody>
+            <CompositeProvider orientation="vertical">
+              <Composite render={<TableBody />}>
+                {state.nodes.map(node => (
+                  <NestedNode key={node.id} columns={state.columns} node={node} depth={0} />
+                ))}
+              </Composite>
+            </CompositeProvider>
           </Table>
         ) : (
           <TextPlaceholder>{translate('plugin_sql_execution_plan_placeholder')}</TextPlaceholder>

webapp/packages/plugin-sql-editor-execution-plan/src/Expand.tsx

@@ -12,7 +12,7 @@ import classes from './Expand.module.css';
 interface Props {
   expanded: boolean;
   className?: string;
-  onClick: (event: React.MouseEvent<any>) => void;
+  onClick?: (event: React.MouseEvent<any>) => void;
 }
 
 export const Expand: React.FC<Props> = function Expand({ expanded, className, onClick }) {

webapp/packages/plugin-sql-editor-execution-plan/src/NestedNode.module.css

@@ -6,6 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 
+.row:focus-visible {
+  outline: 1px solid var(--theme-primary);
+  outline-offset: -1px;
+}
+
 .tableColumnValue {
   white-space: pre;
   cursor: pointer;

webapp/packages/plugin-sql-editor-execution-plan/src/NestedNode.tsx

@@ -1,20 +1,22 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2026 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 { useCallback, useState } from 'react';
 
-import { EventTableItemSelectionFlag, TableColumnValue, TableItem } from '@cloudbeaver/core-blocks';
+import { EventTableItemSelectionFlag, s, TableColumnValue, TableItem } from '@cloudbeaver/core-blocks';
 import { EventContext } from '@cloudbeaver/core-events';
 import type { IObjectPropertyInfo } from '@cloudbeaver/core-sdk';
+import { CompositeItem } from '@dbeaver/ui-kit';
 
 import type { IExecutionPlanNode } from './ExecutionPlanTreeContext.js';
 import { Expand } from './Expand.js';
 import { getPropertyValue } from './getPropertyValue.js';
 import classes from './NestedNode.module.css';
+import { useTreeGridKeyDown } from './useTreeGridKeyDown.js';
 
 interface Props {
   columns: IObjectPropertyInfo[];
@@ -23,6 +25,10 @@ interface Props {
   className?: string;
 }
 
+function getNodeItemId(nodeId: string): string {
+  return `execution-plan-node-${nodeId}`;
+}
+
 export const NestedNode: React.FC<Props> = function NestedNode({ columns, node, depth, className }) {
   const [expanded, setExpanded] = useState(true);
 
@@ -32,10 +38,21 @@ export const NestedNode: React.FC<Props> = function NestedNode({ columns, node,
   }, []);
 
   const hasChildren = node.children.length > 0;
+  const handleKeyDown = useTreeGridKeyDown({
+    expanded: hasChildren ? expanded : undefined,
+    parentItemId: node.parentId ? getNodeItemId(node.parentId) : undefined,
+    setExpanded,
+  });
 
   return (
     <>
-      <TableItem key={`${node.id}_${depth}`} className={className} item={node.id} selectOnItem>
+      <CompositeItem
+        id={getNodeItemId(node.id)}
+        aria-expanded={hasChildren ? expanded : undefined}
+        aria-level={depth + 1}
+        render={<TableItem item={node.id} className={s(classes, { row: true }, className)} selectOnItem />}
+        onKeyDown={handleKeyDown}
+      >
         {columns.map((column, idx) => {
           const property = node.properties.find(property => property.id === column.id);
           const value = property ? getPropertyValue(property) : '';
@@ -53,7 +70,7 @@ export const NestedNode: React.FC<Props> = function NestedNode({ columns, node,
             </TableColumnValue>
           );
         })}
-      </TableItem>
+      </CompositeItem>
       {expanded && node.children.map(child => <NestedNode key={child.id} columns={columns} node={child} depth={depth + 1} />)}
     </>
   );

webapp/packages/plugin-sql-editor-execution-plan/src/PropertiesPanel/PropertiesPanel.tsx

@@ -11,6 +11,7 @@ import { useMemo } from 'react';
 
 import { Table, TableBody, TableColumnHeader, TableHeader, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
 import type { ObjectPropertyInfo, SqlExecutionPlanNode } from '@cloudbeaver/core-sdk';
+import { Composite, CompositeProvider } from '@dbeaver/ui-kit';
 
 import { isVisibleProperty } from '../useExecutionPlanTreeState.js';
 import { PropertiesPanelItemsGroup } from './PropertiesPanelItemsGroup.js';
@@ -62,14 +63,16 @@ export const PropertiesPanel = observer<Props>(function PropertiesPanel({ select
         <TableColumnHeader title={nameColumnTitle}>{nameColumnTitle}</TableColumnHeader>
         <TableColumnHeader title={valueColumnTitle}>{valueColumnTitle}</TableColumnHeader>
       </TableHeader>
-      <TableBody>
-        {!!general.length && (
-          <PropertiesPanelItemsGroup properties={general} name={translate('plugin_sql_execution_plan_properties_panel_general')} />
-        )}
-        {!!details.length && (
-          <PropertiesPanelItemsGroup properties={details} name={translate('plugin_sql_execution_plan_properties_panel_details')} />
-        )}
-      </TableBody>
+      <CompositeProvider orientation="vertical">
+        <Composite render={<TableBody />}>
+          {!!general.length && (
+            <PropertiesPanelItemsGroup properties={general} name={translate('plugin_sql_execution_plan_properties_panel_general')} />
+          )}
+          {!!details.length && (
+            <PropertiesPanelItemsGroup properties={details} name={translate('plugin_sql_execution_plan_properties_panel_details')} />
+          )}
+        </Composite>
+      </CompositeProvider>
     </Table>
   );
 });

webapp/packages/plugin-sql-editor-execution-plan/src/PropertiesPanel/PropertiesPanelItemsGroup.module.css

@@ -1,10 +1,7 @@
-/*
- * 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.
- */
+.row:focus-visible {
+  outline: 1px solid var(--theme-primary);
+  outline-offset: -1px;
+}
 
 .tableColumnValue {
   white-space: pre;

webapp/packages/plugin-sql-editor-execution-plan/src/PropertiesPanel/PropertiesPanelItemsGroup.tsx

@@ -1,17 +1,19 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2026 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 { useState } from 'react';
+import { useId, useState } from 'react';
 
-import { TableColumnValue, TableItem } from '@cloudbeaver/core-blocks';
+import { s, TableColumnValue, TableItem } from '@cloudbeaver/core-blocks';
 import type { IObjectPropertyInfo } from '@cloudbeaver/core-sdk';
+import { CompositeItem } from '@dbeaver/ui-kit';
 
 import { Expand } from '../Expand.js';
 import { getPropertyValue } from '../getPropertyValue.js';
+import { useTreeGridKeyDown } from '../useTreeGridKeyDown.js';
 import classes from './PropertiesPanelItemsGroup.module.css';
 
 interface Props {
@@ -20,35 +22,52 @@ interface Props {
 }
 
 export const PropertiesPanelItemsGroup: React.FC<Props> = function PropertiesPanelItemsGroup({ properties, name }) {
+  const groupItemId = useId();
   const [expanded, setExpanded] = useState(true);
 
+  const handleGroupKeyDown = useTreeGridKeyDown({ expanded, setExpanded });
+  const handlePropertyKeyDown = useTreeGridKeyDown({ expanded: undefined, parentItemId: groupItemId });
+
   return (
     <>
-      <TableItem item={`${name}_root`} selectDisabled>
+      <CompositeItem
+        id={groupItemId}
+        aria-expanded={expanded}
+        aria-level={1}
+        render={
+          <TableItem item={`${name}_root`} className={s(classes, { row: true })} title={name} selectDisabled onClick={() => setExpanded(!expanded)} />
+        }
+        onKeyDown={handleGroupKeyDown}
+      >
         <TableColumnValue className={classes['tableColumnValue']} title={name}>
           <div className={classes['control']}>
             <div className={classes['expandContainer']}>
-              <Expand expanded={expanded} onClick={() => setExpanded(!expanded)} />
+              <Expand expanded={expanded} />
             </div>
             {name}
           </div>
         </TableColumnValue>
         <TableColumnValue className={classes['tableColumnValue']} />
-      </TableItem>
+      </CompositeItem>
       {expanded &&
         properties.map(property => {
           const name = property.displayName;
           const tooltip = `${name} ${property.description ? '(' + property.description + ')' : ''}`;
           const value = getPropertyValue(property);
           return (
-            <TableItem key={property.id} item={property.id} selectDisabled>
+            <CompositeItem
+              key={property.id}
+              aria-level={2}
+              render={<TableItem item={property.id} className={s(classes, { row: true })} selectDisabled />}
+              onKeyDown={handlePropertyKeyDown}
+            >
               <TableColumnValue className={classes['tableColumnValue']} title={tooltip}>
                 {'\t\t' + name}
               </TableColumnValue>
               <TableColumnValue className={classes['tableColumnValue']} title={value}>
                 {value}
               </TableColumnValue>
-            </TableItem>
+            </CompositeItem>
           );
         })}
     </>