LotusGuild/cinny
3
0
Fork 0
Code Issues 45 Pull Requests 3 Actions 2 Packages Projects Releases Wiki Activity

fix(a11y): 36 modal dialogs announce themselves and take focus (#185)
CI / Build & Quality Checks (push) Canceled after 0s
Details
CI / Trigger Desktop Build (push) Canceled after 0s
Details
CI / Secret scan (gitleaks) (push) Canceled after 0s
Details
CI / Docker image build & smoke test (push) Canceled after 0s
Details
CI / Playwright smoke (e2e) (push) Canceled after 0s
Details

Browse Source 
Most modals rendered a folds Dialog/Modal with no role and no name, and
their focus traps used `initialFocus: false`, so focus stayed behind the
modal and a screen reader never announced it.

- 32 dialogs with a visible heading: role="dialog", aria-modal,
  aria-labelledby → the heading (given an id), tabIndex=-1.
- 4 dialogs that already had a name (Leave Room, room topic viewer,
  server ACL, room-nav prompt): role + aria-modal.
- Their focus traps drop `initialFocus: false` for focus-trap's default
  (keep an already-focused autoFocus field, else the first tabbable
  element) with the dialog itself as fallbackFocus, so a dialog without
  a tabbable node can't crash the trap. Traps that live in a parent
  (UIA stages, Logout, Forward, Invite) get the semantics only.
- The file drop overlay is deliberately left alone (not a dialog).

Checked at runtime: Join with Address, Delete Message, Report Message,
Leave Room and Logout open as named dialogs with focus inside and close
with Escape (Tab first when a text field has focus — the shared
stopPropagation keeps Escape from discarding typed text, by design).
The axe e2e spec (6 tests) passes; eslint warnings unchanged (46).
17 modals with no heading (image/file viewers, loading screens) remain.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
Lotus CI
2026-09-24 13:06:10 -04:00
co-authored by Claude Opus 5.5
parent 359c79a440
commit ce8ed89fdc
31 changed files with 350 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/DeviceVerification.tsx
+11 -3
View File
@@ -365,15 +365,23 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#deviceverification-dialog-1',
clickOutsideDeactivates: false,
escapeDeactivates: false,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="deviceverification-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="deviceverification-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header style={DialogHeaderStyles} variant="Surface" size="500">
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="deviceverification-dialog-1-title" as="h2" size="H4">
Device Verification
</Text>
</Box>
src/app/components/DeviceVerificationSetup.tsx
+20 -4
View File
@@ -293,7 +293,15 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
const modalStyle = useModalStyle(480);
return (
<Dialog ref={ref} style={modalStyle}>
<Dialog
id="deviceverificationsetup-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="deviceverificationsetup-dialog-1-title"
tabIndex={-1}
ref={ref}
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -303,7 +311,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="deviceverificationsetup-dialog-1-title" as="h2" size="H4">
Setup Device Verification
</Text>
</Box>
@@ -331,7 +339,15 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
const modalStyle = useModalStyle(480);
return (
<Dialog ref={ref} style={modalStyle}>
<Dialog
id="deviceverificationsetup-dialog-2"
role="dialog"
aria-modal="true"
aria-labelledby="deviceverificationsetup-dialog-2-title"
tabIndex={-1}
ref={ref}
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -341,7 +357,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="deviceverificationsetup-dialog-2-title" as="h2" size="H4">
Reset Device Verification
</Text>
</Box>
src/app/components/LogoutDialog.tsx
+11 -2
View File
@@ -52,7 +52,16 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
const ongoingLogout = logoutState.status === AsyncStatus.Loading;
return (
<Dialog variant="Surface" ref={ref} style={modalStyle}>
<Dialog
id="logoutdialog-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="logoutdialog-dialog-1-title"
tabIndex={-1}
variant="Surface"
ref={ref}
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -62,7 +71,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="logoutdialog-dialog-1-title" as="h2" size="H4">
Logout
</Text>
</Box>
src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+9 -2
View File
@@ -189,14 +189,21 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
escapeDeactivates: stopPropagation,
}}
>
<Dialog style={modalStyle}>
<Dialog
id="inviteuserprompt-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="inviteuserprompt-dialog-1-title"
tabIndex={-1}
style={modalStyle}
>
<Box grow="Yes" direction="Column">
<Header
size="500"
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
>
<Box grow="Yes">
<Text size="H4" truncate>
<Text id="inviteuserprompt-dialog-1-title" size="H4" truncate>
{t('Organisms.InviteUser.invite')}
</Text>
</Box>
src/app/components/join-address-prompt/JoinAddressPrompt.tsx
+11 -3
View File
@@ -67,13 +67,21 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#joinaddressprompt-dialog-1',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="joinaddressprompt-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="joinaddressprompt-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -82,7 +90,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="joinaddressprompt-dialog-1-title" as="h2" size="H4">
Join with Address
</Text>
</Box>
src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
+10 -2
View File
@@ -52,13 +52,21 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#leaveroomprompt-dialog',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" aria-labelledby="leave-room-dialog-title" style={modalStyle}>
<Dialog
id="leaveroomprompt-dialog"
role="dialog"
aria-modal="true"
tabIndex={-1}
variant="Surface"
aria-labelledby="leave-room-dialog-title"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
+11 -3
View File
@@ -52,13 +52,21 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#leavespaceprompt-dialog-1',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="leavespaceprompt-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="leavespaceprompt-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -68,7 +76,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="leavespaceprompt-dialog-1-title" as="h2" size="H4">
Leave Space
</Text>
</Box>
src/app/components/room-topic-viewer/RoomTopicViewer.tsx
+4
View File
@@ -26,6 +26,10 @@ export const RoomTopicViewer = as<
return (
<Modal
id="roomtopicviewer-dialog"
role="dialog"
aria-modal="true"
tabIndex={-1}
size="300"
flexHeight
className={classNames(css.ModalFlex, className)}
src/app/components/suspicious-link/SuspiciousLink.tsx
+11 -3
View File
@@ -59,13 +59,21 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#suspiciouslink-dialog-1',
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={{ maxWidth: 440 }}>
<Dialog
id="suspiciouslink-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="suspiciouslink-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={{ maxWidth: 440 }}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -75,7 +83,7 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="suspiciouslink-dialog-1-title" as="h2" size="H4">
This link doesn&apos;t go where it says
</Text>
</Box>
src/app/components/uia-stages/DummyStage.tsx
+8 -2
View File
@@ -15,10 +15,16 @@ function DummyErrorDialog({
onCancel: () => void;
}) {
return (
<Dialog>
<Dialog
id="dummystage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="dummystage-dialog-1-title"
tabIndex={-1}
>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text as="h2" size="H4">
<Text id="dummystage-dialog-1-title" as="h2" size="H4">
{title}
</Text>
<Text>{message}</Text>
src/app/components/uia-stages/EmailStage.tsx
+16 -4
View File
@@ -28,7 +28,13 @@ function EmailErrorDialog({
};
return (
<Dialog>
<Dialog
id="emailstage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="emailstage-dialog-1-title"
tabIndex={-1}
>
<Box
as="form"
onSubmit={handleFormSubmit}
@@ -37,7 +43,7 @@ function EmailErrorDialog({
gap="400"
>
<Box direction="Column" gap="100">
<Text as="h2" size="H4">
<Text id="emailstage-dialog-1-title" as="h2" size="H4">
{title}
</Text>
<Text>{message}</Text>
@@ -145,10 +151,16 @@ export function EmailStageDialog({
if (emailTokenState.status === AsyncStatus.Success) {
return (
<Dialog>
<Dialog
id="emailstage-dialog-2"
role="dialog"
aria-modal="true"
aria-labelledby="emailstage-dialog-2-title"
tabIndex={-1}
>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text as="h2" size="H4">
<Text id="emailstage-dialog-2-title" as="h2" size="H4">
Verification Request Sent
</Text>
<Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>
src/app/components/uia-stages/PasswordStage.tsx
+8 -2
View File
@@ -36,7 +36,13 @@ export function PasswordStage({
};
return (
<Dialog>
<Dialog
id="passwordstage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="passwordstage-dialog-1-title"
tabIndex={-1}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -45,7 +51,7 @@ export function PasswordStage({
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="passwordstage-dialog-1-title" as="h2" size="H4">
{t('Organisms.PasswordStage.account_password')}
</Text>
</Box>
src/app/components/uia-stages/ReCaptchaStage.tsx
+10 -2
View File
@@ -14,10 +14,18 @@ function ReCaptchaErrorDialog({
onCancel: () => void;
}) {
return (
<Dialog>
<Dialog
id="recaptchastage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="recaptchastage-dialog-1-title"
tabIndex={-1}
>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text size="H4">{title}</Text>
<Text id="recaptchastage-dialog-1-title" size="H4">
{title}
</Text>
<Text>{message}</Text>
</Box>
<Button variant="Critical" fill="None" outlined onClick={onCancel}>
src/app/components/uia-stages/RegistrationTokenStage.tsx
+8 -2
View File
@@ -26,7 +26,13 @@ function RegistrationTokenErrorDialog({
};
return (
<Dialog>
<Dialog
id="registrationtokenstage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="registrationtokenstage-dialog-1-title"
tabIndex={-1}
>
<Box
as="form"
onSubmit={handleFormSubmit}
@@ -35,7 +41,7 @@ function RegistrationTokenErrorDialog({
gap="400"
>
<Box direction="Column" gap="100">
<Text as="h2" size="H4">
<Text id="registrationtokenstage-dialog-1-title" as="h2" size="H4">
{title}
</Text>
<Text>{message}</Text>
src/app/components/uia-stages/SSOStage.tsx
+8 -2
View File
@@ -45,7 +45,13 @@ export function SSOStage({
}, [ssoWindow, handleSubmit, ssoRedirectURL]);
return (
<Dialog>
<Dialog
id="ssostage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="ssostage-dialog-1-title"
tabIndex={-1}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -54,7 +60,7 @@ export function SSOStage({
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="ssostage-dialog-1-title" as="h2" size="H4">
SSO Login
</Text>
</Box>
src/app/components/uia-stages/TermsStage.tsx
+8 -2
View File
@@ -15,10 +15,16 @@ function TermsErrorDialog({
onCancel: () => void;
}) {
return (
<Dialog>
<Dialog
id="termsstage-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="termsstage-dialog-1-title"
tabIndex={-1}
>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text as="h2" size="H4">
<Text id="termsstage-dialog-1-title" as="h2" size="H4">
{title}
</Text>
<Text>{message}</Text>
src/app/components/user-profile/PowerChip.tsx
+20 -6
View File
@@ -55,20 +55,27 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#powerchip-dialog-1',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Dialog
id="powerchip-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="powerchip-dialog-1-title"
tabIndex={-1}
variant="Surface"
>
<Header
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="powerchip-dialog-1-title" as="h2" size="H4">
Self Demotion
</Text>
</Box>
@@ -107,20 +114,27 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#powerchip-dialog-2',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Dialog
id="powerchip-dialog-2"
role="dialog"
aria-modal="true"
aria-labelledby="powerchip-dialog-2-title"
tabIndex={-1}
variant="Surface"
>
<Header
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="powerchip-dialog-2-title" as="h2" size="H4">
Shared Power
</Text>
</Box>
src/app/components/user-profile/UserHero.tsx
+7 -1
View File
@@ -79,13 +79,18 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#userhero-dialog-1',
onDeactivate: () => setViewAvatar(undefined),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal
id="userhero-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="userhero-dialog-1-title"
tabIndex={-1}
size="500"
className={ModalMobileFull}
onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
@@ -131,6 +136,7 @@ export function UserHeroName({
<Box grow="Yes" direction="Column" gap="0">
<Box alignItems="Baseline" gap="200" wrap="Wrap">
<Text
id="userhero-dialog-1-title"
size="H4"
className={classNames(BreakWord, LineClamp3)}
title={displayName ?? username}