🎨 Palette: Add accessible progressive character limit warnings#150
🎨 Palette: Add accessible progressive character limit warnings#150Sczitzo wants to merge 1 commit into
Conversation
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. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0df9560a6d
ℹ️ 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</div> |
There was a problem hiding this comment.
Keep the status live region mounted before updating text
When the user types from 239 to 240 characters, this mounts a new role="status" element that already contains the warning text, rather than updating text inside an existing live region. Many screen reader/browser combinations only announce changes within a live region that was already present, so the first threshold warning can be missed; keep a single sr-only status element in the DOM and update its contents as the length crosses thresholds.
Useful? React with 👍 / 👎.
💡 What:
Updated the
alternativeThoughttextarea's character counter to use progressively changing text colors (turning orange-700 at >= 240 chars, and red-600 at >= 270 chars). Added conditionally rendered, visually hidden elements withrole="status"to announce character limits to screen readers at specific thresholds. Removed noisy real-timearia-liveregions from the counter text to support better accessibility.🎯 Why:
When users approach the 300 character limit, they need to be informed before their input is silently truncated. Visual users benefit from the progressive color change, while screen reader users need critical warnings (e.g., "Approaching character limit" or "Character limit reached") without having the raw number of characters announced loudly on every single keystroke.
📸 Before/After:
(Visual changes: the text '0 / 300 characters' starts gray, turns orange when >= 80% full, and red when >= 90% full. Screen readers now hear the static, concise warnings precisely when they approach or reach limits).
♿ Accessibility:
Implements a non-disruptive pattern for character limit warnings: uses static text rendered inside a visually hidden container with
role="status"to prevent screen readers from interrupting typing with noisy counting announcements, while still ensuring they are immediately alerted when space runs low. Added an accompanying entry to.Jules/palette.mdnoting this improved technique.PR created automatically by Jules for task 6757001967933288236 started by @Sczitzo