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

Commit 2c6ffc9

Browse files
AlmeroSteynwardbell
AlmeroSteyn
authored and
wardbell
committed
docs(cb-a11y): add accessibility (a11y) cookbook
1 parent 9c73527 commit 2c6ffc9

30 files changed

+1004
-2
lines changed

Diff for: ‎public/docs/_examples/cb-a11y/ts/.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
styles.css
2+
typings
3+
typings.json
4+
*.js.map
5+
package.json
6+
karma.conf.js
7+
karma-test-shim.js
8+
tsconfig.json
9+
npm-debug*.
10+
**/protractor.config.js
11+

Diff for: ‎public/docs/_examples/cb-a11y/ts/a11y.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
label {
2+
color: #424242;
3+
width: 100%;
4+
}
5+
6+
hr {
7+
border-top: 3px double #8c8b8b;
8+
}
9+
10+
.background-contrast {
11+
background-color: #0143A3;
12+
color: #fff;
13+
}
14+
15+
/*This is a copy of the .form-control class in bootstrap
16+
to enable adding it to all form controls without to much
17+
noise in the examples.*/
18+
/*div:not(.radio):not(.checkbox) input, textarea, select {*/
19+
/*display: block;*/
20+
/*width: 100%;*/
21+
/*height: 34px;*/
22+
/*padding: 6px 12px;*/
23+
/*font-size: 14px;*/
24+
/*line-height: 1.42857143;*/
25+
/*color: #555;*/
26+
/*background-color: #fff;*/
27+
/*background-image: none;*/
28+
/*border: 1px solid #ccc;*/
29+
/*border-radius: 4px;*/
30+
/*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);*/
31+
/*box-shadow: inset 0 1px 1px rgba(0,0,0,.075);*/
32+
/*-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;*/
33+
/*-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
34+
/*transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
35+
/*}*/

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/a11y-index.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<nav role="navigation">
2+
<ol>
3+
<li>
4+
<a href="" [routerLink]="['FormControls']"><h2>Accessible form control labels</h2></a>
5+
</li>
6+
</ol>
7+
</nav>

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from "angular2/core";
2+
import {ROUTER_DIRECTIVES} from "angular2/router";
3+
4+
@Component({
5+
selector: 'a11y-index',
6+
templateUrl: './app/a11y-index.component.html',
7+
directives: [ROUTER_DIRECTIVES]
8+
})
9+
export class A11yIndex{
10+
11+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<header role="banner" class="jumbotron well text-center background-contrast">
2+
<h1 id="top">Angular 2 A11y Cookbook</h1>
3+
</header>
4+
<main role="main" class="container">
5+
<router-outlet></router-outlet>
6+
<!--<a11y-index></a11y-index>-->
7+
<!--<a11y-form-controls></a11y-form-controls>-->
8+
</main>

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Component} from "angular2/core";
2+
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
3+
import {A11yFormControls} from "./form-controls/a11y-form-controls.component";
4+
import {A11yIndex} from "./a11y-index.component";
5+
import {A11yHelper} from "./services/a11y-helper.service";
6+
7+
@Component({
8+
selector: 'app',
9+
templateUrl: 'app/app.component.html',
10+
directives:[
11+
ROUTER_DIRECTIVES,
12+
A11yFormControls,
13+
A11yIndex
14+
],
15+
providers: [
16+
ROUTER_PROVIDERS,
17+
A11yHelper
18+
]
19+
})
20+
@RouteConfig([
21+
{path:'/', name: 'Index', component: A11yIndex},
22+
{path:'/formcontrols', name: 'FormControls', component: A11yFormControls}
23+
])
24+
export class AppComponent {
25+
26+
}

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!--#docregion-->
2+
<fieldset class="form-group row">
3+
<legend class="col-xs-12">
4+
<ng-content></ng-content>
5+
</legend>
6+
<div *ngFor="#checkbox of checkboxModel" class="checkbox col-xs-12">
7+
<label>
8+
<input type="checkbox" [value]="checkbox.value" [name]="checkboxName">
9+
{{checkbox.name}}
10+
</label>
11+
</div>
12+
</fieldset>
13+
<!--#enddocregion-->

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-checkboxes.component.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component, Input} from "angular2/core";
2+
3+
@Component({
4+
selector: 'a11y-checkboxes',
5+
templateUrl: './app/form-controls/a11y-checkboxes.component.html'
6+
})
7+
export class A11yCheckboxes {
8+
9+
@Input()
10+
checkboxName: string;
11+
@Input()
12+
checkboxModel: any;
13+
14+
}

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

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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+
<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>
67+
</article>
68+
69+

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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {Component, OnInit} from "angular2/core";
2+
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
3+
import {A11yInput} from "./a11y-input.component";
4+
import {A11yInputExplicit} from "./a11y-input-explicit.component";
5+
import {A11yCheckboxes} from "./a11y-checkboxes.component";
6+
import {A11yRadiobuttons} from "./a11y-radiobuttons.component";
7+
import {A11ySelect} from "./a11y-select.component";
8+
import {A11yTextarea} from "./a11y-textarea.component";
9+
import {A11yHiddenLabels} from "./a11y-hidden-labels.component";
10+
import {A11yHelper} from "../services/a11y-helper.service";
11+
import {ROUTER_DIRECTIVES} from "angular2/router";
12+
13+
@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+
]
28+
})
29+
export class A11yFormControls implements OnInit {
30+
31+
checkBoxes:any;
32+
radioButtons:any;
33+
selectOptions:any;
34+
35+
constructor(private _a11yHelper:A11yHelper) {
36+
}
37+
38+
ngOnInit() {
39+
this.checkBoxes = this._a11yHelper.getCheckboxModel();
40+
this.radioButtons = this._a11yHelper.getRadiobuttonsModel();
41+
this.selectOptions = this._a11yHelper.getSelectOptions();
42+
}
43+
44+
}

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* #docregion */
2+
label {
3+
border: 0;
4+
clip: rect(0 0 0 0);
5+
height: 1px;
6+
margin: -1px;
7+
overflow: hidden;
8+
padding: 0;
9+
position: absolute;
10+
width: 1px;
11+
}
12+
/* #enddocregion */
13+
input {
14+
margin-bottom: 1em;
15+
}

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!-- #docregion -->
2+
<div class="form-group">
3+
4+
<label [attr.for]="uniqueId">
5+
{{label1}}
6+
</label>
7+
<input [id]="uniqueId"
8+
placeholder="Search... (Label hidden with style)"
9+
class="form-control">
10+
11+
<input placeholder="Filter... (Labelled with aria-label)"
12+
[attr.aria-label]="label2"
13+
class="form-control">
14+
15+
</div>
16+
<!-- #enddocregion -->

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {Component, OnInit, Input} from "angular2/core";
2+
import {A11yHelper} from "./../services/a11y-helper.service";
3+
4+
// #docregion
5+
@Component({
6+
selector: 'a11y-hidden-labels',
7+
templateUrl: './app/form-controls/a11y-hidden-labels.component.html',
8+
styleUrls: ['./app/form-controls/a11y-hidden-labels.component.css']
9+
})
10+
export class A11yHiddenLabels implements OnInit{
11+
@Input()
12+
label1:string;
13+
@Input()
14+
label2: string;
15+
16+
uniqueId:string;
17+
18+
constructor(private _a11yHelper:A11yHelper){}
19+
20+
ngOnInit(){
21+
this.uniqueId = this._a11yHelper.generateUniqueIdString();
22+
}
23+
}
24+
// #enddocregion

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-explicit.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!-- #docregion-->
2+
<div class="form-group">
3+
<label [attr.for]="uniqueId">
4+
<ng-content></ng-content>
5+
</label>
6+
<input [id]="uniqueId"
7+
class="form-control">
8+
</div>
9+
<!--#enddocregion-->

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input-explicit.component.ts

