Jesse_ChenandCursor
e8fa1ce4ea
Dark muted surfaces missed WCAG AA; action and tertiary tokens plus a 32-pair contract close that. Hit targets, remaining-count, and Enter-to-send follow the interaction audit without changing visual sizes. Co-authored-by: Cursor <cursoragent@cursor.com>
32 lines
781 B
TypeScript
32 lines
781 B
TypeScript
import {
|
|
characterRemainingAnnouncement,
|
|
characterRemainingLabel,
|
|
characterRemainingVisible,
|
|
} from "@/lib/character-remaining";
|
|
|
|
export function CharacterRemaining({
|
|
id,
|
|
length,
|
|
maxLength,
|
|
}: {
|
|
id: string;
|
|
length: number;
|
|
maxLength: number;
|
|
}) {
|
|
if (!characterRemainingVisible(length, maxLength)) return null;
|
|
const remaining = maxLength - length;
|
|
const atLimit = remaining <= 0;
|
|
return (
|
|
<span
|
|
id={id}
|
|
className="character-remaining"
|
|
data-limit={atLimit ? "true" : undefined}
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<span aria-hidden="true">{characterRemainingLabel(remaining, maxLength)}</span>
|
|
<span className="sr-only">{characterRemainingAnnouncement(remaining, maxLength)}</span>
|
|
</span>
|
|
);
|
|
}
|