Lotus CIandClaude Opus 5.5
ce8ed89fdc
CI / Build & Quality Checks (push) Canceled after 0s
CI / Trigger Desktop Build (push) Canceled after 0s
CI / Secret scan (gitleaks) (push) Canceled after 0s
CI / Docker image build & smoke test (push) Canceled after 0s
CI / Playwright smoke (e2e) (push) Canceled after 0s
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
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Box,
|
|
config,
|
|
Header,
|
|
Icon,
|
|
IconButton,
|
|
Icons,
|
|
Modal,
|
|
Overlay,
|
|
OverlayBackdrop,
|
|
OverlayCenter,
|
|
Scroll,
|
|
Text,
|
|
} from 'folds';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
|
|
import { SpaceProvider } from '../../hooks/useSpace';
|
|
import { CreateSpaceForm } from './CreateSpace';
|
|
import {
|
|
useCloseCreateSpaceModal,
|
|
useCreateSpaceModalState,
|
|
} from '../../state/hooks/createSpaceModal';
|
|
import { CreateSpaceModalState } from '../../state/createSpaceModal';
|
|
import { stopPropagation } from '../../utils/keyboard';
|
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
|
|
|
type CreateSpaceModalProps = {
|
|
state: CreateSpaceModalState;
|
|
};
|
|
function CreateSpaceModal({ state }: CreateSpaceModalProps) {
|
|
const { spaceId } = state;
|
|
const closeDialog = useCloseCreateSpaceModal();
|
|
const modalStyle = useModalStyle(480);
|
|
|
|
const allJoinedRooms = useAllJoinedRoomsSet();
|
|
const getRoom = useGetRoom(allJoinedRooms);
|
|
const space = spaceId ? getRoom(spaceId) : undefined;
|
|
|
|
return (
|
|
<SpaceProvider value={space ?? null}>
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<OverlayCenter>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
fallbackFocus: '#createspacemodal-dialog-1',
|
|
clickOutsideDeactivates: true,
|
|
onDeactivate: closeDialog,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<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"
|
|
style={{
|
|
padding: config.space.S200,
|
|
paddingLeft: config.space.S400,
|
|
borderBottomWidth: config.borderWidth.B300,
|
|
}}
|
|
>
|
|
<Box grow="Yes">
|
|
<Text id="createspacemodal-dialog-1-title" as="h2" size="H4">
|
|
New Space
|
|
</Text>
|
|
</Box>
|
|
<Box shrink="No">
|
|
<IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Box>
|
|
</Header>
|
|
<Scroll size="300" hideTrack>
|
|
<Box
|
|
style={{
|
|
padding: config.space.S400,
|
|
paddingRight: config.space.S200,
|
|
}}
|
|
direction="Column"
|
|
gap="500"
|
|
>
|
|
<CreateSpaceForm space={space} onCreate={closeDialog} />
|
|
</Box>
|
|
</Scroll>
|
|
</Box>
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
</SpaceProvider>
|
|
);
|
|
}
|
|
|
|
export function CreateSpaceModalRenderer() {
|
|
const state = useCreateSpaceModalState();
|
|
|
|
if (!state) return null;
|
|
return <CreateSpaceModal state={state} />;
|
|
}
|