From 09aff9b08a32d4b3d11343118fd376d443ab4906 Mon Sep 17 00:00:00 2001
From: Sychev Andrey <nukemoore@gmail.com>
Date: Tue, 5 Aug 2025 17:20:56 +0200
Subject: [PATCH] dbeaver/pro#6061 fix: make Cell component accessible

---
 .../packages/core-blocks/src/Cell.module.css  |  5 +++
 webapp/packages/core-blocks/src/Cell.tsx      | 32 ++++++++++++++++---
 .../AuthProviderForm/ConfigurationsList.tsx   | 17 ++++------
 .../packages/plugin-help/src/WelcomeDocs.tsx  | 23 ++++++-------
 4 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Cell.module.css b/webapp/packages/core-blocks/src/Cell.module.css
index 9fd1d009a0..12ddd2ca5f 100644
--- a/webapp/packages/core-blocks/src/Cell.module.css
+++ b/webapp/packages/core-blocks/src/Cell.module.css
@@ -7,6 +7,7 @@
  */
 .main {
   position: relative;
+  color: var(--theme-on-surface);
 
   & .before {
     width: 24px;
@@ -25,6 +26,10 @@
   }
 }
 
+.full {
+  width: 100%;
+}
+
 .big {
   & .before {
     width: 32px;
diff --git a/webapp/packages/core-blocks/src/Cell.tsx b/webapp/packages/core-blocks/src/Cell.tsx
index f4db013061..fed19eea2e 100644
--- a/webapp/packages/core-blocks/src/Cell.tsx
+++ b/webapp/packages/core-blocks/src/Cell.tsx
@@ -11,6 +11,7 @@ import style from './Cell.module.css';
 import { Container } from './Containers/Container.js';
 import { s } from './s.js';
 import { useS } from './useS.js';
+import { useId } from 'react';
 
 interface Props {
   description?: React.ReactElement | string;
@@ -20,14 +21,31 @@ interface Props {
   big?: boolean;
   className?: string;
   children?: React.ReactNode;
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  href?: string;
+  target?: string;
+  as?: 'button' | 'div' | 'a';
 }
 
-export const Cell = observer<Props>(function Cell({ before, after, description, className, ripple = true, big, children, onClick }) {
+export const Cell = observer<Props>(function Cell({
+  before,
+  after,
+  description,
+  className,
+  ripple = true,
+  big,
+  as = 'button',
+  href,
+  target,
+  children,
+  onClick,
+}) {
   const styles = useS(style);
+  const Tag = as;
+  const descriptionId = useId();
 
   return (
-    <div className={s(styles, { ripple, big }, className)} onClick={onClick}>
+    <Tag aria-labelledby={descriptionId} href={href} target={target} className={s(styles, { ripple, big, full: true }, className)} onClick={onClick}>
       <Container className={s(styles, { main: true })} gap parent center dense>
         {before && (
           <Container className={s(styles, { before: true })} keepSize>
@@ -36,7 +54,11 @@ export const Cell = observer<Props>(function Cell({ before, after, description,
         )}
         <Container className={s(styles, { info: true })} zeroBasis>
           {children}
-          {description && <Container className={s(styles, { description: true })}>{description}</Container>}
+          {description && (
+            <Container id={descriptionId} className={s(styles, { description: true })}>
+              {description}
+            </Container>
+          )}
         </Container>
         {after && (
           <Container className={s(styles, { after: true })} keepSize>
@@ -44,6 +66,6 @@ export const Cell = observer<Props>(function Cell({ before, after, description,
           </Container>
         )}
       </Container>
-    </div>
+    </Tag>
   );
 });
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
index 9d0e9dea55..d3d79e50b6 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
@@ -17,7 +17,6 @@ import {
 import {
   Button,
   Cell,
-  Clickable,
   Container,
   Filter,
   getComputed,
@@ -141,15 +140,13 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
           const title = `${configuration.displayName}\n${configuration.description || ''}`;
           return (
             <Link key={configuration.id} title={title} wrapper onClick={() => login(false, provider, configuration)}>
-              <Clickable as="div">
-                <Cell
-                  className={s(style, { cell: true })}
-                  before={icon ? <IconOrImage className={s(style, { iconOrImage: true })} icon={icon} /> : undefined}
-                  description={configuration.description}
-                >
-                  {configuration.displayName}
-                </Cell>
-              </Clickable>
+              <Cell
+                className={s(style, { cell: true })}
+                before={icon ? <IconOrImage className={s(style, { iconOrImage: true })} icon={icon} /> : undefined}
+                description={configuration.description}
+              >
+                {configuration.displayName}
+              </Cell>
             </Link>
           );
         })}
diff --git a/webapp/packages/plugin-help/src/WelcomeDocs.tsx b/webapp/packages/plugin-help/src/WelcomeDocs.tsx
index 7fe793f218..8b80b21324 100644
--- a/webapp/packages/plugin-help/src/WelcomeDocs.tsx
+++ b/webapp/packages/plugin-help/src/WelcomeDocs.tsx
@@ -6,22 +6,23 @@
  * you may not use this file except in compliance with the License.
  */
 
-import { Cell, IconOrImage, Link, useTranslate } from '@cloudbeaver/core-blocks';
+import { Cell, IconOrImage, useTranslate } from '@cloudbeaver/core-blocks';
 import { observer } from 'mobx-react-lite';
 import { WEBSITE_LINKS } from '@cloudbeaver/core-links';
 
 export const WelcomeDocs = observer(function WelcomeDocs() {
   const translate = useTranslate();
   return (
-    <Link href={WEBSITE_LINKS.DOCS_PAGE} target="_blank" wrapper>
-      <Cell
-        before={<IconOrImage icon="/icons/documentation_link.svg" />}
-        description={translate('plugin_help_welcome_docs_description')}
-        className="tw:cursor-pointer tw:rounded-sm tw:overflow-hidden"
-        big
-      >
-        {translate('plugin_help_welcome_docs_label')}
-      </Cell>
-    </Link>
+    <Cell
+      before={<IconOrImage icon="/icons/documentation_link.svg" />}
+      description={translate('plugin_help_welcome_docs_description')}
+      className="tw:decoration-transparent!"
+      as="a"
+      href={WEBSITE_LINKS.DOCS_PAGE}
+      target="_blank"
+      big
+    >
+      {translate('plugin_help_welcome_docs_label')}
+    </Cell>
   );
 });