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

Lines changed: 7 additions & 3 deletions
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

Lines changed: 8 additions & 0 deletions
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

Lines changed: 2 additions & 1 deletion
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

Lines changed: 24 additions & 14 deletions
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

Lines changed: 8 additions & 0 deletions
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

Lines changed: 2 additions & 1 deletion
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

Lines changed: 14 additions & 8 deletions
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

Lines changed: 8 additions & 4 deletions
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

Lines changed: 8 additions & 0 deletions
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

Lines changed: 2 additions & 1 deletion
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>

0 commit comments

Comments
 (0)