🎨 Palette: Enhance form accessibility and make file dropzone keyboard accessible#75
🎨 Palette: Enhance form accessibility and make file dropzone keyboard accessible#75
Conversation
- Linked `<label>`s to their respective `<select>` input elements using `for` attributes. - Added `tabindex="0"`, `role="button"`, and `aria-label` to the `#dropZone` to ensure it is keyboard-navigable and screen-reader accessible. - Bound `click`, `keydown` (Enter/Space) events to `#dropZone` in JavaScript. Handlers check the event target to prevent duplicate file selection triggers. - Updated the `#progressBar` ARIA status properties (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`). Kept `aria-valuenow` in sync dynamically inside `updateProgress`. - Made the `#statusText` announce status messages politely via `aria-live="polite"`. Co-authored-by: Nawayisus <154715157+Nawayisus@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. |
1 participant
💡 What: The UX enhancement added:
Added
forattributes to explicitly link labels to their input targets. Made the file dropzone reachable and triggerable by keyboards (tab navigation + enter/space). Updated the progress bar and status text so their values can be announced accurately by screen readers.🎯 Why: The user problem it solves:
The form labels were previously decoupled from their inputs, frustrating users utilizing screen readers or attempting to click labels. The file dropzone was entirely inaccessible to keyboard-only users, forcing a hard dependency on mouse interaction. Screen readers were unnotified about the ongoing progress of the parsing.
📸 Before/After: No major visual layout changes. Changes are entirely behavior and accessibility-focused, enhancing the "invisible" user experience. Added focus outlines when the drop zone is reached by tab sequence.
♿ Accessibility:
<label for="...">#dropZonewithtabindex="0",role="button", andaria-label. Addedkeydownandclicklisteners.#progressBarwith dynamicaria-valuenow.#statusTextwitharia-live="polite".PR created automatically by Jules for task 16550330669594351291 started by @Nawayisus