Skip to content

feat(ui): improve password toggle accessibility and tooltips#84

Open
Tugamer89 wants to merge 1 commit into
mainfrom
palette/a11y-password-toggle-17166215017946560554
Open

feat(ui): improve password toggle accessibility and tooltips#84
Tugamer89 wants to merge 1 commit into
mainfrom
palette/a11y-password-toggle-17166215017946560554

Conversation

@Tugamer89

Copy link
Copy Markdown
Owner

What

Added dynamic aria-label and title attributes to the password visibility toggle icons across the application (Login, Register, and Reset Password forms). The attributes update dynamically based on whether the password is currently visible ("Hide password") or hidden ("Show password").

Why

Previously, the password toggles had a static aria-label ("Toggle password visibility") and lacked tooltips. This didn't inform screen reader users of the current state or the specific action that would occur upon clicking. Tooltips also aid sighted users by clarifying the button's function before interaction. This improves the overall accessibility and micro-UX of the authentication flow.

Before/After

Before:

  • Icon had aria-label="Toggle password visibility" (static).
  • No tooltip on hover.

After:

  • Icon dynamically switches between aria-label="Show password" and aria-label="Hide password".
  • Corresponding title attributes were added to provide visual tooltips on hover.

Accessibility

  • Screen readers will now announce the specific action the button performs ("Show password" or "Hide password") based on the current state of the input field.
  • Visual tooltips provide supplementary information without requiring custom CSS.

PR created automatically by Jules for task 17166215017946560554 started by @Tugamer89

Adds dynamic aria-labels and tooltips to password toggle icons
across all authentication forms, improving screen reader experience
and usability.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
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.

@sonarqubecloud

sonarqubecloud Bot commented Jun 8, 2026

Copy link
Copy Markdown

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