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

Commit f975e88

Browse files
AlmeroSteynAlmeroSteyn
committed
docs(a11y-sweep): Apply baseline accessibility to the examples
1 parent 21d74d5 commit f975e88

23 files changed

+193
-90
lines changed

‎public/docs/_examples/toh-1/ts/app/app.component.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,14 @@ export class Hero {
1313
template:`
1414
<h1>{{title}}</h1>
1515
<h2>{{hero.name}} details!</h2>
16-
<div><label>id: </label>{{hero.id}}</div>
16+
<dl>
17+
<dt>id:</dt>
18+
<dd>{{hero.id}}</dd>
19+
</dl>
1720
<div>
18-
<label>name: </label>
19-
<input [(ngModel)]="hero.name" placeholder="name">
21+
<label>name:
22+
<input [(ngModel)]="hero.name" placeholder="name">
23+
</label>
2024
</div>
2125
`
2226
})

‎public/docs/_examples/toh-1/ts/demo.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body{
2+
color: #5E5E5E;
3+
}
4+
5+
dt {
6+
float: left;
7+
clear: left;
8+
}

‎public/docs/_examples/toh-1/ts/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en-US">
33
<head>
44
<title>Angular 2 Tour of Heroes</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="demo.css">
89

910
<!-- Polyfill(s) for older browsers -->
1011
<script src="node_modules/core-js/client/shim.min.js"></script>

‎public/docs/_examples/toh-2/ts/app/app.component.ts

