Cb 5133 tree expand focus (#2605)

* CB-5133 make tree expand focusable * CB-5133 make tree expand clickable * CB-5133 add label for the expand button --------- Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · May 21, 2024 · e3a859f · e3a859f
1 parent 72ce16b
commit e3a859f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/webapp/packages/core-blocks/src/Menu/Menu.m.css b/webapp/packages/core-blocks/src/Menu/Menu.m.css
@@ -1,10 +1,16 @@
+/*
+ * 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.
+ */
 .menuButton {
   composes: theme-ripple from global;
 }
 .menuButton {
   background: none;
   border: none;
-  outline: none !important;
   color: inherit;
   cursor: pointer;
 

diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeExpand.tsx
@@ -10,9 +10,11 @@ import { useContext } from 'react';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
+import { Clickable } from '../../Clickable';
 import { getComputed } from '../../getComputed';
 import { Icon } from '../../Icon';
 import { Loader } from '../../Loader/Loader';
+import { useTranslate } from '../../localization/useTranslate';
 import { s } from '../../s';
 import { useS } from '../../useS';
 import { useStateDelay } from '../../useStateDelay';
@@ -29,6 +31,7 @@ interface Props {
 }
 
 export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, big, filterActive, disabled, className }) {
+  const translate = useTranslate();
   const styles = useS(style);
   const context = useContext(TreeNodeContext);
 
@@ -85,14 +88,22 @@ export const TreeNodeExpand = observer<Props>(function TreeNodeExpand({ leaf, bi
     }
   }
 
+  const title = translate('ui_expand');
+
   return (
-    <div
+    <Clickable
+      as="div"
+      role="button"
+      title={title}
+      aria-label={title}
       className={s(styles, { treeNodeExpand: true, expanded: context.expanded, big }, className)}
+      focusable={expandable}
+      disabled={disabled || !expandable}
       onClick={handleExpand}
       onDoubleClick={handleDbClick}
     >
       {loading && <Loader small fullSize />}
       {expandable && <Icon name={iconName} className={s(styles, { icon: true })} viewBox={viewBox} />}
-    </div>
+    </Clickable>
   );
 });