-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
demo(input): add input a11y examples (#6181)
* add input a11y examples * address comments
- Loading branch information
1 parent
ce31113
commit 15b0b43
Showing
5 changed files
with
93 additions
and
1 deletion.
There are no files selected for viewing
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
<section> | ||
<h2>Basic input box (e.g. name field)</h2> | ||
<md-input-container floatPlaceholder="never"> | ||
<input mdInput placeholder="First name" [(ngModel)]="firstName"> | ||
</md-input-container> | ||
<md-input-container floatPlaceholder="never"> | ||
<input mdInput placeholder="Last name" [(ngModel)]="lastName"> | ||
</md-input-container> | ||
</section> | ||
|
||
<section> | ||
<h2>Input with hint (e.g. password field)</h2> | ||
<md-input-container hideRequiredMarker> | ||
<input mdInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required | ||
#passwordModel="ngModel"> | ||
<button md-icon-button mdSuffix [attr.aria-label]="passwordToggleLabel" | ||
(click)="showPassword = !showPassword"> | ||
<md-icon>{{passwordToggleIcon}}</md-icon> | ||
</button> | ||
<md-hint>Hint: favorite color</md-hint> | ||
<md-error *ngIf="passwordModel.hasError('required')">You must enter your password.</md-error> | ||
</md-input-container> | ||
</section> | ||
|
||
<section> | ||
<h2>Input with error message (e.g. email field)</h2> | ||
<md-input-container> | ||
<input mdInput type="email" placeholder="Email" [(ngModel)]="email" required email | ||
#emailModel="ngModel"> | ||
<md-error *ngIf="emailModel.hasError('required')">You must enter your email.</md-error> | ||
<md-error *ngIf="emailModel.hasError('email')">Not a valid email address.</md-error> | ||
</md-input-container> | ||
</section> | ||
|
||
<section> | ||
<h2>Input with prefix & suffix (e.g. currency converter)</h2> | ||
<md-input-container floatPlaceholder="always"> | ||
<input mdInput type="number" placeholder="USD" [(ngModel)]="usd"> | ||
<span mdPrefix>$</span> | ||
</md-input-container> | ||
= | ||
<md-input-container floatPlaceholder="always"> | ||
<input mdInput type="number" placeholder="JPY" [(ngModel)]="jpy"> | ||
<span mdPrefix>¥</span> | ||
</md-input-container> | ||
(as of 7/31/2017) | ||
</section> | ||
|
||
<section> | ||
<h2>Textarea input (e.g. comment box)</h2> | ||
<md-input-container> | ||
<textarea mdInput aria-label="Comment" [(ngModel)]="comment" mdTextareaAutosize | ||
[maxlength]="commentMax" #commentModel="ngModel"></textarea> | ||
<md-hint>Leave us a comment!</md-hint> | ||
<md-hint align="end">{{commentCount}}/{{commentMax}}</md-hint> | ||
</md-input-container> | ||
</section> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
const USD_TO_JPY = 110.29; | ||
|
||
@Component({ | ||
moduleId: module.id, | ||
selector: 'input-a11y', | ||
templateUrl: 'input-a11y.html', | ||
}) | ||
export class InputAccessibilityDemo { | ||
firstName: string; | ||
lastName: string; | ||
password: string; | ||
showPassword = false; | ||
email: string; | ||
usd: number; | ||
comment: string; | ||
commentMax = 200; | ||
|
||
get passwordType() { return this.showPassword ? 'text' : 'password'; } | ||
|
||
get passwordToggleLabel() { return this.showPassword ? 'Hide password' : 'Reveal password'; } | ||
|
||
get passwordToggleIcon() { return this.showPassword ? 'visibility_off' : 'visibility'; } | ||
|
||
get jpy() { return this.usd ? this.usd * USD_TO_JPY : this.usd; } | ||
set jpy(value) { this.usd = value ? value / USD_TO_JPY : value; } | ||
|
||
get commentCount() { return this.comment ? this.comment.length : 0; } | ||
} |
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