Skip to content

demo(input): make character counters aria-live=polite #4600

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

Merged
merged 1 commit into from
May 17, 2017
Merged

demo(input): make character counters aria-live=polite #4600

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions src/demo-app/input/input-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@
</td>
<td>
<md-input-container class="demo-full-width">
<input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043">
<input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043"
pattern="[0-9]{5}">
<md-hint align="end">
<md-icon>mode_edit</md-icon>
{{postalCode.value.length}} / 5
<span aria-live="polite">{{postalCode.value.length}} / 5</span>
</md-hint>
</md-input-container>
</td>
Expand Down Expand Up @@ -153,7 +154,9 @@ <h4>Input</h4>
placeholder="Character count (100 max)"
maxLength="100"
value="Hello world. How are you?">
<md-hint align="end">{{characterCountInputHintExample.value.length}} / 100</md-hint>
<md-hint align="end" aria-live="polite">
{{characterCountInputHintExample.value.length}} / 100
</md-hint>
</md-input-container>
</p>

Expand All @@ -164,7 +167,9 @@ <h4>Textarea</h4>
#characterCountTextareaHintExample
placeholder="Character count (100 max)"
maxLength="100">Hello world. How are you?</textarea>
<md-hint align="end">{{characterCountTextareaHintExample.value.length}} / 100</md-hint>
<md-hint align="end" aria-live="polite">
{{characterCountTextareaHintExample.value.length}} / 100
</md-hint>
</md-input-container>
</p>
</md-card-content>
Expand Down Expand Up @@ -195,7 +200,7 @@ <h4>Textarea</h4>
<p>
<md-input-container style="width: 100%">
<input mdInput #input placeholder="Character count (100 max)" maxLength="100">
<md-hint align="end">{{input.value.length}} / 100</md-hint>
<md-hint align="end" aria-live="polite">{{input.value.length}} / 100</md-hint>
</md-input-container>
</p>
<p>
Expand All @@ -218,16 +223,19 @@ <h4>Textarea</h4>
<p>
<md-input-container hintLabel="Hint label" style="width: 100%">
<input mdInput #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
<md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
<md-hint align="end" aria-live="polite">{{hintLabelWithCharCount.value.length}}</md-hint>
</md-input-container>
</p>
<p>
<md-input-container style="margin-bottom: 4em">
<textarea mdInput #longHint placeholder="Enter text to count"></textarea>
<md-hint>
Enter some text to count how many characters are in it. The character count is shown on the right.
Enter some text to count how many characters are in it. The character count is shown on
the right.
</md-hint>
<md-hint align="end" style="white-space: nowrap" aria-live="polite">
Length: {{longHint.value.length}}
</md-hint>
<md-hint align="end" style="white-space: nowrap">Length: {{longHint.value.length}}</md-hint>
</md-input-container>
</p>
<p>
Expand All @@ -249,7 +257,8 @@ <h4>Textarea</h4>
<md-input-container [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
<input mdInput
required
[placeholder]="hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'">
[placeholder]="hideRequiredMarker ?
'Required Without Marker' : 'Required With Marker'">
</md-input-container>
</p>
<p>
Expand Down Expand Up @@ -327,11 +336,13 @@ <h4>Textarea</h4>
<md-card class="demo-card demo-basic">
<md-toolbar color="primary">Forms</md-toolbar>
<md-card-content>
<md-input-container><input mdInput placeholder="reactive" [formControl]="formControl"></md-input-container>
<md-input-container><input mdInput placeholder="reactive" [formControl]="formControl">
</md-input-container>
<md-input-container>
<input mdInput placeholder="template" [(ngModel)]="model" required [disabled]="ctrlDisabled">
</md-input-container>
<button md-raised-button color="primary" (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
<button md-raised-button color="primary"
(click)="formControl.enabled ? formControl.disable() : formControl.enable()">
DISABLE REACTIVE CTRL
</button>
<button md-raised-button color="primary" (click)="ctrlDisabled = !ctrlDisabled">
Expand Down