diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx index 8d1c5f2c1..47ece05e1 100644 --- a/src/app/components/message/content/ImageContent.tsx +++ b/src/app/components/message/content/ImageContent.tsx @@ -47,6 +47,9 @@ type RenderImageProps = { onError: () => void; onClick: () => void; tabIndex: number; + role: 'button'; + 'aria-label': string; + onKeyDown: (evt: React.KeyboardEvent) => void; }; export type ImageContentProps = { body: string; @@ -188,6 +191,15 @@ export const ImageContent = as<'div', ImageContentProps>( onError: handleError, onClick: () => (onOpenViewer ? onOpenViewer() : setViewer(true)), tabIndex: 0, + // [Gitea #164] Keyboard users could Tab to the image but not open it. + role: 'button', + 'aria-label': `View image: ${body}`, + onKeyDown: (evt) => { + if (evt.key !== 'Enter' && evt.key !== ' ') return; + evt.preventDefault(); + if (onOpenViewer) onOpenViewer(); + else setViewer(true); + }, })} )}