LotusGuild/cinny
3
0
Fork 0
Code Issues 42 Pull Requests 2 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/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}
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"
src/app/pages/client/explore/Explore.tsx
+10 -3
View File
@@ -78,13 +78,20 @@ export function AddServer() {
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
fallbackFocus: '#explore-dialog-1',
clickOutsideDeactivates: true,
onDeactivate: () => setDialog(false),
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Dialog
id="explore-dialog-1"
role="dialog"
aria-modal="true"
aria-labelledby="explore-dialog-1-title"
tabIndex={-1}
variant="Surface"
>
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -94,7 +101,7 @@ export function AddServer() {
size="500"
>
<Box grow="Yes">
<Text as="h2" size="H4">
<Text id="explore-dialog-1-title" as="h2" size="H4">
Add Server
</Text>
</Box>