Add aria-pressed attribute to all toggleVisibility buttons

[patrickhlauke]

Type of change

• Bug fix
• New feature development
• Tech debt (refactoring, code cleanup, dependency upgrades, etc)
• Build/deploy pipeline (DevOps)
• Other

Objective

Currently, the show/hide buttons to toggle the visibility of passwords/hidden fields don't expose their state to assistive technologies - they only change visually by swapping out the fontawesome icon used. Adding aria-pressed="false"/aria-pressed="true" makes these proper toggle buttons, whose state is exposed to assistive tech. This way a screen reader user can hear whether the password/hidden field is visible or not visible.

Closes #2228

Code changes

For all the various toggleVisibility buttons used, adds [attr.aria-pressed] referencing the relevant value (e.g. showPassword). Toggling the button dynamically changes the value of the attribute that's rendered.

Screenshots

No UI change

Testing requirements

Test with a screen reader (e.g. NVDA). Alternatively, check that the aria-pressed attribute in the DOM is present and correctly toggles between literal true and false values (true when the password is visible and the icon is fa-eye-slash, false when the password is hidden and the icon is fa-eye)

Before you submit

• I have checked for linting errors (npm run lint) (required)
• This change requires a documentation update (notify the documentation team)
• This change has particular deployment requirements (notify the DevOps team)

[patrickhlauke]

Comparison video (using a test item) of navigating to a toggle button and triggering it - currently, and after this PR, using NVDA on Windows.

Currently, note that it simply announces it as Toggle visibility button Toggle visibility (the second "Toggle visibility" is caused by the title attribute). No indication of current state. Toggling the button leads to no announcement by the screen reader either.

After the PR, the toggle is announced as either "pressed" or "not pressed" when first focusing it, exposing the current state. Toggle Visibility toggle button not pressed Toggle Visibility
Toggling the control leads to announcements of "pressed" and "not pressed" to reflect the change that just happened. Returning to the control announces its correct current state.

bitwarde-issue2228.mp4

[djsmith85]

@patrickhlauke Thank you for your contribution 🚀. Code changes look good and tested it with NVDA on Windows.