Skip to content

🎨 Palette: Add keyboard accessibility and focus states to custom interactive elements#63

Open
thirdeyenation wants to merge 1 commit intomainfrom
palette-ux-a11y-focus-9076906869846407962
Open

🎨 Palette: Add keyboard accessibility and focus states to custom interactive elements#63
thirdeyenation wants to merge 1 commit intomainfrom
palette-ux-a11y-focus-9076906869846407962

Conversation

@thirdeyenation
Copy link
Copy Markdown
Owner

💡 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 div or label tags 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:

  • Added role="button" and tabindex="0" to make custom elements focusable and semantically correct.
  • Added @keydown.enter and @keydown.space.prevent to enable keyboard activation.
  • Added :focus-visible to existing :hover CSS 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

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>
@google-labs-jules
Copy link
Copy Markdown

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant