🎨 Palette: Add keyboard accessibility and focus states to custom interactive elements#63
🎨 Palette: Add keyboard accessibility and focus states to custom interactive elements#63thirdeyenation wants to merge 1 commit intomainfrom
Conversation
Added `role="button"`, `tabindex="0"`, and keyboard event handlers (`@keydown.enter`, `@keydown.space`) to custom interactive elements (`div` and `label` tags acting as buttons) in the welcome screen and chat input area. Paired `:hover` CSS styles with `:focus-visible` to ensure visual feedback during keyboard navigation without showing default outlines on mouse clicks. Co-authored-by: thirdeyenation <133812267+thirdeyenation@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. |
💡 What: Added keyboard accessibility (tab index, roles, and keydown handlers) and visual focus states (
:focus-visible) to several custom interactive elements that were previously only styled for mouse hover. This includes the welcome screen action cards, refresh/dismiss buttons, the chat input bottom actions menu (e.g., "Add attachments"), and the bottom action bar.🎯 Why: Custom interactive elements (like
divorlabeltags acting as buttons) were inaccessible to keyboard users. They lacked the ability to receive focus, trigger actions via the keyboard, and provide visual feedback when focused. This change ensures users navigating with a keyboard have a smooth and intuitive experience matching mouse users.📸 Before/After:
(Before) Keyboard users could not tab to the "New Chat" or "Projects" cards on the welcome screen, nor could they trigger them with Enter/Space. Focus indicators were missing.
(After) Keyboard users can tab through all action cards and buttons, seeing a clear visual indicator (the same style as a mouse hover), and trigger them using standard keyboard interactions.
♿ Accessibility:
role="button"andtabindex="0"to make custom elements focusable and semantically correct.@keydown.enterand@keydown.space.preventto enable keyboard activation.:focus-visibleto existing:hoverCSS rules to provide clear visual focus indicators without showing ugly outlines on mouse clicks.PR created automatically by Jules for task 9076906869846407962 started by @thirdeyenation