jaredandClaude Opus 5
6aa77552b8
CI / Build & Quality Checks (push) Successful in 1m38s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 8s
CI / Trigger Desktop Build (push) Successful in 9s
CI / Playwright smoke (e2e) (push) Successful in 8m52s
e2e/a11y.spec.ts runs @axe-core/playwright (WCAG 2.x A/AA) over the login
page, room timeline + composer, message options menu, thread panel, user
settings and room settings, failing on critical/serious findings other
than colour contrast (reported, not gated: generated avatar colours and
portal false positives). Aria snapshots of the composer, message menu,
thread panel and settings nav catch lost names/roles/live regions.
Burned down what the first run found:
- NavItem: callers' aria-selected is not valid on a div (axe critical);
it now drives data-selected for styling and aria-current="page".
- Composer placeholder at 0.5 opacity was ~2.3:1; now P300.
- Voice-limit and explore custom-limit number inputs had no label.
- Thread panel is an <aside aria-label="Thread">; the settings modal is a
role=dialog; the settings sections are a <nav>; the message action
menu carries data-message-menu + a label.
Also allows WebKit's CI wording for the well-known probe ("Could not
connect … Connection refused") that failed run #2003.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
|
|
import { stopPropagation } from '../utils/keyboard';
|
|
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
|
|
|
|
type Modal500Props = {
|
|
requestClose: () => void;
|
|
children: ReactNode;
|
|
};
|
|
export function Modal500({ requestClose, children }: Modal500Props) {
|
|
const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
|
|
return (
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<OverlayCenter>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
clickOutsideDeactivates: true,
|
|
onDeactivate: requestClose,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Modal
|
|
size="500"
|
|
variant="Background"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
// On mobile expand to fill the viewport. On desktop fall back to the
|
|
// folds `size="500"` width (~50rem) — overriding maxWidth here would
|
|
// squish the two-pane settings layout.
|
|
style={
|
|
isMobile
|
|
? {
|
|
width: '100%',
|
|
height: '100%',
|
|
maxWidth: '100%',
|
|
maxHeight: '100%',
|
|
borderRadius: 0,
|
|
overflow: 'hidden auto',
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{children}
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
);
|
|
}
|