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

Commit b49f4c4

Browse files
AlmeroSteynAlmeroSteyn
committed
doc(cb-a11y): Labelling form controls: content
1 parent 2c6ffc9 commit b49f4c4

File tree

5 files changed

+545
-351
lines changed

5 files changed

+545
-351
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!-- #docregion -->
2+
<div class="form-group">
3+
<label [id]="uniqueId">
4+
<ng-content></ng-content>
5+
</label>
6+
<div role="textbox"
7+
[attr.aria-labelledby]="uniqueId"
8+
class="form-control"
9+
contenteditable></div>
10+
</div>
11+
<!-- #enddocregion -->

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

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

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

Lines changed: 157 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,162 @@
11
<article role="article">
2-
<header class="row well">
3-
<h2>Accessible form control labels</h2>
2+
<header class="row well">
3+
<h2>Accessible form control labels</h2>
4+
</header>
5+
6+
<section class="row well">
7+
<header>
8+
<h3>Implicit labeling</h3>
9+
<hr>
10+
</header>
11+
12+
<div class="form-group">
13+
<label>Type something:
14+
<input class="form-control"
15+
[(ngModel)]="inputModel">
16+
</label>
17+
</div>
18+
19+
<div class="form-group">
20+
<label>Type some text:
21+
<input class="form-control"
22+
[(ngModel)]="textModel">
23+
</label>
24+
</div>
25+
26+
<fieldset class="form-group row">
27+
<legend class="col-xs-12">
28+
What do you like most about Angular 2?
29+
</legend>
30+
<div *ngFor="#checkbox of checkBoxes" class="checkbox col-xs-12">
31+
<label>
32+
<input #checkboxInput type="checkbox"
33+
[checked]="isChecked(checkbox.value)"
34+
(click)="toggleCheckbox(checkboxInput.value)"
35+
[value]="checkbox.value" [name]="checkboxName">
36+
{{checkbox.name}}
37+
</label>
38+
</div>
39+
</fieldset>
40+
41+
<fieldset class="form-group row">
42+
<legend class="col-xs-12">
43+
Choose your favourite Angular 2 language
44+
</legend>
45+
<div *ngFor="#radiobutton of radioButtons"
46+
class="radio col-xs-12">
47+
<label>
48+
<input type="radio"
49+
[checked]="radioModel == radiobutton.value"
50+
[value]="radiobutton.value"
51+
[name]="'language'"
52+
(click)="radioModel = radiobutton.value">
53+
{{radiobutton.name}}
54+
</label>
55+
</div>
56+
</fieldset>
57+
58+
<div class="form-group">
59+
<label>Why are interested in a11y?
60+
<select class="form-control"
61+
[(ngModel)]="selectModel">
62+
<option *ngFor="#option of selectOptions"
63+
[value]="option.value">
64+
{{option.name}}
65+
</option>
66+
</select>
67+
</label>
68+
</div>
69+
70+
<button class="btn btn-primary" (click)="submitMe()">Submit</button>
71+
72+
</section>
73+
74+
<section class="row well">
75+
<header>
76+
<h3>Explicit labeling</h3>
77+
<hr>
78+
</header>
79+
80+
<div class="form-group">
81+
<label for="inputexplicit">
82+
Label for input:
83+
</label>
84+
<input id="inputexplicit"
85+
[(ngModel)]="inputExplicitModel"
86+
class="form-control">
87+
</div>
88+
89+
<button class="btn btn-primary" (click)="submitMe()">Submit</button>
90+
91+
</section>
92+
93+
<!--<section class="row well">-->
94+
<!--<header>-->
95+
<!--<h3>Implicit labeling</h3>-->
96+
<!--<hr>-->
97+
<!--</header>-->
98+
99+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-input-usage &ndash;&gt;-->
100+
<!--<a11y-input>Type something:</a11y-input>-->
101+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
102+
103+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-textarea-usage &ndash;&gt;-->
104+
<!--<a11y-textarea>Type some text:</a11y-textarea>-->
105+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
106+
107+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-checkboxes-usage &ndash;&gt;-->
108+
<!--<a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">-->
109+
<!--What do you like most about Angular 2?-->
110+
<!--</a11y-checkboxes>-->
111+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
112+
113+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-radiobuttons-usage &ndash;&gt;-->
114+
<!--<a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">-->
115+
<!--Choose your favourite Angular 2 language:-->
116+
<!--</a11y-radiobuttons>-->
117+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
118+
119+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-select-usage &ndash;&gt;-->
120+
<!--<a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>-->
121+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
122+
123+
<!--</section>-->
124+
<!--<section class="row well">-->
125+
<!--<header>-->
126+
<!--<h3>Explicit labeling</h3>-->
127+
<!--<hr>-->
128+
<!--</header>-->
129+
130+
<!--&lt;!&ndash; #docregion cb-a11y-form-controls-input-explicit-usage &ndash;&gt;-->
131+
<!--<a11y-input-explicit> Label for input:</a11y-input-explicit>-->
132+
<!--&lt;!&ndash;#enddocregion&ndash;&gt;-->
133+
134+
<!--</section>-->
135+
<section class="row well">
136+
<header>
137+
<h3>Hiding labels</h3>
138+
<hr>
4139
</header>
5-
<section class="row well">
6-
<header>
7-
<h3>Implicit labeling</h3>
8-
<hr>
9-
</header>
10-
11-
<!-- #docregion cb-a11y-form-controls-input-usage -->
12-
<a11y-input>Type something:</a11y-input>
13-
<!--#enddocregion-->
14-
15-
<!-- #docregion cb-a11y-form-controls-textarea-usage -->
16-
<a11y-textarea>Type some text:</a11y-textarea>
17-
<!--#enddocregion-->
18-
19-
<!-- #docregion cb-a11y-form-controls-checkboxes-usage -->
20-
<a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">
21-
What do you like most about Angular 2?
22-
</a11y-checkboxes>
23-
<!--#enddocregion-->
24-
25-
<!-- #docregion cb-a11y-form-controls-radiobuttons-usage -->
26-
<a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">
27-
Choose your favourite Angular 2 language:
28-
</a11y-radiobuttons>
29-
<!--#enddocregion-->
30-
31-
<!-- #docregion cb-a11y-form-controls-select-usage -->
32-
<a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>
33-
<!--#enddocregion-->
34-
35-
</section>
36-
<section class="row well">
37-
<header>
38-
<h3>Explicit labeling</h3>
39-
<hr>
40-
</header>
41-
42-
<!-- #docregion cb-a11y-form-controls-input-explicit-usage -->
43-
<a11y-input-explicit> Label for input:</a11y-input-explicit>
44-
<!--#enddocregion-->
45-
46-
</section>
47-
<section class="row well">
48-
<header>
49-
<h3>Hiding labels</h3>
50-
<hr>
51-
</header>
52-
53-
<!-- #docregion cb-a11y-form-controls-hidden-labels-usage -->
54-
<a11y-hidden-labels [label1]="'Search:'"
55-
[label2]="'Filter:'">
56-
</a11y-hidden-labels>
57-
<!--#enddocregion-->
58-
59-
</section>
60-
<section class="row well">
61-
<header>
62-
<h3>Labeling custom controls</h3>
63-
<hr>
64-
</header>
65-
</section>
66-
<a href="" [routerLink]="['Index']">Back to index...</a>
140+
141+
<!-- #docregion cb-a11y-form-controls-hidden-labels-usage -->
142+
<a11y-hidden-labels [label1]="'Search:'"
143+
[label2]="'Filter:'">
144+
</a11y-hidden-labels>
145+
<!--#enddocregion-->
146+
147+
</section>
148+
<section class="row well">
149+
<header>
150+
<h3>Labeling custom controls</h3>
151+
<hr>
152+
</header>
153+
154+
<!-- #docregion cb-a11y-form-controls-custom-control-usage -->
155+
<a11y-custom-control>Write in this labelled div:</a11y-custom-control>
156+
<!--#enddocregion-->
157+
158+
</section>
159+
<a href="" [routerLink]="['Index']">Back to index...</a>
67160
</article>
68161

