Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit f9b7050

Browse files
AlmeroSteynAlmeroSteyn
committed
docs(cb-a11y): Building examples - Form controls
1 parent 8945402 commit f9b7050

8 files changed

+97
-35
lines changed

‎public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.html

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,30 @@
11
<form #accessibleForm="ngForm"
22
(ngSubmit)="submit(accessibleForm.value)">
33

4-
<a11y-input [uniqueId]="'forinput'">
5-
Label for input:
6-
</a11y-input>
4+
<a11y-input>Label for input:</a11y-input>
5+
6+
<div class="form-group">
7+
<label>Test
8+
<input class="form-control">
9+
</label>
10+
</div>
11+
12+
<div class="form-group">
13+
<label>Test
14+
<textarea class="form-control"></textarea>
15+
</label>
16+
</div>
17+
18+
<div class="form-group">
19+
<label for="a11yreason">Why are you interested in a11y?
20+
<select id="a11yreason" name="a11yreason" class="form-control">
21+
<option value="1">Curiosity</option>
22+
<option value="2">Increased userbase</option>
23+
<option value="3">Legal reasons</option>
24+
</select>
25+
</label>
26+
</div>
27+
728

829
<label for="fortextArea">
930
Label for text area:
@@ -34,37 +55,36 @@
3455

3556
<fieldset class="form-group row">
3657
<div class="col-xs-12">
37-
<legend>Choose a shipping method:</legend>
58+
<legend>Choose your favourite Angular 2 language:</legend>
59+
<div class="radio col-xs-12">
60+
<input id="typescript" type="radio" name="language" value="typeScript">
61+
<label for="typescript">TypeScript</label><br>
62+
</div>
3863
<div class="radio col-xs-12">
39-
<input id="overnight" type="radio" name="shipping" value="overnight">
40-
<label for="overnight">Overnight</label><br>
64+
<input id="javascript" type="radio" name="shipping" value="javaScript">
65+
<label for="javascript">JavaScript</label><br>
4166
</div>
4267
<div class="radio col-xs-12">
43-
<input id="twoday" type="radio" name="shipping" value="twoday">
44-
<label for="twoday">Two day</label><br>
68+
<input id="es6" type="radio" name="shipping" value="es6">
69+
<label for="es6">ES6</label>
4570
</div>
4671
<div class="radio col-xs-12">
47-
<input id="ground" type="radio" name="shipping" value="ground">
48-
<label for="ground">Ground</label>
72+
<input id="dart" type="radio" name="shipping" value="dart">
73+
<label for="dart">Dart</label>
4974
</div>
5075
</div>
5176
</fieldset>
5277

53-
<label for="favcity">Choose your favorite city?</label>
54-
<select id="favcity" name="select" class="form-control">
55-
<option value="1">Amsterdam</option>
56-
<option value="2">Buenos Aires</option>
57-
<option value="3">Delhi</option>
58-
<option value="4">Hong Kong</option>
59-
<option value="5">London</option>
60-
<option value="6">Los Angeles</option>
61-
<option value="7">Moscow</option>
62-
<option value="8">Mumbai</option>
63-
<option value="9">New York</option>
64-
<option value="10">Sao Paulo</option>
65-
<option value="11">Tokyo</option>
66-
</select>
78+
<!--<label for="a11yreason">Why are you interested in a11y?</label>-->
79+
<!--<select id="a11yreason" name="a11yreason" class="form-control">-->
80+
<!--<option value="1">Curiosity</option>-->
81+
<!--<option value="2">Increased userbase</option>-->
82+
<!--<option value="3">Legal reasons</option>-->
83+
<!--</select>-->
6784

85+
<a11y-input-explicit [uniqueId]="'forinput'">
86+
Label for input:
87+
</a11y-input-explicit>
6888

6989
<button class="btn btn-primary" type="submit">Submit</button>
7090

‎public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {Component} from "angular2/core";
22
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
33
import {A11yInput} from "./a11y-input.component";
4+
import {A11yInputExplicit} from "./a11y-input-explicit.component";
45

56
@Component({
67
selector: 'a11y-form-controls',
78
templateUrl: './app/a11y-form-controls.component.html',
8-
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput]
9+
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput, A11yInputExplicit]
910
})
1011
export class A11yFormControls {
1112

‎public/docs/_examples/cb-a11y/ts/app/a11y-input-explicit.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- #docregion cb-a11y-form-controls-input-explicit -->
2+
<label [attr.for]="uniqueId">
3+
<ng-content></ng-content>
4+
</label>
5+
<input [id]="uniqueId"
6+
class="form-control">
7+
<!--#enddocregion-->

‎public/docs/_examples/cb-a11y/ts/app/a11y-input-explicit.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component, Input, OnInit} from "angular2/core";
2+
import {A11yHelper} from "./services/a11y-helper.service";
3+
4+
@Component({
5+
selector: 'a11y-input-explicit',
6+
templateUrl: './app/a11y-input-explicit.component.html'
7+
})
8+
export class A11yInputExplicit implements OnInit{
9+
10+
uniqueId:string;
11+
12+
constructor(private _a11yHelper:A11yHelper){}
13+
14+
ngOnInit(){
15+
this.uniqueId = this._a11yHelper.generateUniqueIdString();
16+
}
17+
}

‎public/docs/_examples/cb-a11y/ts/app/a11y-input.component.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<!-- #docregion cb-a11y-form-controls-input-for2 -->
2-
<label [attr.for]="uniqueId">
1+
<!-- #docregion cb-a11y-form-controls-input -->
2+
<label>
33
<ng-content></ng-content>
4+
<input [id]="uniqueId" class="form-control">
45
</label>
5-
<input [id]="uniqueId"
6-
class="form-control">
76
<!--#enddocregion-->

‎public/docs/_examples/cb-a11y/ts/app/a11y-input.component.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import {Component, Input} from "angular2/core";
1+
import {Component} from "angular2/core";
22

33
@Component({
44
selector: 'a11y-input',
55
templateUrl: './app/a11y-input.component.html'
66
})
7-
export class A11yInput {
8-
@Input()
9-
uniqueId:string;
10-
7+
export class A11yInput{
118
}

‎public/docs/_examples/cb-a11y/ts/app/app.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import {Component} from 'angular2/core';
22
import {A11yFormControls} from "./a11y-form-controls.component";
3+
import {A11yHelper} from "./services/a11y-helper.service";
34

45
@Component({
56
selector: 'app',
67
templateUrl: 'app/app.component.html',
7-
directives:[A11yFormControls]
8+
directives:[A11yFormControls],
9+
providers: [A11yHelper ]
810
})
911
export class AppComponent {
1012

‎public/docs/_examples/cb-a11y/ts/app/services/a11y-helper.service.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Injectable} from "angular2/core";
2+
3+
@Injectable()
4+
export class A11yHelper {
5+
generateUniqueIdString():string {
6+
return (this.randomGuidSnippet() +
7+
this.randomGuidSnippet() + "-" +
8+
this.randomGuidSnippet() + "-4" +
9+
this.randomGuidSnippet().substr(0,3) + "-" +
10+
this.randomGuidSnippet() + "-" +
11+
this.randomGuidSnippet() +
12+
this.randomGuidSnippet() +
13+
this.randomGuidSnippet()).toLowerCase();
14+
}
15+
16+
private randomGuidSnippet (): string {
17+
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
18+
}
19+
}

0 commit comments

Comments
 (0)