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

Commit 8f918bb

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

File tree

6 files changed

+51
-19
lines changed

6 files changed

+51
-19
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
@@ -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‎

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>

0 commit comments

Comments
 (0)