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

Commit f591679

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

35 files changed

+287
-151
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
@@ -28,25 +28,33 @@ const HEROES: Hero[] = [
2828
<h2>My Heroes</h2>
2929
<ul class="heroes">
3030
<li *ngFor="let hero of heroes"
31+
role="button"
3132
[class.selected]="hero === selectedHero"
32-
(click)="onSelect(hero)">
33+
[attr.aria-pressed]="hero === selectedHero"
34+
(click)="onSelect(hero)"
35+
(keydown.enter)="onSelect(hero)"
36+
tabindex="0">
3337
<span class="badge">{{hero.id}}</span> {{hero.name}}
3438
</li>
3539
</ul>
3640
<div *ngIf="selectedHero">
37-
<h2>{{selectedHero.name}} details!</h2>
38-
<div><label>id: </label>{{selectedHero.id}}</div>
39-
<div>
40-
<label>name: </label>
41-
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
42-
</div>
41+
<h3>{{selectedHero.name}} details!</h3>
42+
<dl>
43+
<dt>id:</dt>
44+
<dd>{{selectedHero.id}}</dd>
45+
</dl>
46+
<div>
47+
<label>name:
48+
<input [(ngModel)]="selectedHero.name" placeholder="name">
49+
</label>
50+
</div>
4351
</div>
4452
`,
4553
// #docregion styles
4654
styles: [`
4755
.selected {
4856
background-color: #CFD8DC !important;
49-
color: white;
57+
color: black;
5058
}
5159
.heroes {
5260
margin: 0 0 2em 0;
@@ -64,13 +72,15 @@ const HEROES: Hero[] = [
6472
height: 1.6em;
6573
border-radius: 4px;
6674
}
67-
.heroes li.selected:hover {
75+
.heroes li.selected:hover,
76+
.heroes li.selected:focus{
6877
background-color: #BBD8DC !important;
69-
color: white;
78+
color: black;
7079
}
71-
.heroes li:hover {
72-
color: #607D8B;
73-
background-color: #DDD;
80+
.heroes li:hover,
81+
.heroes li:focus{
82+
color: white;
83+
background-color: #6469dd;
7484
left: .1em;
7585
}
7686
.heroes .text {
@@ -82,7 +92,7 @@ const HEROES: Hero[] = [
8292
font-size: small;
8393
color: white;
8494
padding: 0.8em 0.7em 0 0.7em;
85-
background-color: #607D8B;
95+
background-color: #4E6570;
8696
line-height: 1em;
8797
position: relative;
8898
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
@@ -29,8 +29,12 @@ const HEROES: Hero[] = [
2929
<h2>My Heroes</h2>
3030
<ul class="heroes">
3131
<li *ngFor="let hero of heroes"
32+
role="button"
3233
[class.selected]="hero === selectedHero"
33-
(click)="onSelect(hero)">
34+
[attr.aria-pressed]="hero === selectedHero"
35+
(click)="onSelect(hero)"
36+
(keydown.enter)="onSelect(hero)"
37+
tabindex="0">
3438
<span class="badge">{{hero.id}}</span> {{hero.name}}
3539
</li>
3640
</ul>
@@ -40,7 +44,7 @@ const HEROES: Hero[] = [
4044
styles: [`
4145
.selected {
4246
background-color: #CFD8DC !important;
43-
color: white;
47+
color: black;
4448
}
4549
.heroes {
4650
margin: 0 0 2em 0;
@@ -58,13 +62,15 @@ const HEROES: Hero[] = [
5862
height: 1.6em;
5963
border-radius: 4px;
6064
}
61-
.heroes li.selected:hover {
65+
.heroes li.selected:hover,
66+
.heroes li.selected:focus{
6267
background-color: #BBD8DC !important;
63-
color: white;
68+
color: black;
6469
}
65-
.heroes li:hover {
66-
color: #607D8B;
67-
background-color: #DDD;
70+
.heroes li:hover,
71+
.heroes li:focus{
72+
color: white;
73+
background-color: #6469dd;
6874
left: .1em;
6975
}
7076
.heroes .text {
@@ -76,7 +82,7 @@ const HEROES: Hero[] = [
7682
font-size: small;
7783
color: white;
7884
padding: 0.8em 0.7em 0 0.7em;
79-
background-color: #607D8B;
85+
background-color: #4E6570;
8086
line-height: 1em;
8187
position: relative;
8288
left: -1px;

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,15 @@ 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
`

‎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

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* #docregion */
22
h1 {
33
font-size: 1.2em;
4-
color: #999;
4+
color: #747474;
55
margin-bottom: 0;
66
}
77
h2 {
@@ -18,12 +18,13 @@ nav a {
1818
border-radius: 4px;
1919
}
2020
nav a:visited, a:link {
21-
color: #607D8B;
22-
}
23-
nav a:hover {
24-
color: #039be5;
25-
background-color: #CFD8DC;
21+
color: #44667d;
2622
}
2723
nav a.active {
2824
color: #039be5;
2925
}
26+
nav a:hover,
27+
nav a:focus {
28+
color: #23338c;
29+
background-color: #CFD8DC;
30+
}

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

+11-4
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,23 @@ h3 {
2929
color: #eee;
3030
max-height: 120px;
3131
min-width: 120px;
32-
background-color: #607D8B;
32+
background-color: #4E6570;
3333
border-radius: 2px;
3434
}
35-
h4 {
35+
.hero{
36+
display: block;
3637
position: relative;
38+
-webkit-margin-before: 1.33em;
39+
-webkit-margin-after: 1.33em;
40+
-webkit-margin-start: 0px;
41+
-webkit-margin-end: 0px;
42+
font-weight: bold;
3743
}
38-
.module:hover {
44+
.module:hover,
45+
.module:focus {
3946
background-color: #EEE;
4047
cursor: pointer;
41-
color: #607d8b;
48+
color: #4b626d;
4249
}
4350
.grid-pad {
4451
padding: 10px 0;

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<!-- #docregion -->
2-
<h3>Top Heroes</h3>
2+
<h2>Top Heroes</h2>
33
<div class="grid grid-pad">
44
<!-- #docregion click -->
5-
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
6-
<!-- #enddocregion click -->
7-
<div class="module hero">
8-
<h4>{{hero.name}}</h4>
9-
</div>
5+
<div *ngFor="let hero of heroes"
6+
class="col-1-4">
7+
<a class="module hero" [routerLink]="['/detail', hero.id]">{{hero.name}}</a>
108
</div>
9+
<!-- #enddocregion click -->
1110
</div>

0 commit comments

Comments
 (0)