+17
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/form-controls/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+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!-- #docregion-->
2+
<div class="form-group ">
3+
<label>
4+
<ng-content></ng-content>
5+
<input class="form-control">
6+
</label>
7+
</div>
8+
<!--#enddocregion-->

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-input.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from "angular2/core";
2+
3+
@Component({
4+
selector: 'a11y-input',
5+
templateUrl: './app/form-controls/a11y-input.component.html'
6+
})
7+
export class A11yInput{
8+
}

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!--#docregion-->
2+
<fieldset class="form-group row">
3+
<legend class="col-xs-12">
4+
<ng-content></ng-content>
5+
</legend>
6+
<div *ngFor="#radiobutton of radiobuttonModel" class="radio col-xs-12">
7+
<label>
8+
<input type="radio" [value]="radiobutton.value" [name]="radiobuttonName">
9+
{{radiobutton.name}}
10+
</label>
11+
</div>
12+
</fieldset>
13+
<!--#enddocregion-->

Diff for: ‎public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Input, Component} from "angular2/core";
2+
3+
@Component({
4+
selector: 'a11y-radiobuttons',
5+
templateUrl: './app/form-controls/a11y-radiobuttons.component.html'
6+
})
7+
export class A11yRadiobuttons {
8+
@Input()
9+
radiobuttonName: string;
10+
@Input()
11+
radiobuttonModel: any;
12+
}

0 commit comments

Comments
 (0)