🎨 Palette: Sidebar Keyboard Accessibility - #65
Conversation
- Added `role="button"` and `tabIndex` to clickable `div` elements in SideBar - Added `onKeyDown` handlers for Enter and Space key activation - Added `focus-visible` classes to show focus rings when using keyboard navigation 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 to interactive
divelements within theSideBarcomponent, including navigation links, the "Add Batches" button, and the login/logout buttons.🎯 Why: To allow keyboard-only users to fully navigate the sidebar, as
divelements withonClickhandlers are not accessible by default.📸 Before/After: Visual changes are only apparent when navigating via keyboard (pressing Tab). A focus ring (amber or red) will now appear around the focused item.
♿ Accessibility:
role="button"to inform screen readers of the elements' purpose.tabIndex={0}to make the items focusable via keyboard (and-1for disabled items).onKeyDownhandlers to support activation usingEnterorSpacekeys.focus-visibleutility classes for visual feedback.PR created automatically by Jules for task 11222920962862885676 started by @AntonioCardenas