🎨 Palette: Improve add-domain wizard accessibility#260
Conversation
- Added `aria-describedby` to link the domain input with its error message container. - Added `role="alert"` and `aria-live="polite"` to the error container to ensure screen readers announce validation errors dynamically. - Toggled `aria-invalid="true"` on the input based on client-side validation logic. - Created `.Jules/palette.md` to document the dynamic form validation accessibility pattern. Co-authored-by: schmug <38227427+schmug@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. |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
dmarcheck | 03856b0 | May 09 2026, 01:28 AM |
1 participant
💡 What
Improved the accessibility of the "Add domain" wizard by providing clearer associations and state announcements for screen reader users during client-side validation.
🎯 Why
Previously, when a user entered an invalid domain in the wizard and clicked "Next", the error message became visible visually, but a screen reader user was not necessarily notified and might not understand why they couldn't proceed. By appropriately using
aria-live,aria-describedby, andaria-invalid, the application now explicitly announces validation failures and links the error text directly to the input field causing the problem.📸 Before/After
No visual changes were introduced, purely semantic HTML improvements.
♿ Accessibility
aria-describedby="wizard-domain-error"associates the domain text input to the error element.role="alert"andaria-live="polite"on the error container ensure screen readers announce validation messages when they are injected.aria-invalid="true"attribute is correctly managed via JavaScript to indicate validation state on the input itself.PR created automatically by Jules for task 3753226809302555415 started by @schmug