Wishlist: Add Password visibility toggle on login screens

[Elizabeth Thomsen]

Staff and patrons sometimes have trouble entering a password, and may not be sure it they are trying to enter the wrong password, or if they just keyed it in wrong. Adding a toggle to show the password, often represented as an eyeball, is a common way to reduce frustration.

We'd like to have an option to have this both on the staff client and the patron My Account login screens.

[Benjamin Kalish (bkalish)]

Google simply uses a checkbox with the label "show password". It takes up a little more space, but there is little doubt about what it does!

[Scott Angel (scottangel1)]

I've got something worked up for this.
Here's my working branch ==> https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/scottangel/LP1977554-add-password-visibility-toggle-login-screen

I attached a screenshot showing the update. This screenshot shows the non-bootstrap login and the bootstrap modal login. Not shown is the eg/staff/login & eg2/staff/login but they resemble the bootstrap modal style.

[Stephanie Leary (stephanieleary)]

Scott, can you add a spellcheck="false" attribute to the password input? Without that, the plain text input sends the password to remote spellchecking services in Chrome and Edge.
https://www.otto-js.com/news/article/chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords

[Scott Angel (scottangel1)]

Stephanie, I've got this commit updated with the spellcheck="false" attribute. Sorry it took me a few days we got caught up in a migration. I do want to note that I didn't add anything to the password change form. So when users go to change their password it doesn't have the visibility icon. So the visibility icon is just for the login forms. Just felt I should mention that. Hope you guys like it!

Here is the working branch
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=3a1b3b7d6de8795449db2f52053a8077310eff47

[Galen Charlton (gmc)]

Noting a couple points from https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/

- Since a design point of the OPAC is that it should be able to perform all core functions without JavaScript enabled, we should consider hiding the checkbox by default and display it only if JS is available
- We should consider adding a form submit handler to change the type of the password input back to 'password' before submitting the login form as a way of avoiding the password ending up in the brower's autocomplete history.

[Terran McCanna (tmccanna)]

Removing pullrequest pending changes recommended in comment #6

[Scott Angel (scottangel1)]

I've updated this to reset the password type to 'password' on form submission. I went ahead and added autocomplete="false" on the <input> just to be safe.

I've also set the visibility checkbox for non javascript users to NOT display and then use javascript to enable visibility if javascript is enabled.

Here's the updated branch.
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/scottangel/LP1977554-add-password-visibility-toggle-login-screen

[Stephanie Leary (stephanieleary)]

This looks good to me! Signed off: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1977554-add-password-visibility-toggle-login-screen-signoff

[Galen Charlton (gmc)]

Thanks, I think this is a lot closer. I think there are a couple remaining accessibility issues to consider:

- The visibility toggle cannot be reached via the keyboard. Changing the spans to a button should help there.
- There's nothing that describes the intent of the toggle to a screenreader.

The Gov.uk posted has some pointers, but another resource that seems useful is

https://incl.ca/show-hide-password-accessibility-and-password-hints-tutorial/

[Scott Angel (scottangel1)]

Alright gang, I think I got it! I learned so much along the way.

Here's my branch
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/scottangel/LP1977554-add-password-visibility-toggle-login-screen

Changed the <span> tags to <button> tags so it can be reached via
keyboard navigation.

Added a few more attributes to the password input tag.
autocapitalize="none"
spellcheck="false"
aria-description so screen readers can describe to the user what
the current state is.

Added aria-checked to the button for screen readers

Added a new css file for the login.component with a little styling.

I used NVDA as my testing screen reader as it seems to be the most popular. Not tested w/JAWS.

[Galen Charlton (gmc)]

Stephanie Leary and I reviewed the patch series. It's now merged for inclusion to 3.11, along with follow-ups to:

* add a release notes entry
* remove an unneeded "role" for the buttons
* tag the new strings for translation
* adjust the styling to reflect the upgrade of the Angular staff interface to Bootstrap 5.

Thanks, Scott!