🎨 Palette: Add progressive warning colors to character limit counter - #158
🎨 Palette: Add progressive warning colors to character limit counter#158Sczitzo wants to merge 1 commit into
Conversation
- Added dynamic text color changes to `alternativeThought` character counter (`text-orange-700` at 240 chars, `text-red-600` at 270 chars). - Added a visually hidden `role="status"` element that appears only when the 300 character limit is reached to provide accessible feedback without excessive `aria-live` noise. - Documented learning in Palette Journal. Co-authored-by: Sczitzo <46541128+Sczitzo@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
💡 What: Added progressive color warnings (orange at >80%, red at >90%) to the
alternativeThoughtcharacter counter inResponseForm.tsxand a separate visually hidden "Character limit reached" status message.🎯 Why: To provide better visual feedback to users as they approach the maximum input length, preventing them from unexpectedly hitting a wall, and doing so in a way that is accessible without spamming screen readers with every keystroke update.
📸 Before/After: The text counter changes from
text-gray-500totext-orange-700 font-medium(240+ chars) totext-red-600 font-bold(270+ chars). A screenshot demonstrates the red warning state.♿ Accessibility: Instead of adding
aria-liveto the dynamic numbers (which causes excessive noise), a separate, purely static<div role="status" className="sr-only">Character limit reached</div>element conditionally renders only when the limit is exactly reached, guaranteeing a clean single announcement.PR created automatically by Jules for task 6267672465963426287 started by @Sczitzo