CB-4931 make export and import dialog focusable (#2584)

* CB-4931 make export and import dialog focusable * CB-4931 always focus the dialog --------- Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · May 10, 2024 · c8ec571 · c8ec571
1 parent 7045575
commit c8ec571
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 9 deletions.
diff --git a/webapp/packages/core-blocks/src/Clickable.tsx b/webapp/packages/core-blocks/src/Clickable.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 { observer } from 'mobx-react-lite';
+import { ClickableOptions, Clickable as MantineClickable } from 'reakit';
+
+import type { ReakitProxyComponent, ReakitProxyComponentOptions } from './Menu/ReakitProxyComponent';
+
+export const Clickable: ReakitProxyComponent<'button', ClickableOptions> = observer<ReakitProxyComponentOptions<'button', ClickableOptions>>(
+  function Clickable({ children, ...rest }) {
+    const Component = MantineClickable;
+
+    return <Component {...rest}>{children}</Component>;
+  },
+) as ReakitProxyComponent<'button', ClickableOptions>;
diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx
@@ -47,7 +47,7 @@ export const CommonDialogHeader = observer<Props>(function CommonDialogHeader({
         <h3 className={s(computedStyles, { headerTitle: true })}>{translate(title)}</h3>
         {onReject && (
           <div className={s(computedStyles, { reject: true })}>
-            <ActionIconButton name="cross" viewBox="0 0 16 16" onClick={onReject} />
+            <ActionIconButton aria-label={translate('ui_close')} name="cross" viewBox="0 0 16 16" onClick={onReject} />
           </div>
         )}
       </div>

diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.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.
+ */
 .container {
   box-sizing: border-box;
   display: flex;
@@ -17,6 +24,7 @@
   max-height: 100%;
   max-width: 748px;
   padding: 0px;
+  outline: none;
 
   &.small {
     min-width: 404px;

diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
@@ -11,6 +11,7 @@ import { Dialog, useDialogState } from 'reakit/Dialog';
 
 import { Loader } from '../../Loader/Loader';
 import { s } from '../../s';
+import { useFocus } from '../../useFocus';
 import { useS } from '../../useS';
 import { DialogContext } from '../DialogContext';
 import styles from './CommonDialogWrapper.m.css';
@@ -27,6 +28,7 @@ export interface CommonDialogWrapperProps {
 
 export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivElement>(
   forwardRef(function CommonDialogWrapper({ size = 'medium', fixedSize, fixedWidth, freeHeight, 'aria-label': ariaLabel, className, children }, ref) {
+    const [focusedRef] = useFocus({ autofocus: true });
     const computedStyles = useS(styles);
     const context = useContext(DialogContext);
     const dialogState = useDialogState({ visible: true });
@@ -48,6 +50,8 @@ export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivEle
         modal={false}
       >
         <dialog
+          ref={focusedRef}
+          tabIndex={0}
           className={s(
             computedStyles,
             { dialog: true, small: size === 'small', medium: size === 'medium', large: size === 'large', fixedSize, fixedWidth, freeHeight },

diff --git a/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx b/webapp/packages/core-blocks/src/CommonDialog/ConfirmationDialog.tsx
@@ -12,7 +12,6 @@ import { Button } from '../Button';
 import { Fill } from '../Fill';
 import { Translate } from '../localization/Translate';
 import { s } from '../s';
-import { useFocus } from '../useFocus';
 import { useS } from '../useS';
 import { CommonDialogBody } from './CommonDialog/CommonDialogBody';
 import { CommonDialogFooter } from './CommonDialog/CommonDialogFooter';
@@ -40,11 +39,10 @@ export const ConfirmationDialog: DialogComponent<ConfirmationDialogPayload, Dial
   className,
 }) {
   const styles = useS(style);
-  const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const { icon, title, subTitle, bigIcon, viewBox, message, confirmActionText, cancelActionText } = payload;
 
   return (
-    <CommonDialogWrapper ref={focusedRef} size="small" className={className} fixedWidth>
+    <CommonDialogWrapper size="small" className={className} fixedWidth>
       <CommonDialogHeader title={title} subTitle={subTitle} icon={icon} viewBox={viewBox} bigIcon={bigIcon} onReject={rejectDialog} />
       <CommonDialogBody>
         <Translate token={message} />

diff --git a/webapp/packages/core-blocks/src/ErrorDetailsDialog/ErrorDetailsDialog.tsx b/webapp/packages/core-blocks/src/ErrorDetailsDialog/ErrorDetailsDialog.tsx
@@ -23,7 +23,6 @@ import { useClipboard } from '../useClipboard';
 import { useS } from '../useS';
 import style from './ErrorDetailsDialog.m.css';
 import { ErrorModel, IErrorInfo } from './ErrorModel';
-import { useFocus } from '../useFocus';
 
 function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
   const styles = useS(style);
@@ -43,7 +42,6 @@ function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
 }
 
 export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observer(function ErrorDetailsDialog(props) {
-  const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const translate = useTranslate();
   const styles = useS(style);
 
@@ -53,7 +51,7 @@ export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observe
   const copyHandler = useCallback(() => copy(error.textToCopy, true), [error, copy]);
 
   return (
-    <CommonDialogWrapper ref={focusedRef} size="large">
+    <CommonDialogWrapper size="large">
       <CommonDialogHeader title="core_eventsLog_dbeaverErrorDetails" icon="/icons/error_icon.svg" bigIcon onReject={props.rejectDialog} />
       <CommonDialogBody>
         {error.errors.map((error, id) => (

diff --git a/webapp/packages/core-blocks/src/ItemList/ListItem.tsx b/webapp/packages/core-blocks/src/ItemList/ListItem.tsx
@@ -5,6 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { Clickable } from '../Clickable';
 import { s } from '../s';
 import { useS } from '../useS';
 import style from './ItemList.m.css';
@@ -18,8 +19,8 @@ export const ListItem: React.FC<React.PropsWithChildren<Props>> = function ListI
   const styles = useS(style);
 
   return (
-    <div className={s(styles, { listItem: true }, className)} onClick={onClick}>
+    <Clickable as="div" className={s(styles, { listItem: true }, className)} focusable onClick={onClick}>
       {children}
-    </div>
+    </Clickable>
   );
 };