From f5916791a13d019a0e395f6810b555187266a103 Mon Sep 17 00:00:00 2001
From: AlmeroSteyn <almero.steyn@gmail.com>
Date: Tue, 7 Jun 2016 19:32:30 +0200
Subject: [PATCH] docs(a11y-sweep): Apply baseline accessibility to the
examples
---
.../_examples/toh-1/ts/app/app.component.ts | 10 +++--
public/docs/_examples/toh-1/ts/demo.css | 8 ++++
public/docs/_examples/toh-1/ts/index.html | 3 +-
.../_examples/toh-2/ts/app/app.component.ts | 38 ++++++++++++-------
public/docs/_examples/toh-2/ts/demo.css | 8 ++++
public/docs/_examples/toh-2/ts/index.html | 3 +-
.../_examples/toh-3/ts/app/app.component.ts | 22 +++++++----
.../toh-3/ts/app/hero-detail.component.ts | 12 ++++--
public/docs/_examples/toh-3/ts/demo.css | 8 ++++
public/docs/_examples/toh-3/ts/index.html | 3 +-
.../_examples/toh-4/ts/app/app.component.ts | 22 +++++++----
.../toh-4/ts/app/hero-detail.component.ts | 14 ++++---
public/docs/_examples/toh-4/ts/demo.css | 8 ++++
public/docs/_examples/toh-4/ts/index.html | 3 +-
.../_examples/toh-5/ts/app/app.component.css | 13 ++++---
.../toh-5/ts/app/dashboard.component.css | 15 ++++++--
.../toh-5/ts/app/dashboard.component.html | 11 +++---
.../toh-5/ts/app/dashboard.component.ts | 16 ++++----
.../toh-5/ts/app/hero-detail.component.css | 12 +++---
.../toh-5/ts/app/hero-detail.component.html | 13 ++++---
.../toh-5/ts/app/hero-detail.component.ts | 20 ++++++++--
.../toh-5/ts/app/heroes.component.css | 31 ++++++++-------
.../toh-5/ts/app/heroes.component.html | 10 ++---
.../toh-5/ts/app/heroes.component.ts | 11 +++---
public/docs/_examples/toh-5/ts/demo.css | 9 +++++
public/docs/_examples/toh-5/ts/index.html | 3 +-
.../_examples/toh-6/ts/app/app.component.css | 13 ++++---
.../toh-6/ts/app/dashboard.component.css | 15 ++++++--
.../toh-6/ts/app/dashboard.component.html | 16 +++++---
.../toh-6/ts/app/hero-detail.component.css | 12 +++---
.../toh-6/ts/app/hero-detail.component.html | 13 ++++---
.../toh-6/ts/app/heroes.component.css | 18 +++++----
.../toh-6/ts/app/heroes.component.html | 8 +++-
public/docs/_examples/toh-6/ts/index.html | 2 +-
public/docs/_examples/toh-6/ts/sample.css | 15 ++++++--
35 files changed, 287 insertions(+), 151 deletions(-)
create mode 100644 public/docs/_examples/toh-1/ts/demo.css
create mode 100644 public/docs/_examples/toh-2/ts/demo.css
create mode 100644 public/docs/_examples/toh-3/ts/demo.css
create mode 100644 public/docs/_examples/toh-4/ts/demo.css
create mode 100644 public/docs/_examples/toh-5/ts/demo.css
diff --git a/public/docs/_examples/toh-1/ts/app/app.component.ts b/public/docs/_examples/toh-1/ts/app/app.component.ts
index b61fac3c0b..d2853fbd5c 100644
--- a/public/docs/_examples/toh-1/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-1/ts/app/app.component.ts
@@ -13,10 +13,14 @@ export class Hero {
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
- <div><label>id: </label>{{hero.id}}</div>
+ <dl>
+ <dt>id:</dt>
+ <dd>{{hero.id}}</dd>
+ </dl>
<div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name">
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name">
+ </label>
</div>
`
})
diff --git a/public/docs/_examples/toh-1/ts/demo.css b/public/docs/_examples/toh-1/ts/demo.css
new file mode 100644
index 0000000000..049f701554
--- /dev/null
+++ b/public/docs/_examples/toh-1/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
index f784483eaa..b6a58e3b38 100644
--- a/public/docs/_examples/toh-1/ts/index.html
+++ b/public/docs/_examples/toh-1/ts/index.html
@@ -1,10 +1,11 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="demo.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/public/docs/_examples/toh-2/ts/app/app.component.ts b/public/docs/_examples/toh-2/ts/app/app.component.ts
index 5d10fc55a9..3875c73ed8 100644
--- a/public/docs/_examples/toh-2/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-2/ts/app/app.component.ts
@@ -28,25 +28,33 @@ const HEROES: Hero[] = [
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
+ role="button"
[class.selected]="hero === selectedHero"
- (click)="onSelect(hero)">
+ [attr.aria-pressed]="hero === selectedHero"
+ (click)="onSelect(hero)"
+ (keydown.enter)="onSelect(hero)"
+ tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
- <h2>{{selectedHero.name}} details!</h2>
- <div><label>id: </label>{{selectedHero.id}}</div>
- <div>
- <label>name: </label>
- <input [(ngModel)]="selectedHero.name" placeholder="name"/>
- </div>
+ <h3>{{selectedHero.name}} details!</h3>
+ <dl>
+ <dt>id:</dt>
+ <dd>{{selectedHero.id}}</dd>
+ </dl>
+ <div>
+ <label>name:
+ <input [(ngModel)]="selectedHero.name" placeholder="name">
+ </label>
+ </div>
</div>
`,
// #docregion styles
styles: [`
.selected {
background-color: #CFD8DC !important;
- color: white;
+ color: black;
}
.heroes {
margin: 0 0 2em 0;
@@ -64,13 +72,15 @@ const HEROES: Hero[] = [
height: 1.6em;
border-radius: 4px;
}
- .heroes li.selected:hover {
+ .heroes li.selected:hover,
+ .heroes li.selected:focus{
background-color: #BBD8DC !important;
- color: white;
+ color: black;
}
- .heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
+ .heroes li:hover,
+ .heroes li:focus{
+ color: white;
+ background-color: #6469dd;
left: .1em;
}
.heroes .text {
@@ -82,7 +92,7 @@ const HEROES: Hero[] = [
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
+ background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
diff --git a/public/docs/_examples/toh-2/ts/demo.css b/public/docs/_examples/toh-2/ts/demo.css
new file mode 100644
index 0000000000..049f701554
--- /dev/null
+++ b/public/docs/_examples/toh-2/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
index 485409815c..fd58e81273 100644
--- a/public/docs/_examples/toh-2/ts/index.html
+++ b/public/docs/_examples/toh-2/ts/index.html
@@ -1,10 +1,11 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<head>
<title>Angular 2 Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="demo.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
index bbe047a629..95f3cb34c2 100644
--- a/public/docs/_examples/toh-3/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -29,8 +29,12 @@ const HEROES: Hero[] = [
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
+ role="button"
[class.selected]="hero === selectedHero"
- (click)="onSelect(hero)">
+ [attr.aria-pressed]="hero === selectedHero"
+ (click)="onSelect(hero)"
+ (keydown.enter)="onSelect(hero)"
+ tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
@@ -40,7 +44,7 @@ const HEROES: Hero[] = [
styles: [`
.selected {
background-color: #CFD8DC !important;
- color: white;
+ color: black;
}
.heroes {
margin: 0 0 2em 0;
@@ -58,13 +62,15 @@ const HEROES: Hero[] = [
height: 1.6em;
border-radius: 4px;
}
- .heroes li.selected:hover {
+ .heroes li.selected:hover,
+ .heroes li.selected:focus{
background-color: #BBD8DC !important;
- color: white;
+ color: black;
}
- .heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
+ .heroes li:hover,
+ .heroes li:focus{
+ color: white;
+ background-color: #6469dd;
left: .1em;
}
.heroes .text {
@@ -76,7 +82,7 @@ const HEROES: Hero[] = [
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
+ background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
diff --git a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
index a2f1942904..aecda5e1f6 100644
--- a/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
@@ -15,11 +15,15 @@ import { Hero } from './hero';
// #docregion template
template: `
<div *ngIf="hero">
- <h2>{{hero.name}} details!</h2>
- <div><label>id: </label>{{hero.id}}</div>
+ <h3>{{hero.name}} details!</h3>
+ <dl>
+ <dt>id:</dt>
+ <dd>{{hero.id}}</dd>
+ </dl>
<div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name"/>
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name">
+ </label>
</div>
</div>
`
diff --git a/public/docs/_examples/toh-3/ts/demo.css b/public/docs/_examples/toh-3/ts/demo.css
new file mode 100644
index 0000000000..049f701554
--- /dev/null
+++ b/public/docs/_examples/toh-3/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
index e9c099696b..b432cf5ff1 100644
--- a/public/docs/_examples/toh-3/ts/index.html
+++ b/public/docs/_examples/toh-3/ts/index.html
@@ -1,10 +1,11 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="demo.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index cf2b42a034..7632b2ce25 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -16,8 +16,12 @@ import { HeroService } from './hero.service';
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
+ role="button"
[class.selected]="hero === selectedHero"
- (click)="onSelect(hero)">
+ [attr.aria-pressed]="hero === selectedHero"
+ (click)="onSelect(hero)"
+ (keydown.enter)="onSelect(hero)"
+ tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
@@ -27,7 +31,7 @@ import { HeroService } from './hero.service';
styles: [`
.selected {
background-color: #CFD8DC !important;
- color: white;
+ color: black;
}
.heroes {
margin: 0 0 2em 0;
@@ -45,13 +49,15 @@ import { HeroService } from './hero.service';
height: 1.6em;
border-radius: 4px;
}
- .heroes li.selected:hover {
+ .heroes li.selected:hover,
+ .heroes li.selected:focus{
background-color: #BBD8DC !important;
- color: white;
+ color: black;
}
- .heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
+ .heroes li:hover,
+ .heroes li:focus{
+ color: white;
+ background-color: #6469dd;
left: .1em;
}
.heroes .text {
@@ -63,7 +69,7 @@ import { HeroService } from './hero.service';
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
+ background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
diff --git a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
index b36b0ae36c..f23f624ca8 100644
--- a/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
@@ -6,13 +6,15 @@ import { Hero } from './hero';
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
- <h2>{{hero.name}} details!</h2>
+ <h3>{{hero.name}} details!</h3>
+ <dl>
+ <dt>id:</dt>
+ <dd>{{hero.id}}</dd>
+ </dl>
<div>
- <label>id: </label>{{hero.id}}
- </div>
- <div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name"/>
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name">
+ </label>
</div>
</div>
`
diff --git a/public/docs/_examples/toh-4/ts/demo.css b/public/docs/_examples/toh-4/ts/demo.css
new file mode 100644
index 0000000000..049f701554
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/demo.css
@@ -0,0 +1,8 @@
+body{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
index e9c099696b..b432cf5ff1 100644
--- a/public/docs/_examples/toh-4/ts/index.html
+++ b/public/docs/_examples/toh-4/ts/index.html
@@ -1,10 +1,11 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="demo.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.css b/public/docs/_examples/toh-5/ts/app/app.component.css
index 071e665767..e97e0bac9c 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.css
+++ b/public/docs/_examples/toh-5/ts/app/app.component.css
@@ -1,7 +1,7 @@
/* #docregion */
h1 {
font-size: 1.2em;
- color: #999;
+ color: #747474;
margin-bottom: 0;
}
h2 {
@@ -18,12 +18,13 @@ nav a {
border-radius: 4px;
}
nav a:visited, a:link {
- color: #607D8B;
-}
-nav a:hover {
- color: #039be5;
- background-color: #CFD8DC;
+ color: #44667d;
}
nav a.active {
color: #039be5;
}
+nav a:hover,
+nav a:focus {
+ color: #23338c;
+ background-color: #CFD8DC;
+}
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.css b/public/docs/_examples/toh-5/ts/app/dashboard.component.css
index f6263074f0..bd9f53fc27 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.css
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.css
@@ -29,16 +29,23 @@ h3 {
color: #eee;
max-height: 120px;
min-width: 120px;
- background-color: #607D8B;
+ background-color: #4E6570;
border-radius: 2px;
}
-h4 {
+.hero{
+ display: block;
position: relative;
+ -webkit-margin-before: 1.33em;
+ -webkit-margin-after: 1.33em;
+ -webkit-margin-start: 0px;
+ -webkit-margin-end: 0px;
+ font-weight: bold;
}
-.module:hover {
+.module:hover,
+.module:focus {
background-color: #EEE;
cursor: pointer;
- color: #607d8b;
+ color: #4b626d;
}
.grid-pad {
padding: 10px 0;
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.html b/public/docs/_examples/toh-5/ts/app/dashboard.component.html
index 67ac6aa459..346c6ac049 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.html
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.html
@@ -1,11 +1,10 @@
<!-- #docregion -->
-<h3>Top Heroes</h3>
+<h2>Top Heroes</h2>
<div class="grid grid-pad">
<!-- #docregion click -->
- <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
- <!-- #enddocregion click -->
- <div class="module hero">
- <h4>{{hero.name}}</h4>
- </div>
+ <div *ngFor="let hero of heroes"
+ class="col-1-4">
+ <a class="module hero" [routerLink]="['/detail', hero.id]">{{hero.name}}</a>
</div>
+ <!-- #enddocregion click -->
</div>
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index 6dd4b1abc2..3e96a0710a 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -4,6 +4,7 @@ import { Component, OnInit } from '@angular/core';
// #docregion import-router
import { Router } from '@angular/router';
// #enddocregion import-router
+import { ROUTER_DIRECTIVES } from '@angular/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@@ -14,8 +15,9 @@ import { HeroService } from './hero.service';
templateUrl: 'app/dashboard.component.html',
// #enddocregion template-url
// #docregion css
- styleUrls: ['app/dashboard.component.css']
+ styleUrls: ['app/dashboard.component.css'],
// #enddocregion css
+ directives: [ROUTER_DIRECTIVES]
})
// #docregion component
export class DashboardComponent implements OnInit {
@@ -23,10 +25,10 @@ export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
// #docregion ctor
- constructor(
- private router: Router,
- private heroService: HeroService) {
+ constructor(private router: Router,
+ private heroService: HeroService) {
}
+
// #enddocregion ctor
ngOnInit() {
@@ -34,10 +36,8 @@ export class DashboardComponent implements OnInit {
.then(heroes => this.heroes = heroes.slice(1, 5));
}
+ // TODO Move in docs
// #docregion goto-detail
- gotoDetail(hero: Hero) {
- let link = ['/detail', hero.id];
- this.router.navigate(link);
- }
+ // ....
// #enddocregion goto-detail
}
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.css b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css
index ab2437efd8..3c4397608f 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.css
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.css
@@ -1,9 +1,8 @@
/* #docregion */
-label {
- display: inline-block;
+label,
+dt{
width: 3em;
- margin: .5em 0;
- color: #607D8B;
+ color: #4e6671;
font-weight: bold;
}
input {
@@ -20,11 +19,12 @@ button {
border-radius: 4px;
cursor: pointer; cursor: hand;
}
-button:hover {
+button:hover,
+button:focus {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
- color: #ccc;
+ color: #ccc;
cursor: auto;
}
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
index cf96fc2169..c207886f07 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
@@ -2,13 +2,16 @@
<!-- #docregion -->
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
+ <dl>
+ <dt>id:</dt>
+ <dd>{{hero.id}}</dd>
+ </dl>
<div>
- <label>id: </label>{{hero.id}}</div>
- <div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name" />
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name"/>
+ </label>
</div>
<!-- #docregion back-button -->
<button (click)="goBack()">Back</button>
<!-- #enddocregion back-button -->
-</div>
\ No newline at end of file
+</div>
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 61edccb90e..685067fef2 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -7,6 +7,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
// #enddocregion import-activated-route
+import { Router } from '@angular/router';
+
import { Hero } from './hero';
// #docregion import-hero-service
import { HeroService } from './hero.service';
@@ -27,12 +29,14 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
// #enddocregion implement
hero: Hero;
sub: any;
+ redirect: any;
// #docregion ctor
- constructor(
- private heroService: HeroService,
- private route: ActivatedRoute) {
+ constructor(private heroService: HeroService,
+ private route: ActivatedRoute,
+ private router: Router) {
}
+
// #enddocregion ctor
// #docregion ng-oninit
@@ -44,18 +48,26 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
.then(hero => this.hero = hero);
});
// #enddocregion get-id
+
}
+
// #enddocregion ng-oninit
// #docregion ng-ondestroy
ngOnDestroy() {
this.sub.unsubscribe();
}
+
// #enddocregion ng-ondestroy
// #docregion go-back
goBack() {
- window.history.back();
+ if (window.history.length > 1) {
+ window.history.back();
+ } else {
+ this.router.navigate(['/']);
+ }
}
+
// #enddocregion go-back
}
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.css b/public/docs/_examples/toh-5/ts/app/heroes.component.css
index 35e45af98d..09cb219979 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.css
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.css
@@ -1,6 +1,6 @@
.selected {
background-color: #CFD8DC !important;
- color: white;
+ color: black;
}
.heroes {
margin: 0 0 2em 0;
@@ -8,24 +8,29 @@
padding: 0;
width: 15em;
}
-.heroes li {
+.heroes button {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
- padding: .3em 0;
- height: 1.6em;
+ /*padding: .3em 0;*/
+ /*height: 1.6em;*/
+ text-align: left;
+ width: 15em;
+ height: 2.7em;
border-radius: 4px;
}
-.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.heroes li.selected:hover {
+.heroes button.selected:hover,
+.heroes button.selected:focus{
background-color: #BBD8DC !important;
+ color: black;
+}
+.heroes button:hover,
+.heroes button:focus{
color: white;
+ background-color: #6469dd;
+ left: 0.8em;
}
.heroes .text {
position: relative;
@@ -36,13 +41,13 @@
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
+ background-color: #4E6570;
line-height: 1em;
position: relative;
- left: -1px;
+ left: -8px;
top: -4px;
height: 1.8em;
- margin-right: .8em;
+ /*margin-right: .8em;*/
border-radius: 4px 0 0 4px;
}
button {
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html
index db41c4692e..5ff3602baa 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.html
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html
@@ -2,10 +2,10 @@
<!-- #docregion -->
<h2>My Heroes</h2>
<ul class="heroes">
- <li *ngFor="let hero of heroes"
- [class.selected]="hero === selectedHero"
- (click)="onSelect(hero)">
- <span class="badge">{{hero.id}}</span> {{hero.name}}
+ <li *ngFor="let hero of heroes">
+ <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+ <span class="badge">{{hero.id}}</span> {{hero.name}}
+ </button>
</li>
</ul>
<!-- #docregion mini-detail -->
@@ -15,5 +15,5 @@ <h2>
{{selectedHero.name | uppercase}} is my hero
<!-- #enddocregion pipe -->
</h2>
- <button (click)="gotoDetail()">View Details</button>
+ <a [routerLink]="['/detail', selectedHero.id]">View Details</a>
</div>
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index c0dbd9c8e7..019c0ce0ea 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -1,7 +1,7 @@
// #docplaster
// #docregion
import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@@ -11,8 +11,9 @@ import { HeroService } from './hero.service';
selector: 'my-heroes',
// #enddocregion heroes-component-renaming
templateUrl: 'app/heroes.component.html',
- styleUrls: ['app/heroes.component.css']
- // #docregion heroes-component-renaming
+ styleUrls: ['app/heroes.component.css'],
+ // #docregion heroes-component-renaming,
+ directives: [ROUTER_DIRECTIVES]
})
// #enddocregion heroes-component-renaming, metadata
// #docregion class, heroes-component-renaming
@@ -20,6 +21,7 @@ export class HeroesComponent implements OnInit {
// #enddocregion heroes-component-renaming
heroes: Hero[];
selectedHero: Hero;
+ redirect: string = encodeURIComponent('/heroes');
constructor(
private router: Router,
@@ -35,8 +37,5 @@ export class HeroesComponent implements OnInit {
onSelect(hero: Hero) { this.selectedHero = hero; }
- gotoDetail() {
- this.router.navigate(['/detail', this.selectedHero.id]);
- }
// #docregion heroes-component-renaming
}
diff --git a/public/docs/_examples/toh-5/ts/demo.css b/public/docs/_examples/toh-5/ts/demo.css
new file mode 100644
index 0000000000..71ae29b4eb
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/demo.css
@@ -0,0 +1,9 @@
+body, button{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
+
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index 4df64edba1..1baca8cf32 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<!-- #docregion head -->
<!-- #docregion base-href -->
<head>
@@ -12,6 +12,7 @@
<!-- #enddocregion head -->
<!-- #docregion css -->
<link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="demo.css">
<!-- #enddocregion css -->
<!-- #docregion head -->
<!-- Polyfill(s) for older browsers -->
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css
index 071e665767..e97e0bac9c 100644
--- a/public/docs/_examples/toh-6/ts/app/app.component.css
+++ b/public/docs/_examples/toh-6/ts/app/app.component.css
@@ -1,7 +1,7 @@
/* #docregion */
h1 {
font-size: 1.2em;
- color: #999;
+ color: #747474;
margin-bottom: 0;
}
h2 {
@@ -18,12 +18,13 @@ nav a {
border-radius: 4px;
}
nav a:visited, a:link {
- color: #607D8B;
-}
-nav a:hover {
- color: #039be5;
- background-color: #CFD8DC;
+ color: #44667d;
}
nav a.active {
color: #039be5;
}
+nav a:hover,
+nav a:focus {
+ color: #23338c;
+ background-color: #CFD8DC;
+}
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.css b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
index ce6e963a5f..65f288f696 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.css
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
@@ -30,16 +30,23 @@ h3 {
color: #eee;
max-height: 120px;
min-width: 120px;
- background-color: #607D8B;
+ background-color: #4E6570;
border-radius: 2px;
}
-h4 {
+.hero span{
+ display: block;
position: relative;
+ -webkit-margin-before: 1.33em;
+ -webkit-margin-after: 1.33em;
+ -webkit-margin-start: 0px;
+ -webkit-margin-end: 0px;
+ font-weight: bold;
}
-.module:hover {
+.module:hover,
+.module:focus {
background-color: #EEE;
cursor: pointer;
- color: #607d8b;
+ color: #4b626d;
}
.grid-pad {
padding: 10px 0;
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
index 028eab6eb3..1f091b3fe1 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.html
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
@@ -1,11 +1,15 @@
<!-- #docregion -->
-<h3>Top Heroes</h3>
+<h2>Top Heroes</h2>
<div class="grid grid-pad">
-<!-- #docregion click -->
- <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
-<!-- #enddocregion click -->
- <div class="module hero">
- <h4>{{hero.name}}</h4>
+ <!-- #docregion click -->
+ <div *ngFor="let hero of heroes"
+ class="col-1-4">
+ <div class="module hero"
+ tabindex="0"
+ (click)="gotoDetail(hero)"
+ (keydown.enter)="gotoDetail(hero)">
+ <span>{{hero.name}}</span>
</div>
</div>
+ <!-- #enddocregion click -->
</div>
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
index ab2437efd8..3c4397608f 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
@@ -1,9 +1,8 @@
/* #docregion */
-label {
- display: inline-block;
+label,
+dt{
width: 3em;
- margin: .5em 0;
- color: #607D8B;
+ color: #4e6671;
font-weight: bold;
}
input {
@@ -20,11 +19,12 @@ button {
border-radius: 4px;
cursor: pointer; cursor: hand;
}
-button:hover {
+button:hover,
+button:focus {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
- color: #ccc;
+ color: #ccc;
cursor: auto;
}
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
index 38af5f707e..c04f45bf58 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
@@ -2,12 +2,15 @@
<!-- #docregion -->
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
+ <dl *ngIf="hero.id">
+ <dt>id:</dt>
+ <dd>{{hero.id}}</dd>
+ </dl>
<div>
- <label>id: </label>{{hero.id}}</div>
- <div>
- <label>name: </label>
- <input [(ngModel)]="hero.name" placeholder="name" />
- </div>
+ <label>name:
+ <input [(ngModel)]="hero.name" placeholder="name"/>
+ </label>
+ </div>
<button (click)="goBack()">Back</button>
<!-- #docregion save -->
<button (click)="save()">Save</button>
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css
index 35e45af98d..489aac644a 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.css
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.css
@@ -1,6 +1,6 @@
.selected {
background-color: #CFD8DC !important;
- color: white;
+ color: black;
}
.heroes {
margin: 0 0 2em 0;
@@ -18,14 +18,16 @@
height: 1.6em;
border-radius: 4px;
}
-.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.heroes li.selected:hover {
+.heroes li.selected:hover,
+.heroes li.selected:focus{
background-color: #BBD8DC !important;
+ color: black;
+}
+.heroes li:hover,
+.heroes li:focus{
color: white;
+ background-color: #6469dd;
+ left: .1em;
}
.heroes .text {
position: relative;
@@ -36,7 +38,7 @@
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
+ background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.html b/public/docs/_examples/toh-6/ts/app/heroes.component.html
index 05afc9ea2f..99c8f77265 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.html
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.html
@@ -1,7 +1,13 @@
<!-- #docregion -->
<h2>My Heroes</h2>
<ul class="heroes">
- <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+ <li *ngFor="let hero of heroes"
+ role="button"
+ [class.selected]="hero === selectedHero"
+ [attr.aria-pressed]="hero === selectedHero"
+ (click)="onSelect(hero)"
+ (keydown.enter)="onSelect(hero)"
+ tabindex="0">
<span class="hero-element">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</span>
diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
index b84f744a78..ed96e12ff1 100644
--- a/public/docs/_examples/toh-6/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html lang="en-US">
<head>
<base href="/">
<title>Angular 2 Tour of Heroes</title>
diff --git a/public/docs/_examples/toh-6/ts/sample.css b/public/docs/_examples/toh-6/ts/sample.css
index 0c99008d2d..4fb2cb317b 100644
--- a/public/docs/_examples/toh-6/ts/sample.css
+++ b/public/docs/_examples/toh-6/ts/sample.css
@@ -1,7 +1,16 @@
-/* #docregion */
-.error {color:red;}
+body, button{
+ color: #5E5E5E;
+}
+
+dt {
+ float: left;
+ clear: left;
+}
button.delete-button{
float:right;
- background-color: gray !important;
+ background-color: #5b5b5b !important;
color:white;
}
+
+
+