CB-5085 make errors focusable

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));

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>

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}>

webapp/packages/core-blocks/src/index.ts

@@ -236,3 +236,4 @@ export * from './useMergeRefs';
 export * from './usePasswordValidation';
 export * from './manifest';
 export * from './importLazyComponent';
+export * from './ClickableLoader';

webapp/packages/plugin-data-viewer/src/TableViewer/TableError.tsx

@@ -83,7 +83,12 @@ export const TableError = observer<Props>(function TableError({ model, loading,
   }, [errorInfo, model.source.error]);
 
   return (
-    <div className={s(style, { error: true, animated, collapsed: !errorInfo.display, errorHidden }, className)}>
+    <div
+      role="status"
+      aria-label={error.message}
+      tabIndex={0}
+      className={s(style, { error: true, animated, collapsed: !errorInfo.display, errorHidden }, className)}
+    >
       <div className={s(style, { errorBody: true })}>
         <IconOrImage className={s(style, { iconOrImage: true })} icon={icon} title={error.message} onClick={() => errorInfo.show()} />
         <div className={s(style, { errorMessage: true })}>{error.message}</div>

webapp/packages/plugin-user-profile/src/UserInfo.tsx

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { IconOrImage, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Clickable, IconOrImage, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import type { UserInfo as IUserInfo } from '@cloudbeaver/core-sdk';
 
@@ -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>
   );
 });