dbeaver/pro#6061 fix: make Cell component accessible

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;

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

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

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