Lotus CIandClaude Opus 5.5
6f7a8f64e2
CI / Build & Quality Checks (pull_request) Successful in 4m24s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 11s
CI / Playwright smoke (e2e) (pull_request) Successful in 15m43s
SettingTile rendered its description in a <p>, and many tiles pass blocks (badges, Box, Text), so Settings had <div>/<p> inside <p> and React warned on every page. Render it as a <div>. UploadCardRenderer called startUpload() during render, which now updates the desktop taskbar-progress hook mid-render; start it from an effect instead. Refs #291 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import React, { ReactNode, useEffect, useId, useRef } from 'react';
|
|
import { Box, Text } from 'folds';
|
|
import { BreakWord } from '../../styles/Text.css';
|
|
|
|
type SettingTileProps = {
|
|
title?: ReactNode;
|
|
description?: ReactNode;
|
|
before?: ReactNode;
|
|
after?: ReactNode;
|
|
children?: ReactNode;
|
|
};
|
|
export function SettingTile({ title, description, before, after, children }: SettingTileProps) {
|
|
const titleId = useId();
|
|
const afterRef = useRef<HTMLDivElement>(null);
|
|
|
|
// [Gitea #185] The control in `after` is almost always an icon-only Switch
|
|
// (or a bare select/input) whose only visible label is this tile's title.
|
|
// Point it at the title so screen readers announce "Show Notifications,
|
|
// switch, on" instead of "switch, on". Explicit labels are left alone.
|
|
useEffect(() => {
|
|
if (!title || !afterRef.current) return;
|
|
afterRef.current
|
|
.querySelectorAll<HTMLElement>('[role="switch"], input, select, textarea, [role="combobox"]')
|
|
.forEach((el) => {
|
|
if (el.hasAttribute('aria-label') || el.hasAttribute('aria-labelledby')) return;
|
|
if (
|
|
el.tagName === 'INPUT' &&
|
|
el.id &&
|
|
afterRef.current?.querySelector(`label[for="${el.id}"]`)
|
|
)
|
|
return;
|
|
el.setAttribute('aria-labelledby', titleId);
|
|
});
|
|
});
|
|
|
|
return (
|
|
<Box alignItems="Center" gap="300">
|
|
{before && <Box shrink="No">{before}</Box>}
|
|
<Box grow="Yes" direction="Column" gap="100">
|
|
{title && (
|
|
<Text id={titleId} className={BreakWord} size="T300">
|
|
{title}
|
|
</Text>
|
|
)}
|
|
{description && (
|
|
// [Gitea #291] A <div>, not a <p>: many tiles pass blocks (badges,
|
|
// <Box>, <Text>) as the description, which is invalid inside a <p>.
|
|
<Text as="div" className={BreakWord} size="T200" priority="300">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
{after && (
|
|
<Box shrink="No" ref={afterRef}>
|
|
{after}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|