🎨 Palette: Enhance keyboard accessibility for interactive elements in Signup - #73
🎨 Palette: Enhance keyboard accessibility for interactive elements in Signup#73AntonioCardenas wants to merge 1 commit into
Conversation
… Signup - Added keyboard support (Space/Enter) and ARIA attributes (role="button", aria-label) to the avatar upload image. - Added keyboard support, ARIA tab roles, and aria-selected states to the Farmer/Company signup tabs. - Replaced duplicate `id="signup-tabs"` with unique IDs. - Added `focus-visible` styling for clear keyboard focus indicators on both elements. Co-authored-by: AntonioCardenas <11583391+AntonioCardenas@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. |
✅ Deploy Preview for heartfelt-swan-19c038 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
💡 What
Added keyboard accessibility, ARIA roles, and visible focus states to the avatar image upload trigger and the Farmer/Company tabs in the Signup flow. Also fixed an HTML issue where both tabs shared the same
id.🎯 Why
Previously, the avatar image upload and the signup tabs were only interactive via mouse clicks (
onClick). Keyboard and screen reader users had no way of knowing these elements were interactive or navigating to them. This change ensures everyone can use the signup flow regardless of input device.📸 Before/After
Before:
<img onClick>was skipped by keyboard navigation.<a>hadonClickbut nohref, making them un-focusable. Screen readers announced them as text, not tabs.After:
tabIndex={0}) and be activated via Enter or Space.focus-visible:ring-2 focus-visible:ring-blue-500).♿ Accessibility
role="button"andaria-labelto the avatar upload.role="tablist"to the tabs container.role="tab"and dynamicaria-selectedto the individual tabs.focus-visible.PR created automatically by Jules for task 13411818023269512067 started by @AntonioCardenas