feat(accessibility): add password reveal button #1752
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ssword component and update error indicators (#1694) * Add functionality to toggle password visibility for password fields. * Replace TextInputFieldComponent with PasswordFieldComponent to provide password-specific functionality. * Update error field indicator from "x" to "!" for improved clarity and accessibility. BREAKING CHANGES: The TextInputFieldComponent is no longer used for password fields. Instead, the PasswordFieldComponent is now used, which includes functionality to toggle password visibility. Password validators are applied to each instance as needed.
SGrueber
force-pushed
the
feat/password_reveal_button
branch
from
6a07745 to
7816a3c
Compare
|
Azure Demo Servers are available: |
SGrueber
force-pushed
the
feat/password_reveal_button
branch
from
7816a3c to
303a0d0
Compare
SGrueber
added
enhancement
iwiederhold
previously approved these changes
Feb 17, 2025
|
Azure Demo Servers are available: |
SGrueber
force-pushed
the
feat/password_reveal_button
branch
from
0c8de48 to
44b906c
Compare
|
Azure Demo Servers are available: |
M-Behr
approved these changes
Feb 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Type
[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no API changes)
[ ] Build-related changes
[ ] CI-related changes
[ ] Documentation content changes
[ ] Application / infrastructure changes
[ ] Other:
What Is the Current Behavior?
Making password fields accessible is crucial for ensuring that all users, including those with disabilities, can securely interact with web forms. Sometimes users may want to see the password they are typing.
Currently there is no mechanism for form password fields (unless some modern browsers have already included such mechanism) to confirm the intended password is typed correctly. This is especially problematic for accessibility reasons:
- Screen readers can’t read password hidden text,
- Some people may have memory or cognitive issues,
- Those experiencing hand tremors are more likely to make typing mistakes,
- And so on.
Issue Number: Closes #
What Is the New Behavior?
A button to toggle password visibility has been added for desktop and larger touch devices that can help improve accessibility for users with visual impairments.
This password reveal button to display or hide the password for formly password fields follows the Microsoft Edge guidelines..
The button is available for the formly field types 'ish-password-field' and 'ish-password-novalidate-field'.
Use the new formly field type
ish-password-novalidate-fieldinstead of theish-text-input-fieldwithtype="password"if you want to define a password field without the password validator but with a reveal button (e.g. for password fields on the login form or password confirmation fields).For security reasons the reveal button is only available after the user has entered the first character into the field and
will be hidden after the user moves focus outside the field.
The formly 'ish-input-text-field' field with type="password" will still be supported but does not contain the password reveal button.
Smaller touch devices do not have a password reveal button because these devices often already have a mechanism to show the entered password to the user.
Does this PR Introduce a Breaking Change?
[ ] Yes
[x] No
Other Information
AB#104007