fix: update

Author: claytonlin1110

assets/preview.less

@@ -58,9 +58,12 @@
     height: 40px;
     color: #fff;
     background: rgba(0, 0, 0, 0.3);
+    border: 0;
+    padding: 0;
     border-radius: 9999px;
     transform: translateY(-50%);
     cursor: pointer;
+    font: inherit;
 
     &-disabled {
       cursor: default;
@@ -104,6 +107,10 @@
     &-action {
       color: #fff;
       cursor: pointer;
+      border: 0;
+      padding: 0;
+      background: transparent;
+      font: inherit;
 
       &-disabled {
         cursor: default;

src/Image.tsx

@@ -211,7 +211,20 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
 
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onPreview(event as any);
+
+      const rect = (event.target as HTMLDivElement).getBoundingClientRect();
+      const left = rect.x + rect.width / 2;
+      const top = rect.y + rect.height / 2;
+
+      if (groupContext) {
+        groupContext.onPreview(imageId, src, left, top);
+      } else {
+        setMousePosition({
+          x: left,
+          y: top,
+        });
+        triggerPreviewOpen(true);
+      }
     }
   };
 
@@ -226,8 +239,13 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         onClick={canPreview ? onPreview : onClick}
         role={canPreview ? 'button' : otherProps.role}
         tabIndex={canPreview && otherProps.tabIndex == null ? 0 : otherProps.tabIndex}
-        aria-label={canPreview ? (alt || 'Preview image') : otherProps['aria-label']}
-        onKeyDown={onPreviewKeyDown}
+        aria-label={
+          canPreview ? (otherProps['aria-label'] ?? alt ?? 'Preview image') : otherProps['aria-label']
+        }
+        onKeyDown={event => {
+          onPreviewKeyDown(event);
+          (otherProps as any).onKeyDown?.(event);
+        }}
         style={{
           width,
           height,

tests/preview.test.tsx

@@ -1162,6 +1162,20 @@ describe('Preview', () => {
     expect(document.querySelector('.rc-image-preview')).toBeTruthy();
   });
 
+  it('Pressing Space on image wrapper should open preview', () => {
+    const { container } = render(<Image src="src" alt="keyboard open space" />);
+
+    const wrapper = container.querySelector('.rc-image') as HTMLElement;
+    wrapper.focus();
+    fireEvent.keyDown(wrapper, { key: ' ' });
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(document.querySelector('.rc-image-preview')).toBeTruthy();
+  });
+
   it('Preview dialog should have role dialog and receive focus', () => {
     render(<Image src="src" alt="dialog a11y" preview={{ open: true }} />);