From 91c760a5bcdf75b2785b2a5333a767d9913ab837 Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Tue, 30 Apr 2024 14:15:52 +0200
Subject: [PATCH 1/2] CB-5085 make errors focusable

---
 webapp/packages/core-blocks/src/DisplayError.tsx |  2 +-
 webapp/packages/core-blocks/src/ErrorMessage.tsx | 12 +++++++-----
 .../src/TableViewer/TableError.tsx               | 16 +++++++++++++---
 .../plugin-user-profile/src/UserInfo.tsx         |  9 +++++++--
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/webapp/packages/core-blocks/src/DisplayError.tsx b/webapp/packages/core-blocks/src/DisplayError.tsx
index 3cac7b7421..8d9407c781 100644
--- a/webapp/packages/core-blocks/src/DisplayError.tsx
+++ b/webapp/packages/core-blocks/src/DisplayError.tsx
@@ -29,7 +29,7 @@ export const DisplayError = observer<Props>(function DisplayError({ root, childr
   const stack = errorInfo?.componentStack || error?.stack;
 
   return (
-    <div className={s(styles, { error: true, root }, className)}>
+    <div role="alert" tabIndex={0} className={s(styles, { error: true, root }, className)}>
       <div className={s(styles, { errorInnerBlock: true })}>
         <NotificationMark className={s(styles, { notificationMark: true })} type={ENotificationType.Error} />
         <p>Something went wrong.</p>
diff --git a/webapp/packages/core-blocks/src/ErrorMessage.tsx b/webapp/packages/core-blocks/src/ErrorMessage.tsx
index 94c9f4a1ad..71a222ea0f 100644
--- a/webapp/packages/core-blocks/src/ErrorMessage.tsx
+++ b/webapp/packages/core-blocks/src/ErrorMessage.tsx
@@ -6,13 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+
 import { Button } from './Button';
+import styles from './ErrorMessage.m.css';
 import { IconOrImage } from './IconOrImage';
 import { useTranslate } from './localization/useTranslate';
-import { useS } from './useS';
-
-import styles from './ErrorMessage.m.css';
 import { s } from './s';
+import { useS } from './useS';
 
 interface Props {
   hasDetails?: boolean;
@@ -26,9 +26,11 @@ export const ErrorMessage = observer<Props>(function ErrorMessage({ text, classN
   const style = useS(styles);
 
   return (
-    <div className={s(style, { message: true }, className)}>
+    <div role="status" tabIndex={0} aria-label={text} className={s(style, { message: true }, className)}>
       <IconOrImage className={s(style, { errorIcon: true })} icon="/icons/error_icon_sm.svg" />
-      <div className={s(style, { messageBody: true })} title={text}>{text}</div>
+      <div className={s(style, { messageBody: true })} title={text}>
+        {text}
+      </div>
       <div className={s(style, { messageActions: true })}>
         {hasDetails && (
           <Button type="button" mod={['outlined']} onClick={onShowDetails}>
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableError.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableError.tsx
index e24e27b8b5..363c5c5990 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableError.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableError.tsx
@@ -7,6 +7,7 @@
  */
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 import styled, { css, use } from 'reshadow';
 
 import { Button, IconOrImage, useErrorDetails, useObservableRef, useStateDelay, useTranslate } from '@cloudbeaver/core-blocks';
@@ -14,7 +15,6 @@ import { ServerErrorType, ServerInternalError } from '@cloudbeaver/core-sdk';
 import { errorOf } from '@cloudbeaver/core-utils';
 
 import type { IDatabaseDataModel } from '../DatabaseDataModel/IDatabaseDataModel';
-import { useEffect } from 'react';
 
 const style = css`
   error {
@@ -30,7 +30,11 @@ const style = css`
     right: 0;
     z-index: 1;
     opacity: 0;
-    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, background 0.3s ease-in-out;
+    transition:
+      opacity 0.3s ease-in-out,
+      width 0.3s ease-in-out,
+      height 0.3s ease-in-out,
+      background 0.3s ease-in-out;
 
     &[|animated] {
       overflow: hidden;
@@ -145,7 +149,13 @@ export const TableError = observer<Props>(function TableError({ model, loading,
   }, [errorInfo, model.source.error]);
 
   return styled(style)(
-    <error {...use({ animated, collapsed: !errorInfo.display, errorHidden })} className={className}>
+    <error
+      role="status"
+      aria-label={error.message}
+      tabIndex={0}
+      {...use({ animated, collapsed: !errorInfo.display, errorHidden })}
+      className={className}
+    >
       <error-body>
         <IconOrImage icon={icon} title={error.message} onClick={() => errorInfo.show()} />
         <error-message>{error.message}</error-message>
diff --git a/webapp/packages/plugin-user-profile/src/UserInfo.tsx b/webapp/packages/plugin-user-profile/src/UserInfo.tsx
index f252324b40..df7f2eb9a4 100644
--- a/webapp/packages/plugin-user-profile/src/UserInfo.tsx
+++ b/webapp/packages/plugin-user-profile/src/UserInfo.tsx
@@ -24,9 +24,14 @@ export const UserInfo = observer<Props>(function UserInfo({ info }) {
   const style = useS(styles);
 
   return (
-    <div className={s(style, { user: true })} title={translate('plugin_user_profile_menu')} onClick={() => userProfileOptionsPanelService.open()}>
+    <Clickable
+      as="div"
+      className={s(style, { user: true })}
+      title={translate('plugin_user_profile_menu')}
+      onClick={() => userProfileOptionsPanelService.open()}
+    >
       <IconOrImage className={s(style, { iconOrImage: true })} icon="/icons/plugin_user_profile_m.svg" />
       <div className={s(style, { userName: true })}>{info.displayName || info.userId}</div>
-    </div>
+    </Clickable>
   );
 });

From d8acc8500cb659e5b17e4cf0212896b19a012aae Mon Sep 17 00:00:00 2001
From: naumov <iamemptyhuh@gmail.com>
Date: Tue, 14 May 2024 14:30:14 +0200
Subject: [PATCH 2/2] CB-5085 add lazy import

---
 webapp/packages/core-blocks/src/ClickableLoader.ts | 10 ++++++++++
 webapp/packages/core-blocks/src/index.ts           |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 webapp/packages/core-blocks/src/ClickableLoader.ts

diff --git a/webapp/packages/core-blocks/src/ClickableLoader.ts b/webapp/packages/core-blocks/src/ClickableLoader.ts
new file mode 100644
index 0000000000..2ba1eb7992
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ClickableLoader.ts
@@ -0,0 +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.
+ */
+import { importLazyComponent } from './importLazyComponent';
+
+export const Clickable = importLazyComponent(() => import('./Clickable').then(m => m.Clickable));
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 3a29a8bde7..3915af37e3 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -236,4 +236,4 @@ export * from './useMergeRefs';
 export * from './usePasswordValidation';
 export * from './manifest';
 export * from './importLazyComponent';
-export * from './Clickable';
+export * from './ClickableLoader';