🎨 Palette: Enhance keyboard accessibility for signup tabs - #76
🎨 Palette: Enhance keyboard accessibility for signup tabs#76AntonioCardenas wants to merge 1 commit into
Conversation
Added standard ARIA roles, tabindex, and keyboard event listeners to the custom anchor-based tabs in the Signup component to ensure they are accessible to keyboard-only and screen reader users. Added Tailwind classes to provide a visible focus ring. 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 navigation support (Enter and Space keys), focus-visible styling (Tailwind ring),
tabIndex={0}, and correct ARIA roles (tab,tablist,aria-selected) to the custom anchor (<a>) tabs used on the Signup page. Also removed a duplicated HTMLid.🎯 Why
The custom tabs on the Signup page were implemented using
<a>tags withouthrefattributes, making them unreachable via theTabkey and un-activatable via the keyboard for users who depend on keyboard navigation. They also lacked semantic roles, meaning screen readers would not announce them correctly as a tab group.📸 Before/After
Tabinto the tab list, see a clear focus indicator, switch tabs usingEnterorSpace, and hear proper semantic announcements via screen readers.♿ Accessibility
role="tablist"to the container.role="tab"andtabIndex={0}to the tabs.aria-selectedto reflect the active tab state.onKeyDownhandlers for Enter/Space selection.focus-visible:ring-2 focus-visible:outline-nonefor visible focus indicators.id="signup-tabs".PR created automatically by Jules for task 2039563502103872716 started by @AntonioCardenas