🎨 Palette: Form and Dropzone Accessibility Improvements#56
🎨 Palette: Form and Dropzone Accessibility Improvements#56
Conversation
- Added `for` attributes to all form labels in `index.php`. - Made `#dropZone` keyboard accessible by adding `tabindex="0"` and `role="button"`. - Added keyboard (`keydown`) and `click` event listeners to `#dropZone` in `js/app.js` to properly trigger file selection without double-firing on nested buttons. - Enhanced progress bar accessibility with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, and `aria-live="polite"` dynamically updated via JavaScript. - Documented UX learnings in `.Jules/palette.md`. 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. |
🎨 Palette: Accessibility improvements for form controls and upload dropzone
💡 What:
This PR implements several key accessibility improvements:
<select>inputs using theforattribute.#dropZonediv into a proper interactive element. Addedtabindex="0"androle="button"so it receives keyboard focus. Implemented JavaScript logic to allow triggering the file upload via theEnterorSpacekeys, carefully ensuring that explicit clicks on the nested button or hidden input do not cause double-firing.aria-valuemin,aria-valuemax,aria-valuenow) to the progress bar and dynamically synchronized them in JS. Addedaria-live="polite"to the progress area so screen readers announce status updates..Jules/palette.mdregarding the specific pattern of custom dropzones with nested explicit controls.🎯 Why:
Previously, users relying on screen readers or keyboard navigation could not effectively interact with the file upload dropzone or understand the context of the dropdown menus. Furthermore, progress updates during translation were visually apparent but invisible to assistive technologies. These changes ensure the core functionality of the application is accessible to all users.
♿ Accessibility:
forattributes).aria-live,aria-valuenow).PR created automatically by Jules for task 17692893474614019666 started by @Nawayisus