Skip to content

fix(docs): password visibility toggle example in form field component… #15129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Feb 22, 2019
Merged

fix(docs): password visibility toggle example in form field component… #15129

merged 4 commits into from
Feb 22, 2019

Conversation

Suresh918
Copy link
Contributor

@Suresh918 Suresh918 commented Feb 8, 2019 •
edited
Loading

Fixes #15023

@Suresh918 Suresh918 requested a review from jelbourn as a code owner February 8, 2019 17:03
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 8, 2019
crisbeto
crisbeto reviewed Feb 10, 2019
View reviewed changes
src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html Outdated
@@ -1,7 +1,9 @@
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<button mat-icon-button matSuffix (click)="hide = !hide" aria-label="Show or hide password icon">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The aria-label show be different based on whether the button is going to show or hide the value:

[attr.aria-label]="hide ? 'Hide password' : 'Show password'"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed as per your suggestion. Can you please check now

@jelbourn
Copy link
Member

Looking at this made me realize that this should actually use a button-toggle. Would you be willing to change that over?

@Suresh918
Copy link
Contributor Author

Yes sure. Will do that jelbourn

@Suresh918
Copy link
Contributor Author

@jelbourn If we use toggle button the appearance is as shown in the image. Normal button is looking good inside the input as compared to toggle button.
toggle button inside input

@jelbourn
Copy link
Member

Yeah, that does look weird. I think the right thing to do here is to use a regular button with aria-pressed without using the whole mat-button-toggle

@Suresh918
Copy link
Contributor Author

Suresh918 commented Feb 20, 2019 •
edited
Loading

@jelbourn updated with aria-pressed attribute

jelbourn
jelbourn reviewed Feb 20, 2019
View reviewed changes
src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html Outdated
@@ -1,7 +1,9 @@
<div class="example-container">
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed] = hide>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nit: omit spaces and add double-quotes:

[attr.aria-pressed]="hide"

jelbourn
jelbourn approved these changes Feb 21, 2019
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added pr: lgtm Accessibility This issue is related to accessibility (a11y) docs This issue is related to documentation action: merge The PR is ready for merge by the caretaker merge: fix commit message When the PR is merged, rewrites/fixups of the commit messages are needed labels Feb 21, 2019
@jelbourn jelbourn merged commit 2a086ce into angular:master Feb 22, 2019
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@crisbeto crisbeto crisbeto left review comments

@jelbourn jelbourn jelbourn approved these changes

Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement docs This issue is related to documentation merge: fix commit message When the PR is merged, rewrites/fixups of the commit messages are needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

password visibility toggle example in form field component is not accessible
4 participants
@Suresh918 @jelbourn @crisbeto @googlebot