Fix #6046, Password: (accessiblility) cannot access toggle button using keyboard

[akshayaqburst]

Defect Fixes

fix #6046, Password: (accessiblility) cannot access toggle button using keyboard

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Mar 1, 2024 4:14am
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview		Mar 1, 2024 4:14am

[melloware]

Also we need to add to both buttons...

'aria-label': ariaLabel('toggleMaskLabel') || "Toggle Password Mask"

[akshayaqburst]

@melloware resolved comments.

[melloware]

Run npm run format and it should be good!

[akshayaqburst]

@melloware Good to review

[melloware]

Thanks this is great!

[melloware]

@akshayaqburst I just read this article https://medium.com/kiipco/password-creation-3-ways-to-make-it-accessible-bc8f2b53b7ee#1751

I think we should chnage two more properties to the icons. Change role="button" to "role="switch" and add aria-checked

     role: "switch",
     "aria-checked": "false"

aria-checked: "true" true on the show button and false on the hide button.

[akshayaqburst]

@melloware Comments resolved. Thanks,

[melloware]

OK later today I might have one more change for you i am going to update the labels in PrimeLocale and have you change the aria label once last time. I think I am going to go with 2 labels.

[akshayaqburst]

sure, let me know @melloware

[akshayaqburst]

@melloware Good to review. Thanks,

[nitrogenous]

Perfect!