From 18c8456f24c7e72cd5a62b6ebd73df1d8a7a5ada Mon Sep 17 00:00:00 2001
From: Kirill Dyachkovskiy
 <81510334+KirillDyachkovskiy@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:01:54 +0300
Subject: [PATCH] fix(FilePreview): Fix FilePreview a11y and styles (#102)

---
 src/components/FilePreview/FilePreview.scss   | 10 ++++-
 src/components/FilePreview/FilePreview.tsx    | 11 ++++--
 .../__stories__/FilePreview.stories.tsx       | 37 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/FilePreview/FilePreview.scss b/src/components/FilePreview/FilePreview.scss
index bdece132..a646f42a 100644
--- a/src/components/FilePreview/FilePreview.scss
+++ b/src/components/FilePreview/FilePreview.scss
@@ -44,15 +44,21 @@ $smallRoundedButtonSize: 24px;
         flex-direction: column;
         align-items: center;
 
-        cursor: pointer;
         position: relative;
         outline: none;
 
         box-shadow: var(--gc-card-box-shadow);
-        background-color: var(--_-color-base-background);
         border-radius: var(--_-border-radius);
         padding: 4px 10px;
 
+        &_clickable {
+            cursor: pointer;
+        }
+
+        &_hoverable {
+            background-color: var(--_-color-base-background);
+        }
+
         &::after {
             position: absolute;
             top: 0;
diff --git a/src/components/FilePreview/FilePreview.tsx b/src/components/FilePreview/FilePreview.tsx
index bc4e45b8..2fe9aa99 100644
--- a/src/components/FilePreview/FilePreview.tsx
+++ b/src/components/FilePreview/FilePreview.tsx
@@ -80,13 +80,16 @@ export function FilePreview({
         }
     }, [file, imageSrc]);
 
+    const clickable = Boolean(onClick);
+    const withActions = Boolean(actions?.length);
+
     return (
         <div className={cn(null, className)} data-qa={qa}>
             <div
-                className={cn('card')}
-                role="button"
-                onKeyDown={onKeyDown}
-                tabIndex={0}
+                className={cn('card', {clickable, hoverable: clickable || withActions})}
+                role={clickable ? 'button' : undefined}
+                onKeyDown={clickable ? onKeyDown : undefined}
+                tabIndex={clickable ? 0 : undefined}
                 onClick={onClick}
             >
                 {typeof previewSrc === 'string' ? (
diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
index 267f4116..0b02468b 100644
--- a/src/components/FilePreview/__stories__/FilePreview.stories.tsx
+++ b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {CircleExclamation, Link, Xmark} from '@gravity-ui/icons';
+import {Flex} from '@gravity-ui/uikit';
 import type {Meta, StoryFn} from '@storybook/react';
 
 import {FilePreview, FilePreviewProps} from '../FilePreview';
@@ -58,7 +59,6 @@ const DefaultTemplate: StoryFn<FilePreviewProps> = (args) => {
 };
 
 export const Default = DefaultTemplate.bind({});
-
 Default.args = {
     file: {name: 'my-file.docs', type: 'text/docs'} as File,
     onClick: () => {
@@ -72,3 +72,38 @@ Default.args = {
         },
     ],
 };
+
+const NoClickableTemplate: StoryFn<Omit<FilePreviewProps, 'actions'>> = (args) => {
+    return (
+        <Flex gap={4}>
+            <FilePreview {...args} file={{name: 'No clickable', type: 'text/docs'} as File} />
+            <FilePreview
+                {...args}
+                file={{name: 'No clickable with actions', type: 'text/docs'} as File}
+                actions={[
+                    {
+                        icon: Xmark,
+                        onClick: () => alert('Are you sure you want to delete the file?'),
+                        title: 'Close',
+                    },
+                ]}
+            />
+            <FilePreview
+                {...args}
+                file={{name: 'Clickable with actions', type: 'text/docs'} as File}
+                onClick={() => {
+                    window.open('https://disk.yandex.com', '_blank');
+                }}
+                actions={[
+                    {
+                        icon: Xmark,
+                        onClick: () => alert('Are you sure you want to delete the file?'),
+                        title: 'Close',
+                    },
+                ]}
+            />
+        </Flex>
+    );
+};
+
+export const NoClickable = NoClickableTemplate.bind({});