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
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, DefaultReset, toRem } from 'folds';
|
|
|
|
export const Editor = style([
|
|
DefaultReset,
|
|
{
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R400,
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
export const EditorOptions = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S200,
|
|
},
|
|
]);
|
|
|
|
// The composer's before | editable | after row. It must NOT wrap: folds'
|
|
// Scroll (the editable's wrapper) is `width: 100%`, so a wrapping row always
|
|
// breaks into three stacked lines (before / editable / after) — the "wonky"
|
|
// phone composer. Narrow viewports keep one row by collapsing the secondary
|
|
// buttons behind the "+" overflow instead (RoomInput `compact`).
|
|
export const EditorInputRow = style({
|
|
minWidth: 0,
|
|
});
|
|
|
|
export const EditorTextareaScroll = style({});
|
|
|
|
export const EditorTextarea = style([
|
|
DefaultReset,
|
|
{
|
|
flexGrow: 1,
|
|
height: '100%',
|
|
padding: `${toRem(13)} ${toRem(1)}`,
|
|
'@media': {
|
|
// Phone-width composer rows carry 44px touch targets (MobileTouchTarget),
|
|
// so the row is 60px instead of 48px; pad the text to keep it level with
|
|
// the buttons instead of hugging the top of the row. Only when the row
|
|
// actually has before/after buttons (not the edit-message editor).
|
|
'(max-width: 750px)': {
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:not(:only-child) &`]: {
|
|
paddingTop: toRem(19),
|
|
paddingBottom: toRem(19),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:first-child &`]: {
|
|
paddingLeft: toRem(13),
|
|
},
|
|
[`${EditorTextareaScroll}:last-child &`]: {
|
|
paddingRight: toRem(13),
|
|
},
|
|
'&:focus': {
|
|
outline: 'none',
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderContainer = style([
|
|
DefaultReset,
|
|
{
|
|
// [Gitea #222] folds' Placeholder opacity (0.5) lands at ~2.3:1 on the
|
|
// composer surface; P300 keeps it visibly secondary at AA contrast.
|
|
opacity: config.opacity.P300,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
export const EditorPlaceholderTextVisual = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'block',
|
|
paddingTop: toRem(13),
|
|
paddingLeft: toRem(1),
|
|
'@media': {
|
|
'(max-width: 750px)': {
|
|
selectors: {
|
|
[`${EditorTextareaScroll}:not(:only-child) &`]: { paddingTop: toRem(19) },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const EditorToolbarBase = style({
|
|
padding: `0 ${config.borderWidth.B300}`,
|
|
});
|
|
|
|
export const EditorToolbar = style({
|
|
padding: config.space.S100,
|
|
});
|
|
|
|
export const MarkdownBtnBox = style({
|
|
paddingRight: config.space.S100,
|
|
});
|