LotusGuild/cinny
3
0
Fork 0
Code Issues 45 Pull Requests 4 Actions 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/features/add-existing/AddExisting.tsx
+11 -3
View File
@@ -185,13 +185,21 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#addexisting-dialog-1',
clickOutsideDeactivates: true,
onDeactivate: requestClose,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300" style={modalStyle}>
<Modal
id="addexisting-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="addexisting-dialog-1-title"
tabIndex={-1}
size="300"
style={modalStyle}
>
<Box grow="Yes" direction="Column">
<Header
size="500"
@@ -201,7 +209,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
}}
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="addexisting-dialog-1-title" as="h2" size="H4">
Add Existing
</Text>
</Box>
src/app/features/common-settings/general/DeleteMyMessages.tsx
+11 -3
View File
@@ -78,13 +78,21 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#deletemymessages-dialog-1',
onDeactivate: requestClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="deletemymessages-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="deletemymessages-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -94,7 +102,7 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="deletemymessages-dialog-1-title" as="h2" size="H4">
Delete all your messages
</Text>
</Box>
src/app/features/common-settings/general/RoomEncryption.tsx
+11 -3
View File
@@ -108,13 +108,21 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#roomencryption-dialog-1',
onDeactivate: () => setPrompt(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="roomencryption-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="roomencryption-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -124,7 +132,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="roomencryption-dialog-1-title" as="h2" size="H4">
Enable Encryption
</Text>
</Box>
src/app/features/common-settings/general/RoomUpgrade.tsx
+11 -3
View File
@@ -89,13 +89,21 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#roomupgrade-dialog-1',
onDeactivate: requestClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="roomupgrade-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="roomupgrade-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -105,7 +113,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="roomupgrade-dialog-1-title" as="h2" size="H4">
{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}
</Text>
</Box>
src/app/features/create-room/CreateRoomModal.tsx
+12 -3
View File
@@ -44,13 +44,22 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#createroommodal-dialog-1',
clickOutsideDeactivates: true,
onDeactivate: closeDialog,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300" flexHeight style={modalStyle}>
<Modal
id="createroommodal-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="createroommodal-dialog-1-title"
tabIndex={-1}
size="300"
flexHeight
style={modalStyle}
>
<Box direction="Column">
<Header
size="500"
@@ -60,7 +69,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
}}
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="createroommodal-dialog-1-title" as="h2" size="H4">
{type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
</Text>
</Box>
src/app/features/create-space/CreateSpaceModal.tsx
+12 -3
View File
@@ -43,13 +43,22 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#createspacemodal-dialog-1',
clickOutsideDeactivates: true,
onDeactivate: closeDialog,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300" flexHeight style={modalStyle}>
<Modal
id="createspacemodal-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="createspacemodal-dialog-1-title"
tabIndex={-1}
size="300"
flexHeight
style={modalStyle}
>
<Box direction="Column">
<Header
size="500"
@@ -60,7 +69,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
}}
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="createspacemodal-dialog-1-title" as="h2" size="H4">
New Space
</Text>
</Box>
src/app/features/room-nav/RoomNavItem.tsx
+9 -2
View File
@@ -155,13 +155,20 @@ function RenameRoomDialog({ room, onClose }: RenameRoomDialogProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#roomnavitem-dialog',
onDeactivate: onClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" aria-labelledby="rename-room-dialog-title">
<Dialog
id="roomnavitem-dialog"
role="dialog"
aria-modal="true"
tabIndex={-1}
variant="Surface"
aria-labelledby="rename-room-dialog-title"
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
src/app/features/room-settings/RoomServerACL.tsx
+5 -1
View File
@@ -392,13 +392,17 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#roomserveracl-dialog',
onDeactivate: () => setPrompt(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog
id="roomserveracl-dialog"
role="dialog"
aria-modal="true"
tabIndex={-1}
variant="Surface"
aria-labelledby="server-acl-confirm-title"
style={modalStyle}
src/app/features/room/jump-to-time/JumpToTime.tsx
+13 -3
View File
@@ -94,13 +94,21 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#jumptotime-dialog-1',
onDeactivate: onCancel,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="jumptotime-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="jumptotime-dialog-1-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -110,7 +118,9 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
size="500"
>
<Box grow="Yes">
<Text size="H4">Jump to Time</Text>
<Text id="jumptotime-dialog-1-title" size="H4">
Jump to Time
</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
src/app/features/room/message/ForwardMessageDialog.tsx
+6 -1
View File
@@ -420,6 +420,11 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
}}
>
<Modal
id="forwardmessagedialog-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="forwardmessagedialog-dialog-1-title"
tabIndex={-1}
size="400"
style={{
maxHeight: '480px',
@@ -435,7 +440,7 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
>
<Box grow="Yes">
<Text as="h2" size="H4" truncate>
<Text id="forwardmessagedialog-dialog-1-title" as="h2" size="H4" truncate>
Forward message
</Text>
</Box>
src/app/features/room/message/Message.tsx
+25 -6
View File
@@ -639,13 +639,20 @@ export const MessageDeleteItem = as<
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#message-dialog-1',
onDeactivate: handleClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Dialog
id="message-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="message-dialog-1-title"
tabIndex={-1}
variant="Surface"
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -655,7 +662,9 @@ export const MessageDeleteItem = as<
size="500"
>
<Box grow="Yes">
<Text size="H4">Delete Message</Text>
<Text id="message-dialog-1-title" size="H4">
Delete Message
</Text>
</Box>
<IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
@@ -769,13 +778,21 @@ export const MessageReportItem = as<
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#message-dialog-2',
onDeactivate: handleClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface" style={modalStyle}>
<Dialog
id="message-dialog-2"
role="dialog"
aria-modal="true"
aria-labelledby="message-dialog-2-title"
tabIndex={-1}
variant="Surface"
style={modalStyle}
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -785,7 +802,9 @@ export const MessageReportItem = as<
size="500"
>
<Box grow="Yes">
<Text size="H4">Report Message</Text>
<Text id="message-dialog-2-title" size="H4">
Report Message
</Text>
</Box>
<IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
src/app/features/settings/account/Profile.tsx
+23 -5
View File
@@ -181,13 +181,22 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#profile-dialog-1',
onDeactivate: handleRemoveUpload,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal className={ModalWide} variant="Surface" size="500">
<Modal
id="profile-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="profile-dialog-1-title"
tabIndex={-1}
className={ModalWide}
variant="Surface"
size="500"
>
<ImageEditor
name={imageFile?.name ?? 'Unnamed'}
url={imageFileURL}
@@ -203,13 +212,20 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#profile-dialog-2',
onDeactivate: () => setAlertRemove(false),
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Dialog
id="profile-dialog-2"
role="dialog"
aria-modal="true"
aria-labelledby="profile-dialog-1-title"
tabIndex={-1}
variant="Surface"
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -219,7 +235,9 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
size="500"
>
<Box grow="Yes">
<Text size="H4">Remove Avatar</Text>
<Text id="profile-dialog-1-title" size="H4">
Remove Avatar
</Text>
</Box>
<IconButton
size="300"