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
65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import parse from 'html-react-parser';
|
|
import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
|
|
import classNames from 'classnames';
|
|
import Linkify from 'linkify-react';
|
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
|
import * as css from './style.css';
|
|
import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
|
|
import { sanitizeCustomHtml } from '../../utils/sanitize';
|
|
import { RoomTopicContent } from '../../hooks/useRoomMeta';
|
|
|
|
export const RoomTopicViewer = as<
|
|
'div',
|
|
{
|
|
name: string;
|
|
topic: string | RoomTopicContent;
|
|
requestClose: () => void;
|
|
}
|
|
>(({ name, topic, requestClose, className, ...props }, ref) => {
|
|
const topicStr = typeof topic === 'string' ? topic : topic.topic;
|
|
const modalStyle = useModalStyle(480);
|
|
const isFormatted =
|
|
typeof topic !== 'string' &&
|
|
topic.format === 'org.matrix.custom.html' &&
|
|
typeof topic.formatted_body === 'string';
|
|
|
|
return (
|
|
<Modal
|
|
id="roomtopicviewer-dialog"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
tabIndex={-1}
|
|
size="300"
|
|
flexHeight
|
|
className={classNames(css.ModalFlex, className)}
|
|
aria-labelledby="room-topic-title"
|
|
style={modalStyle}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Header className={css.ModalHeader} variant="Surface" size="500">
|
|
<Box grow="Yes">
|
|
<Text as="h2" size="H4" truncate id="room-topic-title">
|
|
{name}
|
|
</Text>
|
|
</Box>
|
|
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Header>
|
|
<Scroll className={css.ModalScroll} size="300" hideTrack>
|
|
<Box className={css.ModalContent} direction="Column" gap="100">
|
|
<Text size="T300" className={css.ModalTopic} priority="400">
|
|
{isFormatted ? (
|
|
parse(sanitizeCustomHtml((topic as RoomTopicContent).formatted_body!))
|
|
) : (
|
|
<Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topicStr)}</Linkify>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
</Scroll>
|
|
</Modal>
|
|
);
|
|
});
|