fix(a11y): open a message image from the keyboard (#164)
CI / Build & Quality Checks (push) Successful in 2m7s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 9s
CI / Trigger Desktop Build (push) Successful in 5s
CI / Playwright smoke (e2e) (push) Successful in 7m55s
CI / Build & Quality Checks (push) Successful in 2m7s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 9s
CI / Trigger Desktop Build (push) Successful in 5s
CI / Playwright smoke (e2e) (push) Successful in 7m55s
Timeline images were focusable (tabIndex 0) but only opened on click, so a keyboard user could Tab to one and do nothing with it, and screen readers heard a plain image. They are now role="button" labelled "View image: <name>" and open the viewer on Enter or Space. Focus already returns to the image when the viewer closes (checked for mouse and keyboard). Verified in Chromium: Tab → Enter opens the viewer, Escape returns focus to "View image: red.png", Space opens it again; chromium e2e suite 19 passed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
2b1f4ee5bc
commit
1ab7514741
@@ -47,6 +47,9 @@ type RenderImageProps = {
|
|||||||
onError: () => void;
|
onError: () => void;
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
tabIndex: number;
|
tabIndex: number;
|
||||||
|
role: 'button';
|
||||||
|
'aria-label': string;
|
||||||
|
onKeyDown: (evt: React.KeyboardEvent<HTMLElement>) => void;
|
||||||
};
|
};
|
||||||
export type ImageContentProps = {
|
export type ImageContentProps = {
|
||||||
body: string;
|
body: string;
|
||||||
@@ -188,6 +191,15 @@ export const ImageContent = as<'div', ImageContentProps>(
|
|||||||
onError: handleError,
|
onError: handleError,
|
||||||
onClick: () => (onOpenViewer ? onOpenViewer() : setViewer(true)),
|
onClick: () => (onOpenViewer ? onOpenViewer() : setViewer(true)),
|
||||||
tabIndex: 0,
|
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);
|
||||||
|
},
|
||||||
})}
|
})}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user