feat: improve Image preview accessibility

Author: claytonlin1110

src/Image.tsx

@@ -203,6 +203,18 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     onClick?.(e);
   };
 
+  // ======================= Keyboard Preview =====================
+  const onPreviewKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
+    if (!canPreview) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onPreview(event as any);
+    }
+  };
+
   // =========================== Render ===========================
   return (
     <>
@@ -212,6 +224,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           [`${prefixCls}-error`]: status === 'error',
         })}
         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}
         style={{
           width,
           height,

src/Preview/Footer.tsx

@@ -95,15 +95,18 @@ export default function Footer(props: FooterProps) {
 
   const renderOperation = ({ type, disabled, onClick, icon }: RenderOperationParams) => {
     return (
-      <div
+      <button
+        type="button"
         key={type}
         className={clsx(actionCls, `${actionCls}-${type}`, {
           [`${actionCls}-disabled`]: !!disabled,
         })}
         onClick={onClick}
+        disabled={!!disabled}
+        aria-label={type}
       >
         {icon}
-      </div>
+      </button>
     );
   };
 

src/Preview/PrevNext.tsx

@@ -23,22 +23,28 @@ export default function PrevNext(props: PrevNextProps) {
 
   return (
     <>
-      <div
+      <button
+        type="button"
         className={clsx(switchCls, `${switchCls}-prev`, {
           [`${switchCls}-disabled`]: current === 0,
         })}
         onClick={() => onActive(-1)}
+        disabled={current === 0}
+        aria-label="Previous image"
       >
         {prev ?? left}
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         className={clsx(switchCls, `${switchCls}-next`, {
           [`${switchCls}-disabled`]: current === count - 1,
         })}
         onClick={() => onActive(1)}
+        disabled={current === count - 1}
+        aria-label="Next image"
       >
         {next ?? right}
-      </div>
+      </button>
     </>
   );
 }

src/Preview/index.tsx

@@ -195,6 +195,8 @@ const Preview: React.FC<PreviewProps> = props => {
   } = props;
 
   const imgRef = useRef<HTMLImageElement>();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const lastActiveRef = useRef<HTMLElement | null>(null);
   const groupContext = useContext(PreviewGroupContext);
   const showLeftOrRightSwitches = groupContext && count > 1;
   const showOperationsProgress = groupContext && count >= 1;
@@ -239,6 +241,20 @@ const Preview: React.FC<PreviewProps> = props => {
     }
   }, [open]);
 
+  // =========================== Focus ============================
+  useEffect(() => {
+    if (open) {
+      lastActiveRef.current = (document.activeElement as HTMLElement) || null;
+
+      if (wrapperRef.current) {
+        wrapperRef.current.focus();
+      }
+    } else if (!open && lastActiveRef.current) {
+      lastActiveRef.current.focus();
+      lastActiveRef.current = null;
+    }
+  }, [open]);
+
   // ========================== Image ===========================
   const onDoubleClick = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
     if (open) {
@@ -418,10 +434,15 @@ const Preview: React.FC<PreviewProps> = props => {
 
           return (
             <div
+              ref={wrapperRef}
               className={clsx(prefixCls, rootClassName, classNames.root, motionClassName, {
                 [`${prefixCls}-moving`]: isMoving,
               })}
               style={mergedStyle}
+              role="dialog"
+              aria-modal="true"
+              aria-label={alt || 'Image preview'}
+              tabIndex={-1}
             >
               {/* Mask */}
               <div

tests/preview.test.tsx

@@ -1139,4 +1139,36 @@ describe('Preview', () => {
     expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.popup.root);
     expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.popup.root);
   });
+
+  it('Image wrapper should be keyboard focusable when preview enabled', () => {
+    const { container } = render(<Image src="src" alt="keyboard test" />);
+
+    const wrapper = container.querySelector('.rc-image') as HTMLElement;
+    expect(wrapper).toHaveAttribute('role', 'button');
+    expect(wrapper).toHaveAttribute('tabindex', '0');
+  });
+
+  it('Pressing Enter on image wrapper should open preview', () => {
+    const { container } = render(<Image src="src" alt="keyboard open" />);
+
+    const wrapper = container.querySelector('.rc-image') as HTMLElement;
+    wrapper.focus();
+    fireEvent.keyDown(wrapper, { key: 'Enter' });
+
+    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 }} />);
+
+    const preview = document.querySelector('.rc-image-preview') as HTMLElement;
+    expect(preview).toHaveAttribute('role', 'dialog');
+    expect(preview).toHaveAttribute('aria-modal', 'true');
+    expect(preview).toHaveAttribute('aria-label', 'dialog a11y');
+    expect(document.activeElement).toBe(preview);
+  });
 });