🎨 Palette: [UX improvement] Improve search box accessibility#419
🎨 Palette: [UX improvement] Improve search box accessibility#419EffortlessSteven wants to merge 1 commit intomainfrom
Conversation
Changed the search box `type` from `"text"` to `"search"` to utilize native browser semantics. Added an `aria-label` since the input lacks a visually associated label, improving the experience for screen reader users. Applied symmetrically across both `app-http` and `http-platform` UI templates.
|
👋 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. |
|
Warning You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again! |
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 22 minutes and 57 seconds.Comment |
Test Results283 tests 245 ✅ 11m 25s ⏱️ Results for commit d403c02. |
1 participant
Scope
Type: UX/Accessibility
Intent: Improve screen reader accessibility and browser semantics for the acceptance criteria search box.
Touchpoints: crates/app-http/src/platform/ui.rs, crates/http-platform/src/ui.rs
Evidence: Tests pass and Playwright script verified
type="search"and correctaria-labelon#search-box.💡 What:
Changed the Acceptance Criteria search box input type from
texttosearchand added an explicitaria-label. Applied to both UI template locations.🎯 Why:
The search input did not have a
<label>element associated with it. This made it inaccessible to screen reader users who would not know what the input field was for. Usingtype="search"provides better native semantics, such as the clear ('x') button in some browsers.📸 Before/After:
Before:
<input id="search-box" class="search-box" type="text" placeholder="Search by AC ID or title...">After:
<input id="search-box" class="search-box" type="search" aria-label="Search acceptance criteria" placeholder="Search by AC ID or title...">♿ Accessibility:
Ensured screen readers can explicitly announce the purpose of the search input field without relying solely on visual context or the placeholder attribute (which is not a substitute for a label).
PR created automatically by Jules for task 15612865591733495841 started by @EffortlessSteven