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

Commit aae202b

Browse files
AlmeroSteynAlmeroSteyn
committed
docs(cb-a11y): Building examples - Form controls
1 parent 64d1cae commit aae202b

File tree

5 files changed

+55
-97
lines changed

5 files changed

+55
-97
lines changed

‎public/docs/_examples/cb-a11y/ts/a11y.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
label {
22
color: #424242;
3+
width: 100%;
34
}
45

56
.background-contrast {

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

Lines changed: 50 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,52 @@
1-
<form>
1+
<article role="article">
2+
<header class="row well">
3+
<h2>Accessible form control labels</h2>
4+
</header>
5+
<section class="row well">
6+
<header>
7+
<h3>Implicit labeling</h3>
8+
</header>
9+
10+
<a11y-input>Type something:</a11y-input>
11+
12+
<div class="form-group">
13+
<label>Test
14+
<textarea class="form-control"></textarea>
15+
</label>
16+
</div>
17+
18+
<a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">
19+
What do you like most about Angular 2?
20+
</a11y-checkboxes>
21+
22+
<a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">
23+
Choose your favourite Angular 2 language:
24+
</a11y-radiobuttons>
25+
26+
<a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>
27+
28+
</section>
29+
<section class="row well">
30+
<header>
31+
<h3>Explicit labeling</h3>
32+
</header>
33+
34+
<a11y-input-explicit [uniqueId]="'forinput'">
35+
Label for input:
36+
</a11y-input-explicit>
37+
38+
</section>
39+
<section class="row well">
40+
<header>
41+
<h3>Hiding labels</h3>
42+
</header>
43+
</section>
44+
<section class="row well">
45+
<header>
46+
<h3>Labeling custom controls</h3>
47+
</header>
48+
</section>
49+
50+
</article>
251

3-
<a11y-input>Type something:</a11y-input>
452

5-
6-
<div class="form-group">
7-
<label>Test
8-
<textarea class="form-control"></textarea>
9-
</label>
10-
</div>
11-
12-
<a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">
13-
What do you like most about Angular 2?
14-
</a11y-checkboxes>
15-
16-
<a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">
17-
Choose your favourite Angular 2 language:
18-
</a11y-radiobuttons>
19-
20-
<a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>
21-
22-
23-
<!--<div class="form-group">-->
24-
<!--<label>Why are you interested in a11y?-->
25-
<!--<select class="form-control">-->
26-
<!--<option value="1">Curiosity</option>-->
27-
<!--<option value="2">Increased userbase</option>-->
28-
<!--<option value="3">Legal reasons</option>-->
29-
<!--</select>-->
30-
<!--</label>-->
31-
<!--</div>-->
32-
33-
<!--<label for="fortextArea">-->
34-
<!--Label for text area:-->
35-
<!--</label>-->
36-
<!--<textarea id="fortextArea" class="form-control"></textarea>-->
37-
38-
<!--<fieldset class="form-group row">-->
39-
<!--<div class="col-xs-12">-->
40-
<!--<legend>What do you like most about Angular 2:</legend>-->
41-
<!--<div class="checkbox col-xs-12">-->
42-
<!--<input id="templatesyntax" type="checkbox" name="likes" value="templateSyntax">-->
43-
<!--<label for="templatesyntax">Template syntax</label>-->
44-
<!--</div>-->
45-
<!--<div class="checkbox col-xs-12">-->
46-
<!--<input id="observables" type="checkbox" name="likes" value="observables">-->
47-
<!--<label for="observables">Observables</label><br>-->
48-
<!--</div>-->
49-
<!--<div class="checkbox col-xs-12">-->
50-
<!--<input id="components" type="checkbox" name="likes" value="components">-->
51-
<!--<label for="components">Components</label><br>-->
52-
<!--</div>-->
53-
<!--<div class="checkbox col-xs-12">-->
54-
<!--<input id="forms" type="checkbox" name="likes" value="forms">-->
55-
<!--<label for="forms">Forms</label>-->
56-
<!--</div>-->
57-
<!--</div>-->
58-
<!--</fieldset>-->
59-
60-
<!--<fieldset class="form-group row">-->
61-
<!--<div class="col-xs-12">-->
62-
<!--<legend>Choose your favourite Angular 2 language:</legend>-->
63-
<!--<div class="radio col-xs-12">-->
64-
<!--<input id="typescript" type="radio" name="language" value="typeScript">-->
65-
<!--<label for="typescript">TypeScript</label><br>-->
66-
<!--</div>-->
67-
<!--<div class="radio col-xs-12">-->
68-
<!--<input id="javascript" type="radio" name="shipping" value="javaScript">-->
69-
<!--<label for="javascript">JavaScript</label><br>-->
70-
<!--</div>-->
71-
<!--<div class="radio col-xs-12">-->
72-
<!--<input id="es6" type="radio" name="shipping" value="es6">-->
73-
<!--<label for="es6">ES6</label>-->
74-
<!--</div>-->
75-
<!--<div class="radio col-xs-12">-->
76-
<!--<input id="dart" type="radio" name="shipping" value="dart">-->
77-
<!--<label for="dart">Dart</label>-->
78-
<!--</div>-->
79-
<!--</div>-->
80-
<!--</fieldset>-->
81-
82-
<!--<label for="a11yreason">Why are you interested in a11y?</label>-->
83-
<!--<select id="a11yreason" name="a11yreason" class="form-control">-->
84-
<!--<option value="1">Curiosity</option>-->
85-
<!--<option value="2">Increased userbase</option>-->
86-
<!--<option value="3">Legal reasons</option>-->
87-
<!--</select>-->
88-
89-
<a11y-input-explicit [uniqueId]="'forinput'">
90-
Label for input:
91-
</a11y-input-explicit>
92-
93-
</form>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group">
1+
<div class="form-group col-xs-12">
22
<!-- #docregion cb-a11y-form-controls-input -->
33
<label>
44
<ng-content></ng-content>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<header role="banner" class="jumbotron well text-center background-contrast">
22
<h1 id="top">Angular 2 A11y Cookbook</h1>
3-
4-
53
</header>
6-
<div class="container well">
4+
<main role="main" class="container">
75
<a11y-form-controls></a11y-form-controls>
8-
</div>
6+
</main>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {A11yHelper} from "./services/a11y-helper.service";
66
selector: 'app',
77
templateUrl: 'app/app.component.html',
88
directives:[A11yFormControls],
9-
providers: [A11yHelper ]
9+
providers: [A11yHelper]
1010
})
1111
export class AppComponent {
1212

0 commit comments

Comments
 (0)