From bd3a86404b717cc5bda8edc27c3336c044ed8c07 Mon Sep 17 00:00:00 2001 From: AlmeroSteyn 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 | 20 ++++++---- 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 | 15 ++++---- .../toh-5/ts/app/dashboard.component.css | 15 ++++++-- .../toh-5/ts/app/dashboard.component.html | 16 +++++--- .../toh-5/ts/app/hero-detail.component.css | 12 +++--- .../toh-5/ts/app/hero-detail.component.html | 13 ++++--- .../toh-5/ts/app/heroes.component.css | 18 +++++---- .../toh-5/ts/app/heroes.component.html | 8 +++- 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 | 15 ++++---- .../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 | 15 +++++--- .../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 | 10 ++++- 32 files changed, 260 insertions(+), 130 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 b3cd4e8f55..4d93b16e0d 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:`

{{title}}

{{hero.name}} details!

-
{{hero.id}}
+
+
id:
+
{{hero.id}}
+
- - +
` }) 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 @@ - + Angular 2 Tour of Heroes + 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 2dee49f08c..f40560da9f 100644 --- a/public/docs/_examples/toh-2/ts/app/app.component.ts +++ b/public/docs/_examples/toh-2/ts/app/app.component.ts @@ -13,25 +13,33 @@ export class Hero {

My Heroes

-

{{selectedHero.name}} details!

-
{{selectedHero.id}}
-
- - -
+

{{selectedHero.name}} details!

+
+
id:
+
{{selectedHero.id}}
+
+
+ +
`, // #docregion styles-1 styles:[` .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -49,13 +57,15 @@ export class 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 { @@ -67,7 +77,7 @@ export class 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 @@ - + Angular 2 Tour of Heros + 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 9fc4f99910..388cc6a93b 100644 --- a/public/docs/_examples/toh-3/ts/app/app.component.ts +++ b/public/docs/_examples/toh-3/ts/app/app.component.ts @@ -16,8 +16,12 @@ import { HeroDetailComponent } from './hero-detail.component';

My Heroes

@@ -27,7 +31,7 @@ import { HeroDetailComponent } from './hero-detail.component'; styles:[` .selected { background-color: #CFD8DC !important; - color: white; + color: black; } .heroes { margin: 0 0 2em 0; @@ -45,13 +49,15 @@ import { HeroDetailComponent } from './hero-detail.component'; 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 { HeroDetailComponent } from './hero-detail.component'; 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 1192359265..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,24 +15,28 @@ import { Hero } from './hero'; // #docregion template template: `
-

{{hero.name}} details!

-
{{hero.id}}
+

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- - +
` // #enddocregion template -// #docregion v1 +// #docregion v1 }) export class HeroDetailComponent { // #enddocregion v1 // #docregion hero-input - @Input() -// #docregion hero + @Input() +// #docregion hero hero: Hero; -// #enddocregion hero +// #enddocregion hero // #enddocregion hero-input // #docregion v1 } 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 @@ - + Angular 2 Tour of Heroes + 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 7ca63ee237..8672ab0f06 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';

My Heroes

@@ -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 80d6ca020c..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: `
-

{{hero.name}} details

+

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}} -
-
- - +
` 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 @@ - + Angular 2 Tour of Heroes + 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 137e9be7be..3267ad7fd3 100644 --- a/public/docs/_examples/toh-5/ts/app/app.component.css +++ b/public/docs/_examples/toh-5/ts/app/app.component.css @@ -2,7 +2,7 @@ /* #docregion css */ h1 { font-size: 1.2em; - color: #999; + color: #747474; margin-bottom: 0; } h2 { @@ -19,13 +19,14 @@ nav a { border-radius: 4px; } nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; + color: #44667d; } nav a.router-link-active { - color: #039be5; + color: #3953e5; +} +nav a:hover, +nav a:focus { + color: #23338c; + background-color: #CFD8DC; } /* #enddocregion css */ 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 ce6e963a5f..65f288f696 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.css +++ b/public/docs/_examples/toh-5/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-5/ts/app/dashboard.component.html b/public/docs/_examples/toh-5/ts/app/dashboard.component.html index 028eab6eb3..1f091b3fe1 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,15 @@ -

Top Heroes

+

Top Heroes

- -
- -
-

{{hero.name}}

+ +
+
+ {{hero.name}}
+
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 @@

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}}
-
- - +
-
\ No newline at end of file +
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..489aac644a 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; @@ -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-5/ts/app/heroes.component.html b/public/docs/_examples/toh-5/ts/app/heroes.component.html index cce1853d30..b077d4a413 100644 --- a/public/docs/_examples/toh-5/ts/app/heroes.component.html +++ b/public/docs/_examples/toh-5/ts/app/heroes.component.html @@ -3,8 +3,12 @@

My Heroes

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 93fa8d4889..c341ee2cd1 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -1,5 +1,5 @@ - + @@ -12,6 +12,7 @@ + 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 137e9be7be..3267ad7fd3 100644 --- a/public/docs/_examples/toh-6/ts/app/app.component.css +++ b/public/docs/_examples/toh-6/ts/app/app.component.css @@ -2,7 +2,7 @@ /* #docregion css */ h1 { font-size: 1.2em; - color: #999; + color: #747474; margin-bottom: 0; } h2 { @@ -19,13 +19,14 @@ nav a { border-radius: 4px; } nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; + color: #44667d; } nav a.router-link-active { - color: #039be5; + color: #3953e5; +} +nav a:hover, +nav a:focus { + color: #23338c; + background-color: #CFD8DC; } /* #enddocregion css */ 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 @@ -

Top Heroes

+

Top Heroes

- -
- -
-

{{hero.name}}

+ +
+
+ {{hero.name}}
+
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 f532eb0109..fc7d0a0ed1 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 @@

{{hero.name}} details!

+
+
id:
+
{{hero.id}}
+
- {{hero.id}}
-
- - -
+ +
-
\ No newline at end of file +
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 705c67677f..2b9ca82e1b 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 @@

My Heroes