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 { CreateRoomForm } from './CreateRoom';
|
|
import {
|
|
useCloseCreateRoomModal,
|
|
useCreateRoomModalState,
|
|
} from '../../state/hooks/createRoomModal';
|
|
import { CreateRoomModalState } from '../../state/createRoomModal';
|
|
import { stopPropagation } from '../../utils/keyboard';
|
|
import { CreateRoomType } from '../../components/create-room/types';
|
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
|
|
|
type CreateRoomModalProps = {
|
|
state: CreateRoomModalState;
|
|
};
|
|
function CreateRoomModal({ state }: CreateRoomModalProps) {
|
|
const { spaceId, type } = state;
|
|
const closeDialog = useCloseCreateRoomModal();
|
|
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: '#createroommodal-dialog-1',
|
|
clickOutsideDeactivates: true,
|
|
onDeactivate: closeDialog,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<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"
|
|
style={{
|
|
padding: config.space.S200,
|
|
paddingLeft: config.space.S400,
|
|
}}
|
|
>
|
|
<Box grow="Yes">
|
|
<Text id="createroommodal-dialog-1-title" as="h2" size="H4">
|
|
{type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
|
|
</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"
|
|
>
|
|
<CreateRoomForm space={space} onCreate={closeDialog} defaultType={type} />
|
|
</Box>
|
|
</Scroll>
|
|
</Box>
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
</SpaceProvider>
|
|
);
|
|
}
|
|
|
|
export function CreateRoomModalRenderer() {
|
|
const state = useCreateRoomModalState();
|
|
|
|
if (!state) return null;
|
|
return <CreateRoomModal state={state} />;
|
|
}
|