🎨 Palette: Add progressive feedback to character counter#161
Conversation
- Updated the `alternativeThought` counter in `ResponseForm.tsx` to turn orange and then red as the limit is approached. - Added strict static screen-reader only elements to notify users progressively without continuous interruptions. - Appended a journal entry logging the accessibility learning pattern. 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. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4c000ecd57
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {alternativeThought.length >= 240 && alternativeThought.length < 270 && ( | ||
| <div role="status" className="sr-only"> | ||
| Approaching character limit. |
There was a problem hiding this comment.
For screen-reader users crossing the 240/270/300 thresholds, this inserts a new role="status" node that already contains its message. Polite live regions are only reliably announced when the region exists before its content changes, so some browser/assistive-tech pairs can miss these warnings entirely. Keep a single sr-only status region mounted and update its text when the threshold changes.
Useful? React with 👍 / 👎.
1 participant
💡 What:
Added progressive visual and screen-reader feedback for the
alternativeThoughttext input in the Response form. The character counter turns orange when the limit is approached (>= 240 chars) and red and bold when the limit is near (>= 270 chars) or fully reached (300 chars). It also adds separate hidden elements specifically for screen readers to quietly alert the user of these thresholds without disruptive live-region spam on every keystroke.🎯 Why:
To enhance usability by gently notifying the user when their input length is getting long, rather than startling them with an immediate block when they hit the 300 character limit. Using
aria-liveon the counter element constantly interrupts typing for screen reader users; extracting the warning messages to separate conditionally-rendered static elements provides cleaner, safer, and quieter accessibility feedback.📸 Before/After:
Before: The text stayed gray continuously, leaving users unaware they were close to the limit.
After: Text turns
text-orange-700at 240+ chars, andtext-red-600 font-boldat 270+ and 300 chars. Screen readers get specific alert text at each threshold.♿ Accessibility:
Replaced the reliance on changing visual strings for screen reader cues with robust, conditionally-rendered strictly-static
role="status"tags. This stops the screen reader from incessantly reading the number string every time the user types a new character.PR created automatically by Jules for task 14833391576768995783 started by @Sczitzo