69162

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

Lines changed: 58 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,70 @@ import {A11yTextarea} from "./a11y-textarea.component";
99
import {A11yHiddenLabels} from "./a11y-hidden-labels.component";
1010
import {A11yHelper} from "../services/a11y-helper.service";
1111
import {ROUTER_DIRECTIVES} from "angular2/router";
12+
import {A11yCustomControl} from "./a11y-custom-control.component";
1213

1314
@Component({
14-
selector: 'a11y-form-controls',
15-
templateUrl: './app/form-controls/a11y-form-controls.component.html',
16-
directives: [
17-
CORE_DIRECTIVES,
18-
FORM_DIRECTIVES,
19-
ROUTER_DIRECTIVES,
20-
A11yInput,
21-
A11yInputExplicit,
22-
A11yCheckboxes,
23-
A11yRadiobuttons,
24-
A11ySelect,
25-
A11yTextarea,
26-
A11yHiddenLabels
27-
]
15+
selector: 'a11y-form-controls',
16+
templateUrl: './app/form-controls/a11y-form-controls.component.html',
17+
directives: [
18+
CORE_DIRECTIVES,
19+
FORM_DIRECTIVES,
20+
ROUTER_DIRECTIVES,
21+
A11yInput,
22+
A11yInputExplicit,
23+
A11yCheckboxes,
24+
A11yRadiobuttons,
25+
A11ySelect,
26+
A11yTextarea,
27+
A11yHiddenLabels,
28+
A11yCustomControl
29+
]
2830
})
2931
export class A11yFormControls implements OnInit {
3032

31-
checkBoxes:any;
32-
radioButtons:any;
33-
selectOptions:any;
33+
checkBoxes:any;
34+
radioButtons:any;
35+
selectOptions:any;
3436

35-
constructor(private _a11yHelper:A11yHelper) {
36-
}
37+
inputModel:string;
38+
inputExplicitModel: string;
39+
textModel:string;
40+
radioModel:string = '2';
41+
checkboxModel:Array<string> = ["1", "2"];
42+
selectModel: string;
43+
44+
45+
46+
constructor(private _a11yHelper:A11yHelper) {
47+
}
3748

38-
ngOnInit() {
39-
this.checkBoxes = this._a11yHelper.getCheckboxModel();
40-
this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
41-
this.selectOptions = this._a11yHelper.getSelectOptions();
49+
submitMe():void {
50+
console.log(this.inputModel);
51+
console.log(this.textModel);
52+
console.log(this.checkboxModel);
53+
console.log(this.radioModel);
54+
console.log(this.selectModel);
55+
console.log(this.inputExplicitModel);
56+
}
57+
58+
isChecked(entry:string):boolean {
59+
return this.checkboxModel.indexOf(entry.toString()) != -1;
60+
}
61+
62+
toggleCheckbox(entry:string):void {
63+
var entryIndex = this.checkboxModel.indexOf(entry);
64+
if (entryIndex != -1) {
65+
this.checkboxModel.splice(entryIndex, 1);
66+
} else {
67+
this.checkboxModel.push(entry);
4268
}
69+
}
70+
71+
ngOnInit() {
72+
this.checkBoxes = this._a11yHelper.getCheckboxModel();
73+
this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
74+
this.selectOptions = this._a11yHelper.getSelectOptions();
75+
76+
}
4377

44-
}
78+
}

0 commit comments

Comments
 (0)