fix: hover state on url preview image and make it keyboard friendly (#2777)

add hover state on url preview image and make it keyboard friendly

src/app/components/RenderMessageContent.tsx

@@ -64,12 +64,7 @@ export function RenderMessageContent({
     return (
       <UrlPreviewHolder>
         {filteredUrls.map((url) => (
-          <UrlPreviewCard
+          <UrlPreviewCard key={url} url={url} ts={ts} />
-            key={url}
-            url={url}
-            renderViewer={(p) => <ImageViewer {...p} />}
-            ts={ts}
-          />
         ))}
       </UrlPreviewHolder>
     );

src/app/components/url-preview/UrlPreview.css.tsx

@@ -23,6 +23,11 @@ export const UrlPreviewImg = style([
     objectPosition: 'center',
     flexShrink: 0,
     overflow: 'hidden',
+    cursor: 'pointer',
+
+    ':hover': {
+      filter: 'brightness(0.8)',
+    },
   },
 ]);
 

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
-import { RenderViewerProps, ImageOverlay } from '../ImageOverlay';
+import { ImageOverlay } from '../ImageOverlay';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
@@ -13,13 +13,13 @@ import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { ImageViewer } from '../image-viewer';
+import { onEnterOrSpace } from '../../utils/keyboard';
 
 const linkStyles = { color: color.Success.Main };
 
-export const UrlPreviewCard = as<
+export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
-  'div',
+  ({ url, ts, ...props }, ref) => {
-  { url: string; ts: number; renderViewer: (props: RenderViewerProps) => ReactNode }
->(({ url, ts, renderViewer, ...props }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState(false);
@@ -53,6 +53,8 @@ export const UrlPreviewCard = as<
               src={thumbUrl}
               alt={prev['og:title']}
               title={prev['og:title']}
+              tabIndex={0}
+              onKeyDown={(evt) => onEnterOrSpace(() => setViewer(true))(evt)}
               onClick={() => setViewer(true)}
             />
           )}
@@ -64,7 +66,7 @@ export const UrlPreviewCard = as<
               requestClose={() => {
                 setViewer(false);
               }}
-            renderViewer={renderViewer}
+              renderViewer={(p) => <ImageViewer {...p} />}
             />
           )}
           <UrlPreviewContent>
@@ -103,7 +105,8 @@ export const UrlPreviewCard = as<
         )}
       </UrlPreview>
     );
-});
+  }
+);
 
 export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
   const scrollRef = useRef<HTMLDivElement>(null);