A11y: Toggle visibility buttons don't programmatically expose their state

[patrickhlauke]

Steps To Reproduce

Using a screen reader:

1. View an item in the vault with a hidden field or password
2. Set focus to the "Toggle visibility" button - note that the current state (whether it's on or off / whether the related field is visible or not) is not conveyed
3. Toggle the button - note that the new state is not conveyed

Expected Result

The current state of the toggle should be conveyed programmatically or in text to assistive technologies/screen readers, so that the user knows whether or not the related password/hidden field is currently visible or not.

Actual Result

The state of the toggle is purely conveyed through the visual icon it uses.

Screenshots or Videos

No response

Additional Context

Looking at the code, see how the only difference between a not-toggled and toggled control is the difference in fontawesome icon used.

<button type="button" appstopclick="" class="row-btn ng-star-inserted" title="Toggle visibility" aria-label="Toggle visibility"> <i aria-hidden="true" class="fa fa-lg fa-eye"></i> </button>

<button type="button" appstopclick="" class="row-btn ng-star-inserted" title="Toggle visibility" aria-label="Toggle visibility"> <i aria-hidden="true" class="fa fa-lg fa-eye-slash"></i> </button>

If you're treating these as toggles, suggest adding an aria-pressed="..." attribute. when not toggled (i.e. the password/hidden field is obfuscated), set it to aria-pressed="false", and when toggled (password/hidden field is visible) set it to aria-pressed="true"

• https://www.w3.org/TR/wai-aria-1.1/#aria-pressed
• https://www.w3.org/TR/wai-aria-practices-1.1/#button
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html

Operating System

Windows

Operating System Version

10

Web Browser

Chrome

Browser Version

No response

Build Version

1.55.0