+24-14
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,33 @@ export class Hero {
1313
<h2>My Heroes</h2>
1414
<ul class="heroes">
1515
<li *ngFor="let hero of heroes"
16+
role="button"
1617
[class.selected]="hero === selectedHero"
17-
(click)="onSelect(hero)">
18+
[attr.aria-pressed]="hero === selectedHero"
19+
(click)="onSelect(hero)"
20+
(keydown.enter)="onSelect(hero)"
21+
tabindex="0">
1822
<span class="badge">{{hero.id}}</span> {{hero.name}}
1923
</li>
2024
</ul>
2125
<div *ngIf="selectedHero">
22-
<h2>{{selectedHero.name}} details!</h2>
23-
<div><label>id: </label>{{selectedHero.id}}</div>
24-
<div>
25-
<label>name: </label>
26-
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
27-
</div>
26+
<h3>{{selectedHero.name}} details!</h3>
27+
<dl>
28+
<dt>id:</dt>
29+
<dd>{{selectedHero.id}}</dd>
30+
</dl>
31+
<div>
32+
<label>name:
33+
<input [(ngModel)]="selectedHero.name" placeholder="name">
34+
</label>
35+
</div>
2836
</div>
2937
`,
3038
// #docregion styles-1
3139
styles:[`
3240
.selected {
3341
background-color: #CFD8DC !important;
34-
color: white;
42+
color: black;
3543
}
3644
.heroes {
3745
margin: 0 0 2em 0;
@@ -49,13 +57,15 @@ export class Hero {
4957
height: 1.6em;
5058
border-radius: 4px;
5159
}
52-
.heroes li.selected:hover {
60+
.heroes li.selected:hover,
61+
.heroes li.selected:focus{
5362
background-color: #BBD8DC !important;
54-
color: white;
63+
color: black;
5564
}
56-
.heroes li:hover {
57-
color: #607D8B;
58-
background-color: #DDD;
65+
.heroes li:hover,
66+
.heroes li:focus{
67+
color: white;
68+
background-color: #6469dd;
5969
left: .1em;
6070
}
6171
.heroes .text {
@@ -67,7 +77,7 @@ export class Hero {
6777
font-size: small;
6878
color: white;
6979
padding: 0.8em 0.7em 0 0.7em;
70-
background-color: #607D8B;
80+
background-color: #4E6570;
7181
line-height: 1em;
7282
position: relative;
7383
left: -1px;

‎public/docs/_examples/toh-2/ts/demo.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body{
2+
color: #5E5E5E;
3+
}
4+
5+
dt {
6+
float: left;
7+
clear: left;
8+
}

‎public/docs/_examples/toh-2/ts/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en-US">
33
<head>
44
<title>Angular 2 Tour of Heros</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="demo.css">
89

910
<!-- Polyfill(s) for older browsers -->
1011
<script src="node_modules/core-js/client/shim.min.js"></script>

‎public/docs/_examples/toh-3/ts/app/app.component.ts

+14-8
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ import { HeroDetailComponent } from './hero-detail.component';
1616
<h2>My Heroes</h2>
1717
<ul class="heroes">
1818
<li *ngFor="let hero of heroes"
19+
role="button"
1920
[class.selected]="hero === selectedHero"
20-
(click)="onSelect(hero)">
21+
[attr.aria-pressed]="hero === selectedHero"
22+
(click)="onSelect(hero)"
23+
(keydown.enter)="onSelect(hero)"
24+
tabindex="0">
2125
<span class="badge">{{hero.id}}</span> {{hero.name}}
2226
</li>
2327
</ul>
@@ -27,7 +31,7 @@ import { HeroDetailComponent } from './hero-detail.component';
2731
styles:[`
2832
.selected {
2933
background-color: #CFD8DC !important;
30-
color: white;
34+
color: black;
3135
}
3236
.heroes {
3337
margin: 0 0 2em 0;
@@ -45,13 +49,15 @@ import { HeroDetailComponent } from './hero-detail.component';
4549
height: 1.6em;
4650
border-radius: 4px;
4751
}
48-
.heroes li.selected:hover {
52+
.heroes li.selected:hover,
53+
.heroes li.selected:focus{
4954
background-color: #BBD8DC !important;
50-
color: white;
55+
color: black;
5156
}
52-
.heroes li:hover {
53-
color: #607D8B;
54-
background-color: #DDD;
57+
.heroes li:hover,
58+
.heroes li:focus{
59+
color: white;
60+
background-color: #6469dd;
5561
left: .1em;
5662
}
5763
.heroes .text {
@@ -63,7 +69,7 @@ import { HeroDetailComponent } from './hero-detail.component';
6369
font-size: small;
6470
color: white;
6571
padding: 0.8em 0.7em 0 0.7em;
66-
background-color: #607D8B;
72+
background-color: #4E6570;
6773
line-height: 1em;
6874
position: relative;
6975
left: -1px;

‎public/docs/_examples/toh-3/ts/app/hero-detail.component.ts

+12-8
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,28 @@ import { Hero } from './hero';
1515
// #docregion template
1616
template: `
1717
<div *ngIf="hero">
18-
<h2>{{hero.name}} details!</h2>
19-
<div><label>id: </label>{{hero.id}}</div>
18+
<h3>{{hero.name}} details!</h3>
19+
<dl>
20+
<dt>id:</dt>
21+
<dd>{{hero.id}}</dd>
22+
</dl>
2023
<div>
21-
<label>name: </label>
22-
<input [(ngModel)]="hero.name" placeholder="name"/>
24+
<label>name:
25+
<input [(ngModel)]="hero.name" placeholder="name">
26+
</label>
2327
</div>
2428
</div>
2529
`
2630
// #enddocregion template
27-
// #docregion v1
31+
// #docregion v1
2832
})
2933
export class HeroDetailComponent {
3034
// #enddocregion v1
3135
// #docregion hero-input
32-
@Input()
33-
// #docregion hero
36+
@Input()
37+
// #docregion hero
3438
hero: Hero;
35-
// #enddocregion hero
39+
// #enddocregion hero
3640
// #enddocregion hero-input
3741
// #docregion v1
3842
}

‎public/docs/_examples/toh-3/ts/demo.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body{
2+
color: #5E5E5E;
3+
}
4+
5+
dt {
6+
float: left;
7+
clear: left;
8+
}

‎public/docs/_examples/toh-3/ts/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en-US">
33
<head>
44
<title>Angular 2 Tour of Heroes</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="demo.css">
89

910
<!-- Polyfill(s) for older browsers -->
1011
<script src="node_modules/core-js/client/shim.min.js"></script>

‎public/docs/_examples/toh-4/ts/app/app.component.ts

+14-8
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ import { HeroService } from './hero.service';
1616
<h2>My Heroes</h2>
1717
<ul class="heroes">
1818
<li *ngFor="let hero of heroes"
19+
role="button"
1920
[class.selected]="hero === selectedHero"
20-
(click)="onSelect(hero)">
21+
[attr.aria-pressed]="hero === selectedHero"
22+
(click)="onSelect(hero)"
23+
(keydown.enter)="onSelect(hero)"
24+
tabindex="0">
2125
<span class="badge">{{hero.id}}</span> {{hero.name}}
2226
</li>
2327
</ul>
@@ -27,7 +31,7 @@ import { HeroService } from './hero.service';
2731
styles: [`
2832
.selected {
2933
background-color: #CFD8DC !important;
30-
color: white;
34+
color: black;
3135
}
3236
.heroes {
3337
margin: 0 0 2em 0;
@@ -45,13 +49,15 @@ import { HeroService } from './hero.service';
4549
height: 1.6em;
4650
border-radius: 4px;
4751
}
48-
.heroes li.selected:hover {
52+
.heroes li.selected:hover,
53+
.heroes li.selected:focus{
4954
background-color: #BBD8DC !important;
50-
color: white;
55+
color: black;
5156
}
52-
.heroes li:hover {
53-
color: #607D8B;
54-
background-color: #DDD;
57+
.heroes li:hover,
58+
.heroes li:focus{
59+
color: white;
60+
background-color: #6469dd;
5561
left: .1em;
5662
}
5763
.heroes .text {
@@ -63,7 +69,7 @@ import { HeroService } from './hero.service';
6369
font-size: small;
6470
color: white;
6571
padding: 0.8em 0.7em 0 0.7em;
66-
background-color: #607D8B;
72+
background-color: #4E6570;
6773
line-height: 1em;
6874
position: relative;
6975
left: -1px;

‎public/docs/_examples/toh-4/ts/app/hero-detail.component.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ import { Hero } from './hero';
66
selector: 'my-hero-detail',
77
template: `
88
<div *ngIf="hero">
9-
<h2>{{hero.name}} details</h2>
9+
<h3>{{hero.name}} details!</h3>
10+
<dl>
11+
<dt>id:</dt>
12+
<dd>{{hero.id}}</dd>
13+
</dl>
1014
<div>
11-
<label>id: </label>{{hero.id}}
12-
</div>
13-
<div>
14-
<label>name: </label>
15-
<input [(ngModel)]="hero.name" placeholder="name"/>
15+
<label>name:
16+
<input [(ngModel)]="hero.name" placeholder="name">
17+
</label>
1618
</div>
1719
</div>
1820
`

‎public/docs/_examples/toh-4/ts/demo.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body{
2+
color: #5E5E5E;
3+
}
4+
5+
dt {
6+
float: left;
7+
clear: left;
8+
}

‎public/docs/_examples/toh-4/ts/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en-US">
33
<head>
44
<title>Angular 2 Tour of Heroes</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="demo.css">
89

910
<!-- Polyfill(s) for older browsers -->
1011
<script src="node_modules/core-js/client/shim.min.js"></script>

‎public/docs/_examples/toh-5/ts/app/app.component.css

+9-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
/* #docregion css */
33
h1 {
44
font-size: 1.2em;
5-
color: #999;
5+
color: #747474;
66
margin-bottom: 0;
77
}
88
h2 {
@@ -19,13 +19,15 @@ nav a {
1919
border-radius: 4px;
2020
}
2121
nav a:visited, a:link {
22-
color: #607D8B;
23-
}
24-
nav a:hover {
25-
color: #039be5;
26-
background-color: #CFD8DC;
22+
color: #44667d;
2723
}
24+
2825
nav a.router-link-active {
29-
color: #039be5;
26+
color: #3953e5;
27+
}
28+
nav a:hover,
29+
nav a:focus {
30+
color: #23338c;
31+
background-color: #CFD8DC;
3032
}
3133
/* #enddocregion css */

0 commit comments

Comments
 (0)