Skip to content

🎨 Palette: Improve Login accessibility and add loading states#16

Open
BenjaminWie wants to merge 1 commit intomainfrom
palette-login-ux-accessibility-15099980824869587676
Open

🎨 Palette: Improve Login accessibility and add loading states#16
BenjaminWie wants to merge 1 commit intomainfrom
palette-login-ux-accessibility-15099980824869587676

Conversation

@BenjaminWie
Copy link
Owner

Improved the user experience and accessibility of the login process and main interface.

Key changes:

  1. Login Flow Overhaul: Updated `App.tsx` and `LoginView.tsx` to handle login success/failure through component state instead of blocking `alert()` calls.
  2. Interactive Feedback: Added a loading state and spinner to the login button to provide immediate feedback during the authentication check.
  3. Accessibility (a11y) Enhancements:
    • Added a screen-reader-only label for the email input.
    • Implemented `aria-invalid` and `aria-describedby` for robust error reporting.
    • Added `aria-label` attributes to icon-only buttons in `ChatView` (Voice, Send) and `Sidebar` (Close) to ensure they are correctly identified by screen readers.
  4. Visual Polish: Integrated a new `LoadingIcon` based on Lucide's `Loader2` for consistent UI feedback.

All changes were verified via `pnpm build` and automated Playwright scripts.


PR created automatically by Jules for task 15099980824869587676 started by @BenjaminWie

- Replaced browser alert() with managed state for login errors.
- Added loading state and spinner to the LoginView login button.
- Added visually hidden labels and ARIA attributes for better accessibility in LoginView.
- Added ARIA labels to icon-only buttons in ChatView and Sidebar.
- Added LoadingIcon to components/Icons.tsx.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

👋 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