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

Commit 42fcfbe

Browse files
AlmeroSteynAlmeroSteyn
committed
doc(cb-a11y): Labelling form controls: content
1 parent 5d70288 commit 42fcfbe

11 files changed

+205
-71
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<span class="value-label label label-default">Current value: {{displayValue}}</span>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component, Input} from "angular2/core";
2+
3+
@Component({
4+
selector: 'a11y-value-helper',
5+
templateUrl: './app/a11y-value-helper.component.html',
6+
styles: [`
7+
.value-label {
8+
position:relative;
9+
top: -15px;
10+
}
11+
`]
12+
})
13+
export class A11yValueHelper {
14+
15+
@Input()
16+
displayValue: any;
17+
18+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
div.edit-box{
33
height: auto;
44
min-height: 50px;
5-
width: 30%;
65
}
76
/* #enddocregion */

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<!-- #docregion -->
2-
<div class="form-group">
3-
<label [id]="uniqueId">
4-
<ng-content></ng-content>
5-
</label>
6-
<div #divTextBox
7-
role="textbox"
8-
aria-multiline="true"
9-
[attr.aria-labelledby]="uniqueId"
10-
class="form-control edit-box"
11-
[innerHTML]="outerValue"
12-
(keypress)="onChange($event, divTextBox.innerHTML)"
13-
(blur)="onBlur()"
14-
contenteditable></div>
2+
<div class="row">
3+
<div class="form-group col-xs-6">
4+
<label [id]="uniqueId">
5+
<ng-content></ng-content>
6+
</label>
7+
<div #divTextBox
8+
role="textbox"
9+
aria-multiline="true"
10+
[attr.aria-labelledby]="uniqueId"
11+
class="form-control edit-box"
12+
[innerHTML]="outerValue"
13+
(keypress)="onChange($event, divTextBox.innerHTML)"
14+
(blur)="onBlur()"
15+
contenteditable></div>
16+
</div>
1517
</div>
1618
<!-- #enddocregion -->

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

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,19 @@ <h3>Implicit labeling</h3>
1818
</div>
1919
<!-- #enddocregion -->
2020

21+
<a11y-value-helper [displayValue]="inputModel"></a11y-value-helper>
22+
2123
<!-- #docregion cb-a11y-form-controls-textarea-implicit -->
2224
<div class="form-group">
2325
<label>Type some text:
2426
<textarea class="form-control"
25-
[(ngModel)]="textModel"></textarea>
27+
[(ngModel)]="textModel"></textarea>
2628
</label>
2729
</div>
2830
<!-- #enddocregion -->
2931

32+
<a11y-value-helper [displayValue]="textModel"></a11y-value-helper>
33+
3034
<!-- #docregion cb-a11y-form-controls-checkboxes-implicit -->
3135
<fieldset class="form-group row">
3236
<legend class="col-xs-12">
@@ -44,6 +48,8 @@ <h3>Implicit labeling</h3>
4448
</fieldset>
4549
<!-- #enddocregion -->
4650

51+
<a11y-value-helper [displayValue]="checkboxModel | json"></a11y-value-helper>
52+
4753
<!-- #docregion cb-a11y-form-controls-radiobuttons-implicit -->
4854
<fieldset class="form-group row">
4955
<legend class="col-xs-12">
@@ -63,6 +69,8 @@ <h3>Implicit labeling</h3>
6369
</fieldset>
6470
<!-- #enddocregion -->
6571

72+
<a11y-value-helper [displayValue]="radioModel"></a11y-value-helper>
73+
6674
<!-- #docregion cb-a11y-form-controls-select-implicit -->
6775
<div class="form-group">
6876
<label>Why are interested in a11y?
@@ -77,7 +85,7 @@ <h3>Implicit labeling</h3>
7785
</div>
7886
<!-- #enddocregion -->
7987

80-
<button class="btn btn-primary" (click)="submitMe()">Submit</button>
88+
<a11y-value-helper [displayValue]="selectModel"></a11y-value-helper>
8189

8290
</section>
8391

@@ -98,7 +106,7 @@ <h3>Explicit labeling</h3>
98106
</div>
99107
<!-- #enddocregion -->
100108

101-
<button class="btn btn-primary" (click)="submitMe()">Submit</button>
109+
<a11y-value-helper [displayValue]="inputExplicitModel"></a11y-value-helper>
102110

103111
</section>
104112

@@ -120,6 +128,8 @@ <h3>Hiding labels</h3>
120128
</div>
121129
<!-- #enddocregion -->
122130

131+
<a11y-value-helper [displayValue]="searchModel"></a11y-value-helper>
132+
123133
<!-- #docregion cb-a11y-form-controls-hidden-label-aria -->
124134
<div class="form-group">
125135
<input placeholder="Filter... (Labelled with aria-label)"
@@ -129,7 +139,7 @@ <h3>Hiding labels</h3>
129139
</div>
130140
<!-- #enddocregion -->
131141

132-
<button class="btn btn-primary" (click)="submitMe()">Submit</button>
142+
<a11y-value-helper [displayValue]="filterModel"></a11y-value-helper>
133143

134144
</section>
135145

@@ -139,16 +149,23 @@ <h3>Labeling custom controls</h3>
139149
<hr>
140150
</header>
141151

142-
<a11y-input-wrapper>
152+
<!-- #docregion cb-a11y-form-controls-custom-control-usage -->
153+
<a11y-custom-control [(ngModel)]="inputDivModel">
154+
Write in this labelled div:
155+
</a11y-custom-control>
156+
<!--#enddocregion-->
157+
158+
<a11y-value-helper [displayValue]="inputDivModel"></a11y-value-helper>
159+
160+
<!-- #docregion cb-a11y-form-controls-custom-control-wrapped-usage -->
161+
<a11y-input-wrapper (onSave)="onSave()">
143162
<span class="wrapped-label">Write in this wrapped input:</span>
144-
<input class="form-control" [(ngModel)]="inputWrappedModel">
163+
<input [(ngModel)]="inputWrappedModel">
145164
</a11y-input-wrapper>
146-
147-
{{inputDivModel}}
148-
<!-- #docregion cb-a11y-form-controls-custom-control-usage -->
149-
<a11y-custom-control [(ngModel)]="inputDivModel">Write in this labelled div:</a11y-custom-control>
150165
<!--#enddocregion-->
151166

167+
<a11y-value-helper [displayValue]="inputWrappedSaveModel"></a11y-value-helper>
168+
152169
</section>
153170
<a href="" [routerLink]="['Index']">Back to index...</a>
154171
</article>

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

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {A11yHelper} from "../services/a11y-helper.service";
44
import {ROUTER_DIRECTIVES} from "angular2/router";
55
import {A11yCustomControl} from "./a11y-custom-control.component";
66
import {A11yInputWrapper} from "./a11y-input-wrapper.component";
7+
import {A11yValueHelper} from "../a11y-value-helper.component";
78

89
@Component({
910
selector: 'a11y-form-controls',
@@ -13,7 +14,8 @@ import {A11yInputWrapper} from "./a11y-input-wrapper.component";
1314
FORM_DIRECTIVES,
1415
ROUTER_DIRECTIVES,
1516
A11yCustomControl,
16-
A11yInputWrapper
17+
A11yInputWrapper,
18+
A11yValueHelper
1719
]
1820
})
1921
export class A11yFormControls implements OnInit {
@@ -25,31 +27,20 @@ export class A11yFormControls implements OnInit {
2527
inputModel:string;
2628
inputExplicitModel: string;
2729
inputWrappedModel: string;
30+
inputWrappedSaveModel:string = '';
2831
inputDivModel: string = '';
2932
textModel:string;
3033
selectModel: string;
3134
searchModel: string;
3235
filterModel: string;
3336

34-
radioModel:string = '2';
35-
checkboxModel:Array<string> = ["1", "2"];
37+
radioModel:string = 'TypeScript';
38+
checkboxModel:Array<string> = ["Observables", "Components"];
3639

3740

3841
constructor(private _a11yHelper:A11yHelper) {
3942
}
4043

41-
submitMe():void {
42-
console.log(this.inputModel);
43-
console.log(this.textModel);
44-
console.log(this.checkboxModel);
45-
console.log(this.radioModel);
46-
console.log(this.selectModel);
47-
console.log(this.inputExplicitModel);
48-
console.log(this.searchModel);
49-
console.log(this.filterModel);
50-
console.log(this.inputWrappedModel);
51-
}
52-
5344
isChecked(item:string):boolean {
5445
return this._a11yHelper.isStringInArray(this.checkboxModel, item);
5546
}
@@ -58,6 +49,10 @@ export class A11yFormControls implements OnInit {
5849
this._a11yHelper.toggleItemInArray(this.checkboxModel, item);
5950
}
6051

52+
onSave(){
53+
this.inputWrappedSaveModel = this.inputWrappedModel;
54+
}
55+
6156
ngOnInit() {
6257
this.checkBoxes = this._a11yHelper.getCheckboxModel();
6358
this.radioButtons = this._a11yHelper.getRadiobuttonsModel();

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* #docregion */
2+
:host input {
3+
display: block;
4+
width: 100%;
5+
height: 34px;
6+
padding: 6px 12px;
7+
font-size: 14px;
8+
line-height: 1.42857143;
9+
color: #555;
10+
background-color: #fff;
11+
background-image: none;
12+
border: 1px solid #ccc;
13+
border-radius: 4px;
14+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
15+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
16+
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
17+
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
18+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
19+
}
20+
21+
:host input:focus {
22+
border-color: #66afe9;
23+
outline: 0;
24+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
25+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
26+
}
27+
/* #enddocregion */

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
1-
<div class="form-group">
2-
<label><ng-content select=".wrapped-label"></ng-content>
3-
<ng-content select="input"></ng-content>
4-
</label>
1+
<!-- #docregion -->
2+
<div class="row">
3+
<div class="form-group col-xs-6">
4+
<label>
5+
<ng-content select=".wrapped-label"></ng-content>
6+
<div class="input-group">
7+
<ng-content select="input"></ng-content>
8+
<div class="input-group-btn">
9+
<button type="button"
10+
class="btn btn-default"
11+
(click)="save()">
12+
Save
13+
</button>
14+
</div>
15+
</div>
16+
</label>
17+
</div>
518
</div>
19+
<!-- #enddocregion -->

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
import {Component} from "angular2/core";
1+
import {Component, Output, EventEmitter} from "angular2/core";
22

3+
// #docregion
34
@Component({
45
selector: 'a11y-input-wrapper',
5-
templateUrl: './app/form-controls/a11y-input-wrapper.component.html'
6+
templateUrl: './app/form-controls/a11y-input-wrapper.component.html',
7+
styleUrls: ['./app/form-controls/a11y-input-wrapper.component.css']
68
})
79
export class A11yInputWrapper{
8-
10+
11+
@Output()
12+
onSave: EventEmitter<any> = new EventEmitter();
13+
14+
save(){
15+
this.onSave.emit(null);
16+
}
917
}
18+
// #enddocregion

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@ export class A11yHelper {
1717
return [
1818
{
1919
name: 'Template syntax',
20-
value: 0
20+
value: 'Template syntax'
2121
},
2222
{
2323
name: 'Observables',
24-
value: 1
24+
value: 'Observables'
2525
},
2626
{
2727
name: 'Components',
28-
value: 2
28+
value: 'Components'
2929
},
3030
{
3131
name: 'Forms',
32-
value: 3
32+
value: 'Forms'
3333
}
3434
];
3535
}
@@ -38,19 +38,19 @@ export class A11yHelper {
3838
return [
3939
{
4040
name: 'TypeScript',
41-
value: 0
41+
value: 'TypeScript'
4242
},
4343
{
4444
name: 'JavaScript',
45-
value: 1
45+
value: 'JavaScript'
4646
},
4747
{
4848
name: 'ES6',
49-
value: 2
49+
value: 'ES6'
5050
},
5151
{
5252
name: 'Dart',
53-
value: 3
53+
value: 'Dart'
5454
}
5555
];
5656
}
@@ -59,15 +59,15 @@ export class A11yHelper {
5959
return [
6060
{
6161
name: 'Curiosity',
62-
value: 0
62+
value: 'Curiosity'
6363
},
6464
{
6565
name: 'Increased userbase',
66-
value: 1
66+
value: 'Increased userbase'
6767
},
6868
{
6969
name: 'Legal reasons',
70-
value: 2
70+
value: 'Legal reasons'
7171
}
7272
];
7373
}
@@ -84,7 +84,7 @@ export class A11yHelper {
8484
isStringInArray(stringArray: Array<string>, item: string): boolean {
8585
return stringArray.indexOf(item.toString()) != -1;
8686
}
87-
87+
8888
removeHtmlStringBreaks(inputValue: string):string{
8989
return inputValue.replace(new RegExp('<div>', 'g'), '')
9090
.replace(new RegExp('</div>', 'g'), '\n')

0 commit comments

Comments
 (0)