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

Commit 7485726

Browse files
AlmeroSteynwardbell
AlmeroSteyn
authored and
wardbell
committed
docs(cb-a11y): add accessibility (a11y) cookbook
1 parent ead6987 commit 7485726

29 files changed

+1347
-2
lines changed

‎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+

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

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
label {
2+
color: #424242;
3+
width: 100%;
4+
}
5+
6+
hr {
7+
border-top: 3px double #8c8b8b;
8+
}
9+
10+
h3 {
11+
outline: 0;
12+
}
13+
14+
.background-contrast {
15+
background-color: #0143A3;
16+
color: #fff;
17+
}
18+
19+
.skiplink a{
20+
min-height: 20px;
21+
position: absolute;
22+
width: 1px;
23+
height: 1px;
24+
padding: 0;
25+
margin: -1px;
26+
overflow: hidden;
27+
clip: rect(0, 0, 0, 0);
28+
border: 0;
29+
}
30+
31+
.skiplink a:active,
32+
.skiplink a:focus {
33+
position: static;
34+
width: auto;
35+
height: auto;
36+
margin: 0;
37+
overflow: visible;
38+
clip: auto;
39+
}
40+
41+
.custom-outline:focus {
42+
border-color: #7F0037;
43+
outline: 0;
44+
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(127, 0, 55, .6);
45+
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(127, 0, 55, .6);
46+
}
47+
48+
/* #docregion cb-a11y-form-controls-visually-hidden-style*/
49+
.visually-hidden {
50+
border: 0;
51+
clip: rect(0 0 0 0);
52+
height: 1px;
53+
margin: -1px;
54+
overflow: hidden;
55+
padding: 0;
56+
position: absolute;
57+
width: 1px;
58+
}
59+
/* #enddocregion */
60+
61+
.like-bootstrap {
62+
display: block;
63+
width: 100%;
64+
height: 34px;
65+
padding: 6px 12px;
66+
font-size: 14px;
67+
line-height: 1.42857143;
68+
color: #555;
69+
background-color: #fff;
70+
background-image: none;
71+
border: 1px solid #ccc;
72+
border-radius: 4px;
73+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
74+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
75+
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
76+
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
77+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
78+
}

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

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

‎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+
}

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

+1
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

+18
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/app.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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+
</main>

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

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
import {A11yManagingFocus} from "./managing-focus/a11y-managing-focus.component";
7+
8+
@Component({
9+
selector: 'app',
10+
templateUrl: 'app/app.component.html',
11+
directives:[
12+
ROUTER_DIRECTIVES,
13+
A11yFormControls,
14+
A11yIndex
15+
],
16+
providers: [
17+
ROUTER_PROVIDERS,
18+
A11yHelper
19+
]
20+
})
21+
@RouteConfig([
22+
{path:'/', name: 'Index', component: A11yIndex},
23+
{path:'/form-controls', name: 'FormControls', component: A11yFormControls},
24+
{path:'/managing-focus', name: 'ManagingFocus', component: A11yManagingFocus}
25+
])
26+
export class AppComponent {
27+
28+
}

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* #docregion */
2+
div.edit-box{
3+
height: auto;
4+
min-height: 50px;
5+
}
6+
/* #enddocregion */

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- #docregion -->
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>
17+
</div>
18+
<!-- #enddocregion -->

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

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {Component, OnInit, Provider, forwardRef,} from "angular2/core";
2+
import {A11yHelper} from "../services/a11y-helper.service";
3+
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from "angular2/common";
4+
5+
// #docregion
6+
const noop = () => {
7+
};
8+
9+
const A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR = new Provider(
10+
NG_VALUE_ACCESSOR, {
11+
useExisting: forwardRef(() => A11yCustomControl),
12+
multi: true
13+
});
14+
15+
@Component({
16+
selector: 'a11y-custom-control',
17+
templateUrl: './app/form-controls/a11y-custom-control.component.html',
18+
styleUrls: ['./app/form-controls/a11y-custom-control.component.css'],
19+
providers: [A11Y_CUSTOM_CONTROL_VALUE_ACCESSOR]
20+
})
21+
export class A11yCustomControl implements OnInit, ControlValueAccessor {
22+
23+
uniqueId:string;
24+
25+
private _innerValue:any = '';
26+
outerValue:string = '';
27+
28+
private _onTouchedCallback:() => void = noop;
29+
private _onChangeCallback:(_:any) => void = noop;
30+
31+
constructor(private _a11yHelper:A11yHelper) {
32+
}
33+
34+
onChange(event:any, value:string) {
35+
if (event.keyCode == 13) {
36+
event.preventDefault();
37+
}
38+
else {
39+
this._innerValue = this._a11yHelper.removeHtmlStringBreaks(value);
40+
this._onChangeCallback(this._innerValue);
41+
}
42+
}
43+
44+
onBlur(){
45+
this._onTouchedCallback();
46+
}
47+
48+
writeValue(value:any) {
49+
if (value != this._innerValue) {
50+
this._innerValue = value;
51+
this.outerValue = value;
52+
}
53+
}
54+
55+
registerOnChange(fn:any) {
56+
this._onChangeCallback = fn;
57+
}
58+
59+
registerOnTouched(fn:any) {
60+
this._onTouchedCallback = fn;
61+
}
62+
63+
ngOnInit():void {
64+
this.uniqueId = this._a11yHelper.generateUniqueIdString();
65+
}
66+
67+
}
68+
// #enddocregion

0 commit comments

Comments
 (0)