LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(a11y,perf): comprehensive icon button labels, toolbar a11y, timeline binary search

Browse Source 
A11y C-1: aria-label on 30+ remaining icon-only buttons across:
  - settings panels (close, reset, info, expand, remove, undo)
  - editor toolbar (bold, italic, underline, strike, code, spoiler,
    blockquote, code block, ordered/unordered list, headings 1-3)
  - auth stages (cancel buttons in SSO, Password stages)
  - device verification (cancel buttons)
  - password input (show/hide toggle with dynamic label)
  - event readers, account data editor close buttons
  - global emoji packs (add/remove buttons)
Perf-5: Replace O(N×T) getTimelineAndBaseIndex scan with precomputed binary
  search (timelineSegments useMemo) — O(log T) per visible message render

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lotus Bot
2026-05-20 21:54:33 -04:00
parent 888e741f94
commit 584da83bf0
23 changed files with 89 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/AccountDataEditor.tsx
+1 -1
View File
@@ -294,7 +294,7 @@ export function AccountDataEditor({
</Chip>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/components/DeviceVerification.tsx
+1 -1
View File
@@ -261,7 +261,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
<Box grow="Yes">
<Text size="H4">Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={handleCancel}>
<IconButton size="300" radii="300" onClick={handleCancel} aria-label="Cancel verification">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
src/app/components/DeviceVerificationSetup.tsx
+1 -1
View File
@@ -301,7 +301,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
<Box grow="Yes">
<Text size="H4">Setup Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={onCancel}>
<IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
src/app/components/editor/Toolbar.tsx
+39 -13
View File
@@ -54,8 +54,8 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
);
}
type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode; label?: string };
export function MarkButton({ format, icon, tooltip, label }: MarkButtonProps) {
const editor = useSlate();
const disableInline = isBlockActive(editor, BlockType.CodeBlock);
@@ -76,6 +76,7 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isMarkActive(editor, format)}
aria-label={label}
size="400"
radii="300"
disabled={disableInline}
@@ -91,8 +92,9 @@ type BlockButtonProps = {
format: BlockType;
icon: IconSrc;
tooltip: ReactNode;
label?: string;
};
export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
export function BlockButton({ format, icon, tooltip, label }: BlockButtonProps) {
const editor = useSlate();
const handleClick = () => {
@@ -108,6 +110,7 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isBlockActive(editor, format)}
aria-label={label}
size="400"
radii="300"
>
@@ -165,6 +168,7 @@ export function HeadingBlockButton() {
<IconButton
ref={triggerRef}
onClick={() => handleMenuSelect(1)}
aria-label="Heading 1"
size="400"
radii="300"
>
@@ -180,6 +184,7 @@ export function HeadingBlockButton() {
<IconButton
ref={triggerRef}
onClick={() => handleMenuSelect(2)}
aria-label="Heading 2"
size="400"
radii="300"
>
@@ -195,6 +200,7 @@ export function HeadingBlockButton() {
<IconButton
ref={triggerRef}
onClick={() => handleMenuSelect(3)}
aria-label="Heading 3"
size="400"
radii="300"
>
@@ -271,32 +277,44 @@ export function Toolbar() {
<MarkButton
format={MarkType.Bold}
icon={Icons.Bold}
tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`}
label="Bold"
/>}
/>
<MarkButton
format={MarkType.Italic}
icon={Icons.Italic}
tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`}
label="Italic"
/>}
/>
<MarkButton
format={MarkType.Underline}
icon={Icons.Underline}
tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`}
label="Underline"
/>}
/>
<MarkButton
format={MarkType.StrikeThrough}
icon={Icons.Strike}
tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`} />}
tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`}
label="Strikethrough"
/>}
/>
<MarkButton
format={MarkType.Code}
icon={Icons.Code}
tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`}
label="Inline code"
/>}
/>
<MarkButton
format={MarkType.Spoiler}
icon={Icons.EyeBlind}
tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`}
label="Spoiler"
/>}
/>
</Box>
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
@@ -305,22 +323,30 @@ export function Toolbar() {
<BlockButton
format={BlockType.BlockQuote}
icon={Icons.BlockQuote}
tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`}
label="Block quote"
/>}
/>
<BlockButton
format={BlockType.CodeBlock}
icon={Icons.BlockCode}
tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`}
label="Code block"
/>}
/>
<BlockButton
format={BlockType.OrderedList}
icon={Icons.OrderList}
tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`}
label="Ordered list"
/>}
/>
<BlockButton
format={BlockType.UnorderedList}
icon={Icons.UnorderList}
tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`}
label="Unordered list"
/>}
/>
<HeadingBlockButton />
</Box>
src/app/components/event-readers/EventReaders.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const EventReaders = as<'div', EventReadersProps>(
<Box grow="Yes">
<Text size="H3" style={lotusTerminal ? { color: '#00D4FF', textShadow: '0 0 6px rgba(0,212,255,0.45)', letterSpacing: '0.05em' } : undefined}>Seen by</Text>
</Box>
<IconButton size="300" onClick={requestClose}>
<IconButton size="300" onClick={requestClose} aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
src/app/components/password-input/PasswordInput.tsx
+1
View File
@@ -28,6 +28,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
variant={visible ? 'Warning' : variant}
size="300"
radii="300"
aria-label={visible ? 'Hide password' : 'Show password'}
>
<Icon
style={{ opacity: config.opacity.P300 }}
src/app/components/uia-stages/PasswordStage.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function PasswordStage({
<Box grow="Yes">
<Text size="H4">Account Password</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
src/app/components/uia-stages/SSOStage.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export function SSOStage({
<Box grow="Yes">
<Text size="H4">SSO Login</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
src/app/features/room/RoomTimeline.tsx
+25 -1
View File
@@ -546,6 +546,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const timelineRef = React.useRef(timeline);
timelineRef.current = timeline;
const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
// Perf-5: precompute base offsets once per linkedTimelines change instead of O(N×T) scan
const timelineSegments = useMemo<Array<[number, number, EventTimeline]>>(() => {
let base = 0;
return timeline.linkedTimelines.map((t) => {
const len = t.getEvents().length;
const seg: [number, number, EventTimeline] = [base, len, t];
base += len;
return seg;
});
}, [timeline.linkedTimelines]);
const liveTimelineLinked =
timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
const canPaginateBack =
@@ -1809,7 +1820,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
let newDivider = false;
let dayDivider = false;
const eventRenderer = (item: number) => {
const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
// Perf-5: O(T) → O(log T) via precomputed segments
let eventTimeline: EventTimeline | undefined;
let baseIndex = 0;
{
let lo = 0;
let hi = timelineSegments.length - 1;
while (lo <= hi) {
const mid = (lo + hi) >>> 1;
const [base, len] = timelineSegments[mid];
if (item < base) { hi = mid - 1; }
else if (item >= base + len) { lo = mid + 1; }
else { eventTimeline = timelineSegments[mid][2]; baseIndex = base; break; }
}
}
if (!eventTimeline) return null;
const timelineSet = eventTimeline?.getTimelineSet();
const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));
src/app/features/settings/Settings.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
</Box>
<Box shrink="No">
{screenSize === ScreenSize.Mobile && (
<IconButton onClick={requestClose} variant="Background">
<IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
<Icon src={Icons.Cross} />
</IconButton>
)}
src/app/features/settings/about/About.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export function About({ requestClose }: AboutProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/account/Account.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function Account({ requestClose }: AccountProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/account/IgnoredUserList.tsx
+1
View File
@@ -72,6 +72,7 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
size="300"
radii="300"
variant="Secondary"
aria-label="Clear"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
src/app/features/settings/account/Profile.tsx
+2 -1
View File
@@ -185,7 +185,7 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
<Box grow="Yes">
<Text size="H4">Remove Avatar</Text>
</Box>
<IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
<IconButton size="300" onClick={() => setAlertRemove(false)} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
@@ -278,6 +278,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
size="300"
radii="300"
variant="Secondary"
aria-label="Reset display name"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
src/app/features/settings/developer-tools/DevelopTools.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/devices/DeviceTile.tsx
+2
View File
@@ -292,6 +292,8 @@ export function DeviceTile({
outlined={deleted}
radii="300"
onClick={() => setDetails(!details)}
aria-label={details ? 'Collapse device details' : 'Expand device details'}
aria-expanded={details}
>
<Icon size="50" src={details ? Icons.ChevronBottom : Icons.ChevronRight} />
</IconButton>
src/app/features/settings/devices/Devices.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ export function Devices({ requestClose }: DevicesProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/devices/Verification.tsx
+1
View File
@@ -293,6 +293,7 @@ export function DeviceVerificationOptions() {
size="300"
radii="300"
onClick={handleMenu}
aria-label="Verification options"
>
<Icon size="100" src={Icons.VerticalDots} />
</IconButton>
src/app/features/settings/emojis-stickers/EmojisStickers.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/emojis-stickers/GlobalPacks.tsx
+2
View File
@@ -373,6 +373,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
variant="Critical"
onClick={() => handleUndoRemove(address)}
disabled={applyingChanges}
aria-label="Undo remove pack"
>
<Icon src={Icons.Plus} size="100" />
</IconButton>
@@ -383,6 +384,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
variant="Secondary"
onClick={() => handleRemove(address)}
disabled={applyingChanges}
aria-label="Remove pack"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
src/app/features/settings/general/General.tsx
+1 -1
View File
@@ -1184,7 +1184,7 @@ export function General({ requestClose }: GeneralProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/settings/notifications/KeywordMessages.tsx
+2 -1
View File
@@ -80,6 +80,7 @@ function KeywordInput() {
size="300"
radii="300"
variant="Secondary"
aria-label="Clear keyword input"
>
<Icon src={Icons.Cross} size="100" />
</IconButton>
@@ -118,7 +119,7 @@ function KeywordCross({ pushRule }: PushRulesProps) {
const removing = removeState.status === AsyncStatus.Loading;
return (
<IconButton onClick={remove} size="300" radii="Pill" variant="Secondary" disabled={removing}>
<IconButton onClick={remove} size="300" radii="Pill" variant="Secondary" disabled={removing} aria-label="Remove keyword">
{removing ? <Spinner size="100" /> : <Icon src={Icons.Cross} size="100" />}
</IconButton>
);
src/app/features/settings/notifications/Notifications.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export function Notifications({ requestClose }: NotificationsProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>