Skip to content

🎨 Palette: Add accessible progressive character limit warnings#150

Open
Sczitzo wants to merge 1 commit into
mainfrom
palette-accessible-char-limit-warnings-6757001967933288236
Open

🎨 Palette: Add accessible progressive character limit warnings#150
Sczitzo wants to merge 1 commit into
mainfrom
palette-accessible-char-limit-warnings-6757001967933288236

Conversation

@Sczitzo

@Sczitzo Sczitzo commented Jun 17, 2026

Copy link
Copy Markdown
Owner

💡 What:
Updated the alternativeThought textarea'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 with role="status" to announce character limits to screen readers at specific thresholds. Removed noisy real-time aria-live regions 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.md noting this improved technique.


PR created automatically by Jules for task 6757001967933288236 started by @Sczitzo

Co-authored-by: Sczitzo <46541128+Sczitzo@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

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 chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment on lines +141 to +142
{alternativeThought.length >= 240 && alternativeThought.length < 270 && (
<div role="status" className="sr-only">Approaching character limit</div>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant