🎨 Palette: Improve custom dropzone accessibility and keyboard interaction#61
🎨 Palette: Improve custom dropzone accessibility and keyboard interaction#61
Conversation
…tion Adds `tabindex="0"`, `role="button"`, and an `aria-label` to the custom file upload `#dropZone` to make it discoverable by screen readers and focusable via keyboard. Implements `click`, `keydown` (Enter/Space), `focus`, and `blur` event listeners to allow full keyboard interaction and map focus states to the existing visual drag-and-drop highlight. Documents the custom dropzone accessibility pattern 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. |
1 participant
💡 What: Added comprehensive accessibility and keyboard support to the custom drag-and-drop file upload zone (
#dropZone).🎯 Why: Custom file upload drop zones (
divorsection) are completely inaccessible to keyboard-only and screen reader users by default, preventing a segment of users from interacting with the core functionality of the app. By making the zone focusable, semantic, and interactive via keyboard, we vastly improve the app's usability without altering the visual design.♿ Accessibility:
tabindex="0"to make the element focusable.role="button"to inform assistive tech of its interactive nature.aria-labeldescribing its function.keydownsupport for 'Enter' and 'Space' to trigger the hidden file input.focusandblurevent listeners to provide visual feedback to keyboard users, reusing the existing drag-and-drop highlight styling.PR created automatically by Jules for task 15310361717108996828 started by @Nawayisus